小程序开发 - 模板与配置

◆ WXML 模板语法

◆ WXSS 模板样式

◆ 全局配置

◆ 页面配置

◆ 网络数据请求

WXML 模板语法 - 数据绑定

1. 数据绑定的基本原则

① 在 data 中定义数据

② 在 WXML 中使用数据

2. 在 data 中定义页面的数据

在页面对应的 .js 文件中，把数据定义到 data 对象中即可。

3. Mustache 语法的格式

把data中的数据绑定到页面中渲染，使用 Mustache 语法 （双大括号）将变量包起来即可。

4. Mustache 语法的应用场景

Mustache 语法的主要应用场景如下：

⚫ 绑定内容

⚫ 绑定属性

⚫ 运算（三元运算、算术运算等）

WXML 模板语法 - 事件绑定

1. 什么是事件

事件是 渲染层到逻辑层的通讯方式 。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

2.target 和 currentTarget 的区别

target 是 触发该事件的源头组件 ，而 currentTarget 则是 当前事件所绑定的组件 。

点击内部的按钮时，点击事件以 冒泡 的方式向外扩散，也会触发外层 view 的 tap 事件处理函数。

此时，对于外层的 view 来说：

⚫ e.target 指向的是触发事件的源头组件，因此， e.target 是内部的按钮组件

⚫ e.currentTarget 指向的是当前正在触发事件的那个组件，因此， e.currentTarget 是当前的 view 组件

3. bindtap 的语法格式

在小程序中，不存在 HTML 中的 onclick 鼠标点击事件，而是通过 tap 事件 来响应用户的触摸行为。

① 通过 bindtap ，可以为组件绑定 tap 触摸事件；

② 在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event （一般 简写成 e ） 来接收。

4. 在事件处理函数中为 data 中的数据赋值

通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值。

5. 事件传参

小程序中的事件传参比较特殊， 不能在绑定事件的同时为事件处理函数传递参数 。

6. bindinput 的语法格式

在小程序中，通过 input 事件 来响应文本框的输入事件，语法格式如下：

① 通过 bindinput，可以为文本框绑定输入事件：

② 在页面的 .js 文件中定义事件处理函数：

7. 实现文本框和 data 之间的数据同步

实现步骤：

① 定义数据

② 渲染结构

③ 美化样式

④ 绑定 input 事件处理函数

WXML 模板语法 - 条件渲染

1. wx:if

在小程序中，使用 wx:if="{{ condition }}" 来判断是否需要渲染该代码块；

也可以用 wx:elif 和 wx:else 来添加 else 判断。

2. 结合 <block> 使用 wx:if

如果要 一次性控制多个组件的展示与隐藏 ，可以使用一个 <block></block> 标签将多个组件包装起来，并在

<block> 标签上使用 wx:if 控制属性。

注意： <block> 并不是一个组件 ，它只是一个包裹性质的容器， 不会在页面中做任何渲染。

3. hidden

在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的显示与隐藏

4. wx:if 与 hidden 的对比

① 运行方式不同

⚫ wx:if 以 动态创建和移除元素 的方式，控制元素的展示与隐藏

⚫ hidden 以 切换样式 的方式（display: none/block;），控制元素的显示与隐藏

② 使用建议

⚫ 频繁切换 时，建议使用 hidden

⚫ 控制条件复杂 时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

WXML 模板语法 - 列表渲染

1. wx:for

通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构

2. 手动指定索引和当前项的变量名*

⚫ 使用 wx:for-index 可以指定 当前循环项的索引 的变量名

⚫ 使用 wx:for-item 可以指定 当前项 的变量名

3. wx:key 的使用

类似于 Vue 列表渲染中的 :key ，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，从而 提高渲染的效率

WXSS 模板样式

1. 什么是 WXSS

WXSS (WeiXin Style Sheets)是一套 样式语言 ，用于美化 WXML 的组件样式，类似于网页开发中的 CSS。

2. 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 之间的单位换算*

在 iPhone6 上，屏幕宽度为 375px ，共有 750 个物理像素 ，等分为 750rpx 。则：

750rpx = 375px = 750 物理像素

1rpx = 0.5px = 1物理像素

WXSS 模板样式 - 样式导入

1. 什么是样式导入

使用 WXSS 提供的 @import 语法，可以导入外联的样式表。

2. @import 的语法格式

@import 后跟需要导入的外联样式表的 相对路径 ，用 ; 表示语句结束。

WXSS 模板样式 - 全局样式和局部样式

1. 全局样式

定义在 app.wxss 中的样式为 全局样式 ，作用于每一个页面。

2. 局部样式

在 页面的 .wxss 文件中定义的样式为 局部样式 ，只作用于当前页面。

注意：

① 当局部样式和全局样式冲突时，根据 就近原则 ，局部样式会 覆盖 全局样式

② 当局部样式的 权重大于或等于 全局样式的权重时，才会覆盖全局的样式

全局配置

全局配置文件及常用的配置项

小程序根目录下的 app.json 文件是小程序的 全局配置文件 。常用的配置项如下：

① pages

⚫ 记录当前小程序所有页面的存放路径

② window

⚫ 全局设置小程序窗口的外观

③ tabBar

⚫ 设置小程序底部的 tabBar 效果

④ style

⚫ 是否启用新版的组件样式

页面配置

1. 页面配置文件的作用

小程序中，每个页面都有自己的 .json 配置文件，用来对 当前页面 的窗口外观、页面效果等进行配置。

2. 页面配置 和 全局配置 的关系

小程序中，app.json 中的 window 节点，可以 全局配置 小程序中 每个页面的窗口表现 。

如果某些小程序页面 想要拥有特殊的窗口表现 ，此时，“ 页面级别的 .json 配置文件 ”就可以实现这种需求。

注意：当页面配置与全局配置 冲突 时，根据 就近原则 ，最终的效果 以页面配置为准 。

网络数据请求

1. 小程序中网络数据请求的限制

出于 安全性 方面的考虑，小程序官方对 数据接口的请求 做出了如下两个限制：

① 只能请求 HTTPS 类型的接口

② 必须将 接口的域名 添加到 信任列表 中

2. 配置 request 合法域名

需求描述：假设在自己的微信小程序中，希望请求 https://www.escook.cn/ 域名下的接口

配置步骤： 登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名

注意事项：

① 域名只支持 https 协议

② 域名不能使用 IP 地址或 localhost

③ 域名必须经过 ICP 备案

④ 服务器域名一个月内最多可申请 5 次修改

3. 发起 GET 请求

调用微信小程序提供的 wx. request () 方法，可以发起 GET 数据请求。

4. 发起 POST 请求

调用微信小程序提供的 wx. request () 方法，可以发起 POST 数据请求。

5. 在页面刚加载时请求数据

在很多情况下，我们需要 在页面刚加载的时候 ， 自动请求一些初始化的数据 。此时需要在页面的 onLoad 事件中调用获取数据的函数。

5. 跳过 request 合法域名校验

如果后端程序员 仅仅提供了 http 协议的接口 、 暂时没有提供 https协议的接口 。

6. 关于 跨域 和 Ajax 的说明

跨域问题 只存在于 基于浏览器的 Web 开发中。由于 小程序的宿主环境 不是浏览器，而 是微信客户端 ，所以 小程序中不存在跨域的问题 。

Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象，由于 小程序的宿主环境是微信客户端 ，所以小程序中 不能叫做 “发起 Ajax 请求”，而是叫做“ 发起网络数据请求 ”。

总结

① 能够使用 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() 事件