02-小程序 - 模板与配置◆ WXML 模板语法 ◆ WXSS 模板样式 ◆ 全局配置 ◆ 页面配置 ◆ 网络数据请求 ◆ 案例 - 本地生活
作者:互联网
◆ WXML 模板语法
◆ WXSS 模板样式
◆ 全局配置
◆ 页面配置
◆ 网络数据请求
◆ 案例 - 本地生活
① 能够使用 WXML 模板语法渲染页面结构
⚫wx:if
、wx:elif、wx:else、hidden、wx:for、wx:key
② 能够使用 WXSS 样式美化页面结构
⚫rpx 尺寸单位
、@import 样式导入、全局样式和局部样式
③ 能够使用 app.json 对小程序进行全局性配置
⚫ pages、window
、tabBar
、style
④ 能够使用 page.json 对小程序页面进行个性化配置
⚫ 对单个页面进行个性化配置、就近原则
⑤ 能够知道如何发起网络数据请求
⚫wx.request()
方法、onLoad() 事件
WXML 模板语法 - 数据绑定
1. 数据绑定的基本原则
① 在 data 中定义数据
② 在 WXML 中使用数据
2. 在 data 中定义页面的数据
在页面对应的 .js 文件中,把数据定义到 data 对象中即可:
3. Mustache 语法的格式
把data中的数据绑定到页面中渲染,使用 Mustache 语法
(双大括号)将变量包起来即可。语法格式为:
4. Mustache 语法的应用场景
5. 动态绑定内容
6. 动态绑定属性
7. 三元运算
8. 算数运算
WXML 模板语法 - 事件绑定
1. 什么是事件
事件是渲染层到逻辑层的通讯方式
。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理
2. 小程序中常用的事件
3. 事件对象的属性列表
当事件回调触发的时候,会收到一个事件对象 event,它的详细属性如下表所示:
4. target 和 currentTarget 的区别
target
是触发该事件的源头组件
,而 currentTarget
则是当前事件所绑定的组件。举例如下:
点击内部的按钮时,点击事件以冒泡
的方式向外扩散,也会触发外层 view 的 tap 事件处理函数。
此时,对于外层的 view 来说:
- e.target 指向的是触发事件的源头组件,因此,
e.target 是内部的按钮组件
- e.currentTarget 指向的是当前正在触发事件的那个组件,因此,
e.currentTarget
是当前的 view 组件
5. bindtap 的语法格式
在小程序中,不存在 HTML 中的 onclick 鼠标点击事件,而是通过 tap 事件
来响应用户的触摸行为。
6. 在事件处理函数中为 data 中的数据赋值
通过调用 this.setData(dataObject)
方法,可以给页面 data 中的数据重新赋值,示例如下:
7. 事件传参
小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数
。下面的代码将不能正常工作:
可以为组件提供 data-*
自定义属性传参,其中 * 代表的是参数的名字,示例代码如下:
在事件处理函数中,通过 event.target.dataset.
参数名 即可获取到具体参数的值,示例代码如下:
8. bindinput 的语法格式
在小程序中,通过 input 事件来响应文本框的输入事件,语法格式如下:
9. 实现文本框和 data 之间的数据同步
9. 实现文本框和 data 之间的数据同步
动态绑定跟vue区别 没有v-bind 任何情况下都要加 {{ }}
WXML 模板语法 - 条件渲染
1. wx:if
类似vue中 条件渲染
2. 结合 <block>
使用 wx:if
如果要一次性控制多个组件的展示与隐藏,可以使用一个 <block></block>
标签将多个组件包装起来,并在<block>
标签上使用 wx:if 控制属性,示例如下:
3. hidden
4. wx:if 与 hidden 的对比
① 运行方式不同
⚫ wx:if 以动态创建和移除元素
的方式,控制元素的展示与隐藏
⚫ hidden以切换样式的方式(display: none/block;)
,控制元素的显示与隐藏
② 使用建议
⚫频繁切换
时,建议使用hidden
⚫控制条件复杂
时,建议使用wx:if
搭配wx:elif
、wx:else
进行展示与隐藏的切换
WXML 模板语法 - 列表渲染
1. wx:for
2. 手动指定索引和当前项的变量名*
3. wx:key 的使用
类似于 Vue 列表渲染中的 :key
,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的 key 值,从而提高渲染的效率
,示例代码如下:
WXSS 模板样式
- 什么是 WXSS
WXSS (WeiXin Style Sheets)是一套样式语言,用于美化 WXML 的组件样式,类似于网页开发中的 CSS。
- WXSS 和 CSS 的关系
WXSS 具有 CSS 大部分特性,同时,WXSS 还对 CSS 进行了扩充以及修改,以适应微信小程序的开发。 与 CSS 相比,WXSS
扩展的特性有:
⚫rpx
尺寸单位
⚫@import
样式导入
WXSS 模板样式 - rpx
1. 什么是 rpx 尺寸单位
rpx(responsive pixel)是微信小程序独有的,用来
解决屏适配的尺寸单位。
2. rpx 的实现原理
rpx 的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx 把所有设备的屏幕, 在宽度上等分为
750
份(即:当前屏幕的总宽度为 750rpx)。
⚫ 在较小
的设备上,1rpx 所代表的宽度较小
⚫ 在较大
的设备上,1rpx 所代表的宽度较大
小程序在不同设备上运行的时候,会自动把 rpx 的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配。
3. rpx 与 px 之间的单位换算*
WXSS 模板样式 - 样式导入
- 什么是样式导入
使用 WXSS 提供的
@import
语法,可以导入外联的样式表
@import
的语法格式
@import 后跟需要导入的外联样式表的相对路径,用 ; 表示语句结束。示例如下:
WXSS 模板样式 - 全局样式和局部样式
- 全局样式
定义在
app.wxss
中的样式为全局样式,作用于每一个页面。
- 局部样式
在
页面的 .wxss 文件
中定义的样式为局部样式
,只作用于当前页面。
注意:
①当局部样式和全局样式冲突时,根据就近原则
,局部样式会覆盖
全局样式
② 当局部样式的权重大于或等于
全局样式的权重时,才会覆盖全局的样式
全局配置
1. 全局配置文件及常用的配置项
小程序根目录下的 app.json
文件是小程序的全局配置文件
。常用的配置项如下:
全局配置 - window
2. 了解 window 节点常用的配置项
navigationBarBackgroundColor
:只支持十六进制格式
全局配置 - tabBar
1. 什么是 tabBar
tabBar
是移动端应用常见的页面效果,用于实现多页面 的快速切换
。小程序中通常将其分为:
⚫ 底部 tabBar
⚫ 顶部 tabBar
tab页签必须放到 pages 头部
2. tabBar 的 6 个组
成部分
3. tabBar 节点的配置项
4. 每个 tab 项的配置选项
页面配置
1. 页面配置文件的作用
小程序中,每个页面都有自己的 .json 配置文件,用来对当前页面
的窗口外观、页面效果等进行配置。
2. 页面配置和全局配置的关系
- 小程序中,
app.json
中的 window 节点,可以全局配置小程序中每个页面的窗口表现。 - 如果某些小程序页面想要拥有
特殊的窗口表现
,此时,“页面级别的 .json 配置文件”就可以实现这种需求。
注意:当页面配置与全局配置冲突时,根据
就近原则
,最终的效果以页面配置为准
3. 页面配置中常用的配置项
网络数据请求
1. 小程序中网络数据请求的限制
2. 配置 request 合法域名
需求描述:假设在自己的微信小程序中,希望请求
https://www.escook.cn/
域名下的接口 配置步骤:登录微信小程序管理后台
->开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名
3. 发起 GET 请求
调用微信小程序提供的 wx.request()
方法,可以发起 GET 数据请求,示例代码如下
4. 发起 POST 请求
调用微信小程序提供的 wx.request()
方法,可以发起 POST 数据请求,示例代码如下:
5. 在页面刚加载时请求数据
在很多情况下,我们需要在页面刚加载的时候,自动请求一些初始化的数据
。此时需要在页面的 onl oad 事件中调用获取数据的函数,示例代码如下
5. 跳过 request 合法域名校验
6. 关于跨域
和 Ajax
的说明
跨域问题只存在于基于浏览器的 Web 开发中。由于
小程序的宿主环境
不是浏览器,而是微信客户端,所以小程序中不存在跨域的问题
。
Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象,由于小程序的宿主环境是微信客户端
,所以小程序中不能叫做
“发起 Ajax 请求”,而是叫做“发起网络数据请求
”。
案例 - 本地生活
标签:02,WXSS,样式,配置,程序,页面,模板,wx 来源: https://blog.csdn.net/weixin_51353891/article/details/121074626