1、WXML模板语法
1. 数据绑定
- 数据绑定的基本原则
- 在data中定义数据
- 在WXML中使用数据
2. 在data中定义页面的数据
在页面对应的.js文件中，把数据定义到data对象中。
3. Mustache语法的格式
把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。语法格式为：
<view>{{ 要绑定的数据名称 }}</view>
4. Mustache语法的应用场景
- 绑定内容
- 绑定属性
- 运算（三元运算、算术运算等）
5. 动态绑定内容
<view>{{ info }}</view>
Page({
data: {
info: 'helloworld',
},
})
6. 动态绑定属性
<image src="{{ imgSrc }}"></image>
Page({
data: {
imgSrc: 'http://www.itheima.com/images/logo.png'
},
})
7. 三元运算
<view>{{ randomNum >=5 ? '随机数字大于或等于5':'随机数字小于5' }}</view>
Page({
data: {
randomNum: Math.random()*10 // 生成10以内的随机数
},
})
8. 算数运算
<view>{{ randomNum * 100 }}</view>
Page({
data: {
randomNum: Math.random().toFixed() // 生成带两位小数的随机数
},
})
2、事件绑定
1. 什么是事件
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。
2. 小程序中常用的事件
| 类型 | 绑定方式 | 事件描述 |
|---|---|---|
| tap | bindtap 或 bind:tap | 手指触摸后马上离开，类似于HTML中的click事件 |
| input | bindinput 或 bind:input | 文本框的输入事件 |
| change | bindchange 或 bind:change | 状态改变时触发 |
3. 事件对象的属性列表
当事件回调触发的时候，会受到一个事件对象event，它的详细属性如下表所示：
| 属性 | 类型 | 说明 |
|---|---|---|
| type | String | 事件类型 |
| timeStamp | Integer | 页面打开到触发事件所经过的毫秒数 |
| target | Object | 触发事件的组件的一些属性值集合 |
| currentTarget | Object | 当前组件的一些属性值集合 |
| detail | Object | 额外的信息 |
| touches | Array | 触摸事件，当前停留在屏幕中的触摸点信息的数组 |
| changeTouches | Array | 触摸事件，当前变化的触摸点信息的数组 |
4. target和currentTarget的区别
target是触发该事件的源头组件，currentTarget是当前事件所绑定的组件。举例如下：
<view bindtap="handler">
<button></button>
</view>
e.target指的是button，但是e.currentTarget是view组件。触摸button通过冒泡，触发了handler事件处理函数。
5. bindtap的语法格式
在小程序中，不存在HTML中的onclick鼠标点击事件，而通过tap事件来响应用户的触摸行为。
- 通过bindtap，可以为组件绑定tap触摸事件
<button type="primary" bindtap="btnTapHandler"></button> - 在页面的.js文件中定义对应的事件处理函数，事件参数通过形参event（一般简写成e）来接收：
btnTapHandler(e) { // 按钮的tap事件处理函数
console.log(e); // 打印事件参数对象e
},
6. 在事件处理函数中为data中的数据赋值
调用this.setData(dataObject)方法，给页面data中的数据重新赋值。
<view>{{ count }}</view>
<button bindtap="changeCount" type="primary">修改count的值</button>
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
count: 0
},
changeCount() {
this.setData({
count: this.data.count+1
});
},
})
7. 事件传参
不能在绑定事件的同时为事件处理函数传递参数。因为小程序会把bindtap的属性值，统一当作事件处理函数名称来处理。
可以为组件提供data-*自定义属性传参，其中*代表的是参数的名字。
<button bindtap="btnHandler" data-info="{{2}}">事件传参</button>
info 会被解析为 参数的名字
数值 2 会被解析为 参数的值
在事件处理函数中，通过event.target.dataset.参数名获取到具体参数的值。
8. bindinput 的语法格式
通过input事件响应文本框的输入事件，语法格式如下：
- 通过bindinput，可以为文本框绑定输入事件：
<input bindinput="inputHandler"></input> - 在页面的.js文件中定义事件处理函数：
inputHandler(e) {
// e.detail.value 是变化过后，文本框最新的值
console.log(e.detail.value);
}
9. 实现文本框和data之间的数据同步
实现步骤：
- 定义数据
- 渲染结构
- 美化样式
- 绑定input事件处理函数
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>
2. 结合使用wx:if
如果要一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在标签上使用wx:if控制属性，示例如下：
<block wx:if="{{true}}">
<view>view1</view>
<view>view2</view>
</block>
3. hidden
使用hidden=“{{condition}}”条件是true 则隐藏，false 则不隐藏。
<view hidden="{{false}}">条件为false则不隐藏，为true则隐藏</view>
4. wx:if与hidden的对比
- 运行方式不同
- wx:if以动态创建和移除元素的方式，控制元素的展示与隐藏
- hidden以切换样式的方式(display:none/block;)，控制元素的显示与隐藏
- 使用建议
- 频繁切换 时，建议使用hidden
- 控制条件复杂 时，建议使用wx:if 搭配wx:elif、wx:else进行展示与隐藏的切换
4、列表渲染
1. wx:for
通过wx:for可以根据指定的数组，循环渲染重复的组件结构，语法实例如下：
<view wx:for="{{array}}">
索引是：{{index}}， 当前项是:{{item}}
</view>
2. 手动指定索引和当前项的变量名
- 使用wx:for-index可以指定当前循环项的索引的变量名
- 使用wx:for-item可以指定当前项的变量名
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
索引是：{{idx}}，当前项是：{{itemName}}
</view>
3. wx:key 的使用
类似于Vue列表渲染中的:key，小程序在实现列表渲染时，建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率。
data: {
userList:[
{id:1, name: 'hot'},
{id:2, name: 'cold'},
{id:3, name: 'white'}
]
}
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>
5、 WXSS模板样式
1. 什么是WXSS
WXSS是一套样式语言，类似于CSS
2. WXSS和CSS的关系
WXSS具有CSS大部分特性，同时，WXSS对CSS进行了扩充以及修改，以适应小程序>微信小程序的开发。
与CSS相比，WXSS扩展的特性有：
- rpx尺寸单位
- @import 样式导入
3. rpx
- 什么是rpx尺寸单位
rpx是小程序>微信小程序独有的，用来解决屏适配的尺寸单位。 - rpx的实现原理
鉴于不同的设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份（即：当前屏幕的总宽度为750rpx）。
- 在较小的设备上，1rpx所代表的宽度较小
- 在较大的设备上，1rpx所代表的宽度较大
小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。
- rpx和px之间的单位换算
在iPhone6，屏幕宽度为375px，共有750个物理像素，等分为750rpx。因此：
750rpx=375px=750个物理像素
1rpx=0.5px=1物理像素
1rpx=0.5px
| 设备 | 换算 |
|---|---|
| iphone5 | 1rpx=0.42px |
| iphone6 | 1rpx=0.5px |
| iphone6 Plus | 1rpx=0.552px |
4. 样式导入
- 什么是样式导入
使用WXSS提供的@import语法，导入外联的样式表。 - @import语法格式
@import后面跟需要导入的外联样式表的相对路径，用;表示结束。示例如下：
// common.wxss
.small {
padding: 5px;
}
// app.wxss
@import "common.wxss";
5. 全局样式和局部样式
- 全局样式
定义在app.wxss中的样式，是全局样式，会作用于小程序的每一个页面。 - 局部样式
在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面。
注意：
- 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式。
- 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式。
6、 全局配置
1. 全局配置文件及常用的配置项
小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项如下：
2. window
- 小程序窗口的组成部分：从上到下依次为：navigationBar 、background（默认不可见，下拉才显示） 、页面主体区域，前两个都可以通过window节点设置
- window节点常用的配置项
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| navigationBarTitleText | String | 字符串 | 导航栏标题文字内容 |
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色 |
| navigationBarTextStyle | String | white | 导航栏标题颜色，仅支持black/white |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 |
| backgroundTextStyle | String | light | 下拉loading的颜色，仅支持dark/light |
| enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新 |
| onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离，单位为px |
- 设置导航栏的标题内容
步骤： app.json->window->navigationBarTitleText
"window":{
"navigationBarTitleText": "小程序>微信小程序",
},
- 设置导航栏的背景色(一定要 十六进制)
步骤： app.json->window->navigationBarBackgroundColor
"window":{
"navigationBarBackgroundColor": "#2b4b6b",
},
- 设置导航栏的标题颜色(仅支持 white 或 black)
步骤： app.json->window->navigationBarTextStyle
"window":{
"navigationBarTextStyle": "white",
},
- 全局开启下拉刷新功能
设置步骤：app.json->window->enablePullDownRefresh设置值为true。
在app.json中启用该功能，会作用于每个页面。 - 设置下拉刷新时窗口的背景色(只能 十六进制)
app.json -> window -> backgroundColor ，指定颜色 - 设置下拉刷新时，loading的样式(只能是 dark 或 light)
app.json -> window -> backgroundTextStyle ,指定 dark 或 light。 - 设置上拉触底的距离
上拉触底：通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
设置步骤：app.json -> window -> onReachBottomDistance
默认距离为50px，如果没有特殊需求，使用默认值即可。
3. tabBar
- 什么是tabBar
tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：
- 底部tabBar
- 顶部tabBar
注意： - tabBar中只能配置最少2个、最大5个tab页签
- 当渲染顶部tabBar时，不显示icon，只显示文本
- tabBar 的6个组成部分
- backgroundColor：tabBar的背景颜色
- selectedIconPath：选中时的图片路径
- borderStyle：tabBar上边框的颜色
- iconPath：未选中时 图片的路径
- color：tab上文字默认（未选中）颜色
- selectedColor：tab上的文字选中时的颜色
- tabBar节点配置项(在app.json中和window平级: “tabBar”: {})
| 属性 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| position | string | 否 | 默认值 | tabBar的位置，仅支持 bottom / top |
| borderStyle | string | 否 | 默认值 | tabBar 上边框的颜色，仅支持 black / white |
| color | HexColor | 否 | 默认值 | tabBar上文字的默认（未选择）颜色 |
| selectedColor | HexColor | 否 | 默认值 | tabBar上的文字选中时的颜色 |
| backgroundColor | HexColor | 否 | 默认值 | tabBar的背景色 |
| list | array | 是 | tab页签的列表，最少2个，最多5个tab |
- 每个tab项（list中数组的每个元素）的配置选项
| 属性 | 类型 | 必填 | 描述 |
|---|---|---|---|
| pagePath | string | 是 | 页面路径，页面必须在pages中事先定义 |
| text | string | 是 | tab上显示的文字 |
| iconPath | string | 否 | 未选中时的图标路径；当position为top时 不显示icon |
| selectedIconPath | string | 否 | 选中时的图标路径；当position为top时 不显示icon |
7、 页面配置
1. 页面配置文件的作用
每个页面有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置。
2. 页面配置和全局配置的关系
小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现。
如果某些小程序页面想要拥有特殊的窗口表现，此时，页面级别的.json配置文件可以实现这种需求。
注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。
3. 页面配置中常用的配置项
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| navigationBarTitleText | String | 当前导航栏标题文字内容 | |
| navigationBarBackgroundColor | HexColor | #000000 | 当前页面导航栏背景颜色 |
| navigationBarTextStyle | String | white | 当前页面导航栏标题颜色，仅支持black/white |
| backgroundColor | HexColor | #ffffff | 当前窗口的背景色 |
| backgroundTextStyle | String | light | 当前页面下拉loading的颜色，仅支持dark/light |
| enablePullDownRefresh | Boolean | false | 是否为当前页面开启下拉刷新 |
| onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离，单位为px |
8、网络数据请求
1. 小程序中网络数据请求的限制
出于安全性方面的考虑，小程序官方对数据接口的请求做出了以下两个限制：
- 只能请求HTTPS类型的接口
- 必须将接口的域名添加到信任列表中
2. 配置request合法域名
需求描述：假设在自己的小程序>微信小程序中，希望请求 https://www.escook.cn/域名下的接口
配置步骤：登录小程序>微信小程序管理后台 -> 开发管理 -> 开发设置 -> 服务器域名 -> 修改request合法域名
注意事项：
- 域名只支持https协议
- 域名不能使用IP地址或localhost
- 域名必须经过ICP备案
- 服务器域名一个月内最多可申请5次修改
3. 发起GET / POST请求
调用小程序>微信小程序提供的wx.request()方法，发起GET数据请求。示例代码如下：
wx.request({
url: 'https://www.escook.cn/api/get', // 请求的接口地址，必须基于https协议
method: 'GET', // 请求的方式
data: { // 发送到服务器的数据
name: '小红'，
age: 18
},
success: (res)=>{ // 请求成功之后的回调函数
console.log(res);
}
})
4. 在页面刚加载时请求数据
在页面刚加载的时候，自动请求一些初始化的数据，需要在页面的onLoad事件中调用获取数据的函数。
