1. 页面导航
1. 什么是页面导航
页面导航指的是页面之间的相互跳转。例如，浏览器中实现页面导航的方式有如下两种：a 链接
location.href a链接导航称之为声明式导航, location.href 赋值的方式称之为编程式导航
2. 小程序中实现页面导航的两种方式
① 声明式导航
在页面上声明一个 导航组件
通过点击 组件实现页面跳转
② 编程式导航
调用小程序的导航 API ，实现页面的跳转
1.1. 声明式导航
- 导航到 tabBar 页面
tabBar 页面指的是被配置为 tabBar 的页面。
在使用 组件跳转到指定的 tabBar 页面时，需要指定 url 属性和 open-type 属性，其中：
- url 表示要跳转的页面的地址，必须以 / 开头
- open-type 表示跳转的方式，必须为 switchTab
示例代码如下：
<!-- 声明式导航 --> <!--导航到 tabBar页面的方法： url必须以“/”根路径开头 并且必须配置open-type属性值为switchTab -->
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面 </navigator>
1.2. 导航到非 tabBar 页面
非 tabBar 页面指的是没有被配置为 tabBar 的页面。
在使用 组件跳转到普通的非 tabBar 页面时，则需要指定 url 属性和 open-type 属性，其中：
- url 表示要跳转的页面的地址，必须以 / 开头
- open-type 表示跳转的方式，必须为 navigate
- 为了方便, 非 tabBar 页码的跳转时 open-type 也可以省略
1.3. 后退导航
如果要后退到上一页面或多级页面，则需要指定 open-type 属性和 delta 属性，其中：
- open-type 的值必须是 navigateBack ，表示要进行后退导航
- delta 的值必须是数字，表示要后退的层级
示例代码如下：
注意：
为了简便，如果只是后退到上一页面，则可以省略 delta 属性，因为其默认值就是 1 - tabBar 页面是不能实现后退的效果的. 因为, 当我们跳转到 tabBar 页面，会关闭其他所有非
- tabBar 页面,所以当处于 tabBar 页面时, 无页面可退
1.2. 编程式导航
- 导航到 tabBar 页面
<!--编程式导航 跳转至tabBar页面 -->
<button bindtap="gotoMessage">跳转到messae页面</button> /*通过编程式导航 跳转至tabBar页面 message页面 */
gotoMessage () { wx.switchTab({ // 代表要跳转的路径 url: '/pages/message/message', }) },
<!-- 编程式导航 跳转至非 tabBar页面 -->
<button bindtap="gotoInfo">跳转到Info页面</button> /*通过编程式导航 跳转至非tabBar页面 Info页面 */
gotoInfo () { wx.navigateTo({ url: '/pages/info/info', }) },
1.3. 导航传参
1. 声明式导航传参
navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：
- 参数与路径之间使用 ? 分隔
- 参数键与参数值用 = 相连
- 不同参数用 & 分隔
- 代码示例如下：
<!--声明式导航传参 参数与路径之间使用 ? 分隔 参数键与参数值用 = 相连 不同参数用 & 分隔 -->
<navigator url="/pages/info/info?name=zs&age=20">跳转至info页面</navigator>
- 编程式导航传参
调用 wx.navigateTo(Object object) 方法跳转页面时，也可以携带参数，代码示例如下：
<!--编程式导航传参 -->
<button bindtap="gotoInfo2">跳转到info页面</button> /*编程式导航传递参数 */
gotoInfo2 () { wx.navigateTo({ url: '/pages/info/info?name=李&gender=男', }) },
- 在 onLoad 中接收导航参数
通过声明式导航传参或编程式导航传参所携带的参数，可以直接在 onLoad 事件中直接获取到，示例代
码如下：
data: { // 导航传递的参数
query: {} }, /*** 生命周期函数--监听页面加载 */
onLoad: function (options) {
// 通过声明式导航和编程式导航 都可以
// 在onLoad声明周期函数中获取传递的参数
console.log(options);
// 将导航传递的参数转存在data中
this.setData({ query: options }) },
2. 页面事件
2.1. 下拉刷新事件
- 启用下拉刷新
启用下拉刷新有两种方式：
① 全局开启下拉刷新
在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true
② 局部开启下拉刷新
在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true
在实际开发中，推荐使用第 2 种方式，为需要的页面单独开启下拉刷新的效果。 - 配置下拉刷新窗口的样式
在全局或页面的 .json 配置文件中，通过 backgroundColor 和 backgroundTextStyle 来配置下拉
刷新窗口
的样式，其中：
backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16 进制的颜色值
backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light - 监听页面的下拉刷新事件
在页面的 .js 文件中，通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。
例如，在页面的 wxml 中有如下的 UI 结构，点击按钮可以让 count 值自增 +1： - 停止下拉刷新的效果
当处理完下拉刷新后，下拉刷新的 loading 效果会一直显示，不会主动消失，所以需要手动隐藏下拉
刷新的
loading 效果。此时，调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。示例代码如
下：
/*** 页面相关事件处理函数--监听用户下拉动作 */
onPullDownRefresh: function () {
wx.request({ url: '',
method: 'GET',
success: (res) => {
this.setData({ XXX: res.data
// 数值处理完毕，就可以关闭下拉刷新的事件了
wx.stopPullDownRefresh() }) } }) },
数组合并的三种方法
节流阀控制多个无效请求的发送
对上拉触底进行节流处理
① 在 data 中定义 isLoading 节流阀
- false 表示当前没有进行任何数据请求
- true 表示当前正在进行数据请求
data: { // 随机颜色数组
colorList: [], // 节流阀: false代表当前没有进行任何数据请求
isLoading: false },
② 在 getColors() 方法中修改 isloading 节流阀的值
- 在刚调用 getColors 时将节流阀设置 true
- 在网络请求的 complete 回调函数中，将节流阀重置为 fal
// 获取随机颜色的方法
getColors () { // 1.展示loading效果
wx.showLoading({ title: '数据加载中...', })// 2.开启节流阀
this.setData({ isLoading: true })// 3.发起网络请求
wx.request({ url: 'https://www.escook.cn/api/color', method: 'GET', success: ({data: res}) => { // 修改data中的数据
this.setData({ // 使用展开运算符获取到每一个数据，再将数据进行拼接
colorList: [...this.data.colorList, ...res.data]
}) },// 无论成功与否都会调用该方法
complete: () => { // 4.隐藏loading效果
wx.hideLoading() // 5.关闭节流阀
this.setData({ isLoading: false }) } }) },
③ 在 onReachBottom 中判断节流阀的值，从而对数据请求进行节流控制
- 如果节流阀的值为 true ，则阻止当前请求
- 如果节流阀的值为 false ，则发起数据请求
/*** 页面上拉触底事件的处理函数 */
onReachBottom: function () {
if (this.data.isLoading)
return this.getColors() },
3. 生命周期
3.2. 生命周期的分类
在小程序中，生命周期分为两类，分别是：
① 应用生命周期
- 特指小程序从启动 -> 运行 -> 销毁的过程
② 页面生命周期 - 特指小程序中，每个页面的加载 -> 渲染 -> 销毁的过程
3.3. 什么是生命周期函数
- 生命周期函数
由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。 - 生命周期函数的作用
允许程序员在特定的时间点，执行某些特定的操作 - 例如，页面刚加载的时候，可以在 onLoad 生命周期函数中初始化页面的数据。
注意：生命周期强调的是时间段，生命周期函数强调的是时间点。
3.4. 生命周期函数的分类
小程序中的生命周期函数分为两类，分别是：
① 应用的生命周期函数
特指小程序从启动 -> 运行 -> 销毁期间依次调用的那些函数
② 页面的生命周期函数
特指小程序中，每个页面从加载 -> 渲染 -> 销毁期间依次调用的那些函数
3.5. 应用的生命周期函数
onLaunch: function () { console.log("onLaunch") }, // 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow: function (options) { console.log("onShow") },/*** 当小程序从前台进入后台，会触发 onHide */
onHide: function () { console.log("onHide") }, // 当小程序从前台进入后台，会触发 onHide
3.6. 页面的生命周期函数
/*** 生命周期函数--监听页面加载,一个页面只调用一次 */
onLoad: function (options) { },/*** 生命周期函数--监听页面初次渲染完成，一个页面只调用一次 */
onReady: function () { },/*** 生命周期函数--监听页面显示 */
onShow: function () { },/*** 生命周期函数--监听页面隐藏 */
onHide: function () { },/*** 生命周期函数--监听页面卸载，一个页面只调用一次 */
onUnload: function () { },
4. WXS 脚本
4.3. wxs 和 JavaScript 的关系
虽然 wxs 的语法类似于 JavaScript ，但是 wxs 和 JavaScript 是完全不同的两种语言：
① wxs 有自己的数据类型
- number 数值类型、 string 字符串类型、 boolean 布尔类型、 object 对象类型、
- function 函数类型、 array 数组类型、 date 日期类型、 regexp 正则
② wxs 不支持类似于 ES6 及以上的语法形式 - 不支持： let 、 const 、解构赋值、展开运算符、箭头函数、对象属性简写、etc…
- 支持： var 定义变量、普通 function 函数等类似于 ES5 的语法
③ wxs 遵循 CommonJS 规范 - module 对象
- require() 函数
- module.exports 对象
<!-- 定义一个文本，调用wxs中的方法 -->
<view>{{ m1.toUpper(username) }}</view> <!-- 定义一个wxs的标签，并指定module模块名称 -->
<wxs module="m1"> <!-- 向外暴露一个方法 -->
module.exports.toUpper = function(str)
{ return str.toUpperCase() } </wxs>
// 1.定义方法
function toLower(str)
{ return str.toLowerCase() }
// 2.暴露成员
module.exports = { toLower: toLower }
<!-- 1.使用外联式引入外部的wxs文件 -->
<wxs module="m2" src="../../utils/tools.wxs"></wxs>
<!-- 2.调用 m2 模块的方法 -->
<view>{{ m2.toLower(country) }}</view>
5. 案例 - 本地生活（列表页面）
