小程序-模板与配置

小程序-模板与配置

devtools/2025/2/4 7:58:40/

前言

1. 数据绑定

在这里插入图片描述
定义数据

使用数据

然后我们把info渲染到页面上

在这里插入图片描述

1.1 绑定内容

在这里插入图片描述

这就是动态绑定内容

1.2 绑定属性

在这里插入图片描述

vue中绑定属性要用v，这个就不用了
绑定内容和属性都是Mustache语法

在这里插入图片描述

这样就不会变形了，因为宽度不变，高度变

1.3 三元运算

在这里插入图片描述

数值到底为多少呢，我们打开调试器

里面有一个AppData就可以看到里面的值了

在这里插入图片描述
这个就可以查看当前页面里面的数据了

1.4 算数运算

在这里插入图片描述

2. 事件绑定

2.1 什么是事件

在这里插入图片描述

2.2 小程序中常用的事件

在这里插入图片描述

2.3 事件对象的属性列表

在这里插入图片描述

2.4 target与currentTarget的区别

在这里插入图片描述

2.5 bindtap的语法格式

在这里插入图片描述

3. 事件传参与数据同步

3.1 在事件处理函数中data中的数据赋值

在这里插入图片描述

3.2 事件传参

在这里插入图片描述

写上{{}}就是数字2，不然就是一个字符2

看这就是字符串2
我们也可以看出参数的存储也是在e里面的

3.3 bindinput的语法格式

在这里插入图片描述

这里有个光标在一闪一闪的

3.4 实现文本框与data之间的数据同步

在这里插入图片描述

4. 条件渲染

4.1wx:if

在这里插入图片描述

在这里插入图片描述

4.2 结合使用wx:if

在这里插入图片描述
接下来我们要控制这两个的view的一次性展示，可以用一个大的view包裹
也可以用block
但是大的view会渲染出来

点这个小箭头

在这里插入图片描述
在点击

就可以渲染出来了

但是block就不会被渲染成任何组件，它只起一个包裹的作用

直接就渲染出了子view

4.3 hidden

在这里插入图片描述

4.4 wx:if与hidden的对比

在这里插入图片描述

看这个我们就可以看出，当前页面上只有一个view

这里可以修改true和false

这里就有两个view了，因为if是动态创建的，hidden是用一个样式来控制的

比如条件多，if else，就用if那个

5. 列表渲染

5.1 wx:for

在这里插入图片描述

5.1 手动指定索引和当前项的变量名

在这里插入图片描述

5.3 wx:key的使用

在这里插入图片描述

key的作用就是提高效率，没有警告

在这里插入图片描述
这个的key就是idx了

6. wxss与css关系

## 6.1 什么是wxss

在这里插入图片描述

7. rpx单位

在这里插入图片描述

在这里插入图片描述

8. 样式导入

在这里插入图片描述

我们这里定义了一个公共的样式

在这里插入图片描述
这样就可以导入了

在这里插入图片描述

9. 全局样式与局部样式

在这里插入图片描述

在这里插入图片描述

这个001就是权重

这个权重为011，所以以他为准

10. 全局配置-常用的全局配置项以及小程序窗口的组成部分

在这里插入图片描述

11. window-导航栏

在这里插入图片描述

在这里插入图片描述

不支持写red这种形式

12. 下拉刷新

在这里插入图片描述

我们发现了问题，下拉之后这个原本的第一个红色就变为蓝色了
而且刷新效果过了几秒就恢复了

但是在手机上就没有这个问题，手机上会有红色，而且不会自己合上

在这里插入图片描述

loading就是那三个小圆点

在这里插入图片描述

13. 设置上拉触底的距离

就是上拉多少的时候才加载下一页的数据

在这里插入图片描述
rpx单位可以不写

而且有默认值，所以可以不写
在这里插入图片描述

14. tabBar

在这里插入图片描述

现在配置一个tabBar

在这里插入图片描述

再来一次

在这里插入图片描述

tabBar的必须放在pages的前面位置才可以

在这里插入图片描述

如果这三个放在后面的话，就不行了

15. 小程序的页面配置

在这里插入图片描述

局部允许下拉刷新

16. GET和POST请求

在这里插入图片描述

但是我们的是这样的
这样就无法用其他的接口了
如果要用百度的接口，那么就要把百度的域名添加到request合法域名那里
所以要请求某个的接口的时候，要先把它的接口域名搞过来配置

16.1 配置request域名

在这里插入图片描述

在这里插入图片描述

这样的话，我们的小程序就可以请求这两个域名下的接口了

在这里插入图片描述

注意这个request合法域名只能修改五次

16.2 发起GET请求

在这里插入图片描述

但是这个域名不能用了，我们得换一个

在这里插入图片描述

在这里插入图片描述

16.3 发起POST请求

在这里插入图片描述

16.4 在页面刚加载的时候，自动请求一些初始化的数据

在这里插入图片描述

17. request请求的注意事项

发送请求有两个条件
第一个就是https
第二个就是要配置对应域名
在这里插入图片描述

在这里插入图片描述
项目上线的时候就不可以了

17.1 关于跨域和Ajax的说明

在这里插入图片描述

18. 案例-实现本地生活的首页基础布局

在这里插入图片描述

在这里插入图片描述
现在开始新建三个页面

18.2 配置导航栏效果

在这里插入图片描述

在这里插入图片描述

18.3 tabBar

在这里插入图片描述

18.4 轮播图

在这里插入图片描述

在这里插入图片描述

将data保存

在这里插入图片描述

现在搞上小圆点的效果与衔接滚动

在这里插入图片描述

18.5 九宫格的效果

在这里插入图片描述

现在开始美化

居中对齐
在这里插入图片描述

在这里插入图片描述

搞上边框
只需要右侧和下部的边框
在这里插入图片描述
再给外部容器一个边框

在这里插入图片描述

18.6 图片布局

在这里插入图片描述

现在让这个图片距离上下左右都有间距

现在让图片之间有间距

让剩余的距离平分

总结

下一节讲视图与逻辑

http://www.ppmy.cn/devtools/155948.html

相关文章

全面剖析 XXE 漏洞：从原理到修复

全面剖析 XXE 漏洞：从原理到修复

目录前言 XXE 漏洞概念漏洞原理 XML 介绍 XML 结构语言以及语法 XML 结构 XML 语法规则 XML 实体引用漏洞存在原因产生条件经典案例介绍分析 XXE 漏洞修复方案结语前言网络安全领域暗藏危机，各类漏洞威胁着系统与数据安全。XXE 漏洞虽不常见&a…

阅读更多...

EF Core与ASP.NET Core的集成

EF Core与ASP.NET Core的集成

目录分层项目中EF Core的用法数据库的配置数据库迁移步骤汇总注意： 批量注册上下文分层项目中EF Core的用法创建一个.NET类库项目BooksEFCore，放实体等类。NuGet：Microsoft.EntityFrameworkCore.RelationalBooksEFCore中增加实…

阅读更多...

在CentOS服务器上部署DeepSeek R1

在CentOS服务器上部署DeepSeek R1

在CentOS服务器上部署DeepSeek R1，并通过公网IP与其进行对话，可以按照以下步骤操作：一、环境准备系统要求： CentOS 8+（需支持AVX512指令集）。硬件配置： GPU版本：NVIDIA驱动520+，CUDA 11.8+。 CPU版本：至少16核处理器，64GB内存。存储空间：原始模型需要30GB，量…

阅读更多...

【JAVA篇】------ spring aop

【JAVA篇】------ spring aop

文章目录 AOP（面向切面编程）前言一、AOP的概念二、AOP的核心概念三、AOP在Java中的应用场景1. 整体介绍2. 静态代理模式3. 动态代理模式（JDK动态代理） 总结 AOP（面向切面编程） 💬欢迎交流&#…

阅读更多...

Deep Crossing：深度交叉网络在推荐系统中的应用

Deep Crossing：深度交叉网络在推荐系统中的应用

实验和完整代码完整代码实现和jupyter运行：https://github.com/Myolive-Lin/RecSys--deep-learning-recommendation-system/tree/main 引言在机器学习和深度学习领域，特征工程一直是一个关键步骤，尤其是对于大规模的推荐系统和广告点击率预…

阅读更多...

无人机图传模块 wfb-ng openipc-fpv，4G

无人机图传模块 wfb-ng openipc-fpv，4G

openipc 的定位是为各种模块提供底层的驱动和linux最小系统，openipc 是采用buildroot系统编译而成，因此二次开发能力有点麻烦。为啥openipc 会用于无人机图传呢？因为openipc可以将现有的网络摄像头ip-camera模块直接利用起来，从而…

阅读更多...

【大数据技术】教程01：搭建完全分布式高可用大数据集群（VMware+CentOS+FinalShell）

【大数据技术】教程01：搭建完全分布式高可用大数据集群（VMware+CentOS+FinalShell）

搭建完全分布式高可用大数据集群（VMwareCentOSFinalShell） 资源下载 VMware Workstation Pro 16CentOS-Stream-10-latest-x86_64-dvd1.isoFinalShell 4.5.12 注：请在阅读本篇文章前，将以上资源下载下来。写在前面本章主要介…

阅读更多...

7.抽象工厂(Abstract Factory)

7.抽象工厂(Abstract Factory)

抽象工厂与工厂方法极其类似，都是绕开new的，但是有些许不同。动机在软件系统中，经常面临着“一系列相互依赖的对象”的创建工作；同时，由于需求的变化，往往存在更多系列对象的创建工作。假设案例假设…

阅读更多...

最新文章