附：「这是我参与2022首次更文挑战的第18天，活动详情查看：2022首次更文挑战
模板语法
1. 数据绑定
1.1 数据绑定的基本原则
（1）在 data 中定义数据
Page({
data: {
msg:"hello world"
},
})
（2）在 wxml 中使用数据 -> Mustache语法（与Vue一样）
<view>{{msg}}</view>
1.2 Mustache语法应用场景
（1）绑定内容
- data中定义数据，wxml 中用 Mustache语法使用
Page({
data:{
msg:"Hello World"
}
})
<view>{{msg}}</view>
（2）绑定属性
- 注：动态绑定属性与Vue不同（Vue使用v-bind，而小程序使用的是Mustache语法）
Page({
data: {
imgSrc:'http://www.itheima.com/images/logo.png'
},
})
<image src="{{ imgSrc }}"></image>
（3）三元运算
Page({
data:{
randomNum: Math.random() * 10 // 生成 10 以内的随机数
}
})
<view>{{ randomNum >= 5 ? "随机数字大于5或者等于5" : "随机数字小于5"}}</view>
（4）算术运算
Page({
data:{
randomNum: Math.random().toFixed(2) // 生成一个带两位小数的随机数，例如：0.34
}
})
<view>生成100以内的随机数：{{randomNum * 100}}</view>
2. 事件绑定
2.1 什么是事件？
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。
2.2 小程序中常用的事件
- bindtap 相当于网页的 click事件（鼠标点击）
2.3 事件对象的属性列表（event）
当事件回调触发的时候，会收到一个事件对象 event，它的详细属性如下表所示：
红色为常用的
示例：
#home.wxml
<button bindtap="onClick">点我</button>
#home.js
Page({
onClick(e){
console.log(e)
}
})
输出结果：
2.4 target 和 currentTarget 的区别
- target 相当于 事件捕获
- currentTarget 相当于 事件冒泡
2.5 bindtap 的语法格式
在小程序中，不存在 template 中的 onclick 鼠标点击事件，而是通过 tap 事件来响应用户的触摸行为。（tap 相当于 click）
（1）通过 bindtap，可以为组件绑定 tap 触摸事件
<button type="primary" bindtap="onButtonClick">按钮</button>
（2）在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event（一般简写为 e）来接收：
Page({
onButtonClick(e){ // 按钮的 tap 事件处理函数
console.log('按钮被点击了')
console.log(e) // 事件参数对象 e
}
})
2.6 在事件处理函数中为 data 中的数据赋值
通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值，示例如下：
Page({
data: {
count:0
},
// 修改 count 的值
changeCount(){
this.setData({
count: this.data.count + 1
})
}
})
2.7 事件传参（定义 + 接收）
（1）小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。例如，下面的代码将不能正常工作：
// vue支持这种写法，但是小程序不支持
<button type="primary" bindtap="btnHandler(123)">事件传参</button>
在小程序中会把 bindtap 的属性值，统一当做事件名称来处理，相当于要调用一个名称为 btnHandler(123) 的事件处理函数。
（2）正确的事件传参做法是可以为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字，示例代码如下：
<button type="primary" bindtap="btnHandler" data-info="{{123}}">事件传参</button>
解析：
- info 会被解析为 参数的名字
- 数值 123 会被解析为 参数的值
（3）接收参数值：在事件处理函数中，通过 event.target.dataset.参数名 可以获取到
具体参数的值，示例代码如下：
Page({
btnHandler(e){
console.log(e.target.dataset.info) // 123
}
})
2.8 bindinput（定义 + 接收）
在小程序中，通过 input 事件来响应文本框的输入事件，语法格式如下：
（1）通过 bindinput，可以为文本框绑定输入事件：
<input bindinput="inputHandler"></input>
（2）接收值：在事件处理函数中，使用 event.detail.value ，可以获取到文本框内输入的最新值。
Page({
inputHandler(e){
console.log(e.detail.value);
}
})
3. 条件渲染
3.1. wx:if （复杂条件）
在小程序中，使用 wx:if="{{ condition }}" 来判断是否需要渲染该代码块：
<view wx:if="{{ condition }}"> true </view>
也可以是有 wx:elif 和 wx:else 来添加 else 判断：
<view wx:if="{{ type === 1}}">男</view>
<view wx:elif="{{ type === 2}}">女</view>
<view wx:else>保密</view>
3.2 结合 使用 wx:if
如果要一次性控制多个组件的显示与隐藏，可以使用一个标签将多个组件包装起来，并在标签上使用 wx:if 控制属性，示例代码如下：
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
注意：
- 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。
- 如果最外层是 那么就会被渲染到页面上。
3.3 hidden （简单条件）
- 条件只有 true 或者 false 就可以使用 hidden
- 在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的显示与隐藏：
<view hidden="{{ condition }}">条件为true显示，条件为false隐藏</view>
3.4 wx:if 和 hidden 的区别
（1）运行方式不同
- wx:if 以动态创建和移除元素的方式，控制元素的显示与隐藏，相当于vue中的v-if
- hidden 以切换样式的方式（display: none/block）,来控制元素的显示与隐藏，相当于vue中的v-show
（2）使用建议
- 频繁切换时，建议使用 hidden
- 控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换
4. 列表渲染
4.1 wx:for
通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：
<view wx:for="{{ array }}">
索引是：{{index}} || 当前项是：{{item}}
</view>
默认情况下，当前循环项的索引用 index 表示，当前循环项用 item 表示。
4.2 手动指定索引和当前项的变量名
- 使用 wx:for-index 可以指定当前循环项的索引的变量名
- 使用 wx:for-item 可以指定当前项的变量名
示例代码如下：
- 先循环数组，然后在设置索引名和当前项的名
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
索引是：{{idx}} || 当前项是：{{itemName}}
</view>
4.3 wx:key
类似于 Vue 列表渲染中的 :key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率。示例代码如下：
#.js
Page({
data:{
userList: [
{id: 1, name:"小红"},
{id: 2, name:"小明"},
{id: 3, name:"小何"}
]
}
})
#.wxml
<view wx:for="{{ userList }}" wx:key="id">{{item.name}}</view>
模板样式
1. wxss 和 css 的关系
WXSS 具有 CSS 大部分特性，同时，WXSS 还对 CSS 进行了扩充以及修改，以适应微信小程序的开发。与 CSS 相比，WXSS扩展的特性有：
- rpx 尺寸单位
- @import 样式导入
- 注意：这两个特性只能在wxss中使用
2. rpx 尺寸单位
rpx （responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位。
2.1 rpx 的实现原理
rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为 750份（即：当前屏幕的总宽度为 750rpx）
- 在较小的设备上，1rpx所代表的宽度较小
- 在较大的设备上，1rpx所代表的宽度较大
小程序在不同设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。
2.1 rpx 与 px 之间的单位换算
在 iphone6上，屏幕宽度为375px，共有750个物理像素，等分为 750rpx。则：
- 750rpx = 375px = 750物理像素
- 1rpx = 0.5px = 1物流像素
如图：
官方建议：开发微信小程序时，设计师可以用 iPhone6 作为视觉稿的标准。
开发举例：在 iphone6 上如果要绘制宽100px，高20px的盒子，换算成 rpx单位，宽高分别为: 200rpx 和 40rpx。
总结：
- 如果你是20px，那么就乘以2，就是换算后的rpx单位了，等于40rpx。
- 公式：rpx = px * 2
3. 样式导入
使用 WXSS 提供的 @import 语法，可以导入外联的样式表。
3.1 @import 的语法格式
@import 后跟需要导入的外联样式表的相对路径，用 ；表示语句结束。示例如下：
#common.wxss （某个常用样式文件）
view {
background-color: red;
}
#home.wxss（某个项目文件）
@import "common.wxss";
view {
width:200px;
height:200px;
}
4. 全局样式和局部样式
4.1 全局样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。
4.2 局部样式
在页面的 .wxss 文件中定义的样式为局部样式，只作用于当前页面。
4.3 全局样式与局部样式权重
关于权重的问题，在编辑器内，我们可以将鼠标浮在标签上会显示权重等级，谁的权重高，就展示谁的样式。
当前 view 的权重是0,0,1
注意点：
- 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式。
- 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式。
全局配置
1. 全局配置文件及常用的配置项
小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下：
- pages：记录当前小程序所有页面的存放路径
- window：全局设置小程序窗口的外观
- tabBar：设置小程序底部的 tabBar 效果
- style：是否启用新版的组件样式
2. window 配置
2.1 小程序窗口组成部分
2.2 了解 window 节点常用的配置项
2.3 设置导航栏的标题
设置步骤：app.json -> window -> navigationBarTitleText
需求：
- 把导航条上的标题，从默认的 “WeChat”修改为 “小何何”，效果如图所示：
修改后
2.4 设置导航栏的背景色
设置步骤：app.json -> window -> nabigationBarBackgroundColor
需求：
- 把导航栏标题的背景色，从默认的 #fff 修改为 #2b4b6b，效果图示所示：
修改后
注意：只支持16进制颜色，比如：#2b4b6b、#000000
2.5 设置导航栏的标题颜色
设置步骤：app.json -> window -> navigationBarTextStyle
需求：把导航条上的标题，从默认的 black 修改为 white，效果如图所示：
修改后
2.6 全局开启下拉刷新功能
概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。
设置步骤：app.json -> window -> 把 enablePullDownRefresh 的值设置为 true
注意：在 app.json 中启用下拉刷新功能，会作用于每个小程序页面！
2.7 设置下拉刷新窗口的背景色
当全局开启下拉刷新功能之后，默认的窗口背景为白色。如果自定义下拉刷新窗口背景色，设置步骤为：app.json -> window -> 为 backgroundColor 指定16进制的颜色值 #efefef。效果如下：
2.8 设置下拉刷新 loading 样式
当全局开启下拉刷新功能之后，默认窗口的 loading 样式为白色，如果要更改 loading 样式的效果，设置步骤为 app.json -> window -> 为 backgroundTextStyle 指定 dark 值。效果如下：
注意：backgroundTextStyle 的可选值只有 light 和 dark
2.9 设置上拉触底的距离
概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
设置步骤：app.json -> window -> 为 onReachBottomDistance 设置新的数值
注意：默认距离为50px，如果没有特殊需求，建议使用默认值即可
3. tabBar 配置
3.1 什么是tabBar
tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：
- 底部 tabBar
- 顶部 tabBar
注意：
- tabBar中只能配置最少2个、最多5个 tab页签
- 当渲染顶部 tabBar时，不显示icon，只显示文本
3.2 tabBar的6个组成部分
- backgroundColor：tabBar 的背景色
- seletedIconPath：选中时的图片路径
- borderStyle：tabBar上边框的颜色
- iconPath：未选中时的图片路径
- selectedColor：tab上的文字选中时的颜色
如图：
3.3 tabBar节点的配置项
3.4 每个 tab 项的配置选项
每个 tab 项相当于 list 里的每个对象，它有以下属性：
示例代码：
"tabBar":{
"list":[
{
"pagePath":"pages/home/home",
"text":"首页",
"iconPath":"",
"selectedIconPath":""
},
{
"pagePath":"pages/me/me",
"text":"个人中心"
}
]
},
注意点：每一个 tabBar 的页面都要放在 pages 的最前面
页面配置
1. 页面配置文件的作用
小程序中，每个页面都有自己的 .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置。
2. 页面配置 和 全局配置的关系
小程序中，app.json 中的 window节点，可以全局配置小程序中每个页面的窗口表现。
如果某个小程序页面想要拥有特殊的窗口表现，此时，“页面级别的 .json 配置文件”就可以实现这种需求。
注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准
3. 页面配置中常用的配置项
补充：
- 下拉刷新（enablePullDownRefresh）不推荐全局设置，而是哪个页面需要下拉刷新就设置哪个页面下拉刷新
网络数据请求
1. 小程序中网络数据请求的限制
出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：
（1）只能请求 HTTPS 类型的接口
（2）必须将接口的域名添加到信任列表中
如图：
2. 配置 request 合法域名
需求描述：假设在自己的微信小程序中，希望请求 www.escook.cn/ 域名下的接口
配置步骤：登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名
注意事项：
（1）域名只支持 https 协议
（2）域名不能使用 IP 地址或 loaclhost
（3）域名必须经过 ICP 备案
（4）服务器域名一个月内最多可申请5次修改
3. 发起 GET 请求
调用微信小程序提供的 wx.request() 方法，可以发起 GET 数据请求，示例代码如下：
onGet(){
wx:wx.request({
url: 'https://www.escook.cn/api/get', // 请求的接口地址，必须基于 https 协议
method:"GET", // 请求的方式
data: { // 发送到服务器的数据
name:"xiaohe",
age:19
},
success: (res) => { // 请求成功之后的回调函数
console.log(res);
},
})
},
4 发起 POST
调用微信小程序提供的 wx.request() 方法，可以发起 POST 数据请求，示例代码如下：
onPost(){
wx:wx.request({
url: 'https://www.escook.cn/api/post', // 请求的接口地址，必须基于 https 协议
method:"POST", // 请求的方式
data: { // 发送到服务器的数据
name:"xiaohe",
age:19
},
success: (res) => { // 请求成功之后的回调函数
console.log(res);
},
})
},
5. 在页面刚加载时请求数据
在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的 onLoad 事件中调用获取数据的函数，示例代码如下：
Page({
onLoad: function(option){
this.getGridList()
this.getSwiperList()
}
})
如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口。此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启【开发环境不效验请求域名、TLS版本及 HTTPS 证书】选项，跳过 request 合法域名的校验。
注意：跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用，（项目上线的时候要关闭勾选）！
6. 关于跨域和 AJAX的说明
跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。
AJAX技术的核心是依赖于浏览器中的 ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起ＡＪＡＸ请求”，而是叫做“发起网络数据请求”。
总结
以上知识点学完，你需要掌握以下几点：
