自学微信小程序第三天

一、页面导航

页面导航指小程序中页面之间的跳转，通过导航可以实现不同页面的切换，提升用户体验。小程序提供了两种导航方式：声明式导航和编程式导航。

1. 声明式导航

通过 navigator 组件实现导航，无需编写代码，直接在 WXML 中配置相关属性即可。

基本用法：<navigator url="/pages/detail/detail">跳转到详情页</navigator>，其中 url 为目标页面的路径，路径需以 / 开头。

跳转方式：

默认跳转：保留当前页面，跳转到应用内的某个页面，使用 navigateTo 方式，当点击导航时，目标页面会被加入页面栈，可通过返回按钮回到上一页面。

重定向跳转：关闭当前页面，跳转到应用内的某个页面，需设置 open-type="redirect"，此时当前页面会被销毁，页面栈中不会保留。

返回上一页：通过设置 open-type="navigateBack" 实现，可配合 delta 属性指定返回的层数，如 delta="1" 表示返回上一页，不设置 delta 时默认返回上一页。

跳转到 tabBar 页面：当目标页面是 tabBar 中配置的页面时，需设置 open-type="switchTab"，此时会关闭所有非 tabBar 页面，跳转到对应的 tabBar 页面。

传递参数：在 url 中通过查询字符串的形式传递参数，如 <navigator url="/pages/detail/detail?id=1&name=test">跳转到详情页</navigator>，在目标页面的 onLoad 生命周期函数中可通过 options 参数获取，即 onLoad(options) { console.log(options.id, options.name) }。

2. 编程式导航

通过调用微信提供的 API 实现导航，需要在页面的 .js 文件中编写代码。

wx.navigateTo：保留当前页面，跳转到应用内的某个页面，用法：wx.navigateTo({ url: '/pages/detail/detail' })，与声明式导航的默认跳转方式一致。

wx.redirectTo：关闭当前页面，跳转到应用内的某个页面，用法：wx.redirectTo({ url: '/pages/detail/detail' })，对应声明式导航的 open-type="redirect"。

wx.navigateBack：返回上一页面或多级页面，用法：wx.navigateBack({ delta: 1 })，delta 表示返回的层数，默认值为 1。

wx.switchTab：跳转到 tabBar 页面，关闭所有非 tabBar 页面，用法：wx.switchTab({ url: '/pages/index/index' })，对应声明式导航的 open-type="switchTab"。

传递参数：与声明式导航类似，在 url 中添加查询字符串，如 wx.navigateTo({ url: '/pages/detail/detail?id=1&name=test' })，在目标页面的 onLoad 中通过 options 获取。

3. 页面栈

小程序的页面栈是一个数组，用于管理当前打开的页面，最多可容纳 10 个页面。当页面栈已满时，再通过 navigateTo 跳转新页面会导致页面栈溢出，此时可使用 redirectTo 或关闭部分页面。通过 getCurrentPages() 方法可获取当前页面栈的实例，数组的最后一个元素为当前页面。

二、页面事件

页面事件是指在页面生命周期中或用户交互过程中触发的事件，开发者可以通过监听这些事件来执行相应的逻辑。

1. 下拉刷新事件

下拉刷新是指用户在页面顶部下拉时触发的事件，通常用于刷新页面数据。

开启下拉刷新：

在页面配置文件（.json）中设置 "enablePullDownRefresh": true。

在全局配置文件（app.json）的 window 中设置 "enablePullDownRefresh": true，可开启所有页面的下拉刷新。

监听下拉刷新事件：在页面的 .js 文件中定义 onPullDownRefresh 函数，当下拉刷新触发时会执行该函数，例如：onPullDownRefresh() { // 执行数据刷新逻辑 }。

停止下拉刷新：当数据刷新完成后，需调用 wx.stopPullDownRefresh() 方法停止下拉刷新动画，否则刷新动画会一直显示。

2. 上拉触底事件

上拉触底是指用户在页面底部上拉时触发的事件，通常用于实现分页加载数据。

设置上拉触底距离：在页面配置文件（.json）中通过 "onReachBottomDistance" 设置，单位为 px，默认值为 50，例如 "onReachBottomDistance": 100 表示距离页面底部 100px 时触发事件。

监听上拉触底事件：在页面的 .js 文件中定义 onReachBottom 函数，当上拉触底触发时会执行该函数，例如：onReachBottom() { // 执行加载下一页数据逻辑 }。

防止重复加载：在加载数据时，可设置一个加载状态变量（如 isLoading），当开始加载时将其设为 true，加载完成后设为 false，在 onReachBottom 函数中判断该变量，避免多次触发加载。

3. 页面滚动事件

页面滚动事件是指页面在滚动过程中触发的事件，可用于监听页面滚动的位置等信息。

监听页面滚动事件：在页面的 .js 文件中定义 onPageScroll 函数，函数接收一个参数 e，e.scrollTop 表示页面滚动的距离（单位为 px），例如：onPageScroll(e) { console.log("滚动距离：", e.scrollTop) }。

4. 分享事件

分享事件是指用户点击页面中的分享按钮时触发的事件，用于自定义分享内容。

监听分享事件：在页面的 .js 文件中定义 onShareAppMessage 函数，当用户点击右上角的分享按钮或通过设置 open-type="share" 的按钮触发分享时，会执行该函数，该函数需返回一个对象，用于配置分享的标题、路径、图片等，例如：onShareAppMessage() { return { title: "分享标题", path: "/pages/index/index", imageUrl: "/images/share.jpg" } }。

自定义分享按钮：在 WXML 中使用 <button open-type="share">分享</button> 可创建一个分享按钮，点击该按钮会触发分享事件。

三、生命周期

小程序的生命周期包括应用生命周期和页面生命周期，生命周期函数会在特定的阶段自动执行，开发者可以在这些函数中编写相应的逻辑。

1. 应用生命周期

应用生命周期是指小程序从启动到关闭的整个过程中触发的事件，在 app.js 文件中定义。

onLaunch：小程序初始化完成时触发，全局只触发一次，可用于初始化一些全局数据或执行一些启动时的操作，例如：onLaunch() { // 初始化全局数据 }。

onShow：小程序启动或从后台进入前台显示时触发，例如当用户打开小程序或从其他应用切换回小程序时会触发，可用于更新数据或执行一些显示相关的操作，例如：onShow() { // 更新页面数据 }。

onHide：小程序从前台进入后台时触发，例如当用户按手机的 Home 键将小程序切换到后台时会触发，可用于保存数据或执行一些清理操作，例如：onHide() { // 保存当前页面数据 }。

onError：小程序发生脚本错误或 API 调用失败时触发，可用于捕获错误并进行处理，例如：onError(err) { console.error("发生错误：", err) }。

2. 页面生命周期

页面生命周期是指页面从创建到销毁的整个过程中触发的事件，在页面的 .js 文件中定义。

onLoad：页面加载时触发，一个页面只会调用一次，可接收页面跳转时传递的参数（通过 options 参数），例如：onLoad(options) { console.log("页面加载，参数：", options) }，通常用于初始化页面数据。

onShow：页面显示时触发，每次打开页面都会调用，例如当从其他页面返回到当前页面时会触发，可用于刷新页面数据。

onReady：页面初次渲染完成时触发，一个页面只会调用一次，此时页面已经准备好，可以和视图层进行交互，例如：onReady() { // 执行一些需要页面渲染完成后才能进行的操作 }。

onHide：页面隐藏时触发，例如当跳转到其他页面时，当前页面会被隐藏，可用于保存页面状态。

onUnload：页面卸载时触发，例如当通过 redirectTo 或 navigateBack 关闭当前页面时会触发，可用于清理一些资源或取消一些订阅。

3. 生命周期执行顺序

应用生命周期和页面生命周期的执行顺序如下：

小程序启动时：onLaunch（应用）→ onShow（应用）→ onLoad（页面）→ onShow（页面）→ onReady（页面）。

页面跳转（从页面 A 到页面 B）：onHide（页面 A）→ onLoad（页面 B）→ onShow（页面 B）→ onReady（页面 B）。

页面返回（从页面 B 到页面 A）：onUnload（页面 B）→ onShow（页面 A）。

小程序进入后台：onHide（页面）→ onHide（应用）。

小程序从后台进入前台：onShow（应用）→ onShow（页面）。

四、WXS 脚本

WXS（WeiXin Script）是小程序的一套脚本语言，用于在 WXML 中处理数据，不能在 .js 文件中使用，其语法类似于 JavaScript，但有一些差异。

1. WXS 的作用

WXS 主要用于在 WXML 中对数据进行处理和过滤，例如格式化日期、处理字符串等，避免在 .js 文件中处理过多的数据转换逻辑，使代码结构更清晰。

2. WXS 的使用方式

在 WXML 中嵌入 WXS 代码：使用 <wxs></wxs> 标签包裹 WXS 代码，通过 module 属性指定模块名，以便在 WXML 中引用，例如： <wxs module="m1"> function formatDate(date) { // 日期格式化逻辑 return formattedDate; } module.exports = { formatDate: formatDate }; </wxs> 在 WXML 中可通过 {{ m1.formatDate(date) }} 调用该函数。

引用外部 WXS 文件：创建 .wxs 后缀的文件，在文件中编写 WXS 代码并导出，然后在 WXML 中通过 <wxs src="路径" module="模块名"></wxs> 引用，例如： 在 tools.wxs 文件中： function toUpperCase(str) { return str.toUpperCase(); } module.exports = { toUpperCase: toUpperCase }; 在 WXML 中： <wxs src="/utils/tools.wxs" module="tools"></wxs> <view>{{ tools.toUpperCase('hello') }}</view> // 输出 HELLO

3. WXS 与 JavaScript 的差异

变量声明：WXS 中只能使用 var 声明变量，不能使用 let 和 const。

函数定义：WXS 中函数定义只能使用 function 关键字，不能使用箭头函数。

数据类型：WXS 支持 number、string、boolean、object、array、function、date、regexp 等数据类型，但对部分类型的处理与 JavaScript 不同，例如 date 类型需要通过 getDate() 等方法获取日期信息。

作用域：WXS 有自己的作用域，与 .js 文件中的作用域相互独立，不能引用 .js 文件中定义的变量或函数，也不能调用小程序的 API。

运算符：WXS 支持大部分 JavaScript 运算符，但不支持 void 运算符和 typeof 运算符的部分用法。

4. WXS 的注意事项

WXS 模块是单例的，多次引用同一个 WXS 文件只会创建一个模块实例。

WXS 的运行环境与 JavaScript 不同，其性能比 JavaScript 在视图层的处理更快，因此对于频繁的数据处理，建议使用 WXS。

在 iOS 设备上，WXS 的执行速度比 JavaScript 快，在 Android 设备上两者速度相近。