发布时间：2025-12-10 11:46:55 浏览次数：4
| 页面导航 | 声明式导航、编程式导航、导航传参 | 3星 | 掌握 |
| 页面事件 | 下拉刷新、上拉触底、上拉触底案例、自定义编译模式 | 3星 | 掌握 |
| 生命周期 | 生命周期分类、应用生命周期、页面生命周期 | 3星 | 掌握 |
| wxs学习 | 认识wxs及应用场景、掌握基础语法、掌握使用方式、注意要点 | 4星 | 了解 |
| 本地生活案例（列表） | 导航跳转列表并传参、获取数据，渲染数据、滚动分页、下拉刷新、wxs处理手机号 | 4星 | 掌握 |
思考
❓ Vue 中实现导航跳转的方式有几种，分别是什么？
Vue.use(VueRouter)做了什么事情
Vue 中实现导航跳转的方式有 2 种
页面导航指的是页面之间的相互跳转，例如，在浏览器中实现页面导航的方式有如下两种：
a 标签location.href在页面上声明一个 <navigator> 导航组件通过点击 <navigator> 组件实现页面跳转，具体参见文档 【组件=>导航=>navigator】
调用小程序的导航 API，实现页面的跳转,具体参见文档 【api=>路由】
tabBar页面/非tabBar页面
tabBar 页面指的是被配置为 tabBar 的页面 在使用 <navigator> 组件跳转到指定的 tabBar 页面时，需要指定 url 属性和 open-type属性，例如：
<navigator url="/pages/home/home" open-type="switchTab">跳转到tabBar页面</navigator>非 tabBar 页面 指的是没有被配置为 tabBar 的页面 在使用<navigator> 组件跳转到普通的非tabBar 页面时，需要指定 url 属性和 open-type属性，例如：
<navigator url="/pages/event/event" open-type="navigate">跳转到 非tabBar页面</navigator>如果要后退到上一页面或多级页面，则需要指定 open-type 属性和 delta 属性，例如：
<navigator open-type="navigateBack">后退导航</navigator>调用wx.switchTab({...})方法，可以跳转到 tabBar 页面，其中 Object 参数对象的属性列表如下：
| url | string | 是 | 需要跳转的 tabBar 页面的路径 ，路径后不能带参数。 |
| success | function | 否 | tab跳转成功的回调函数 |
| fail | function | 否 | tab跳转失败的回调函数 |
| complete | function | 否 | tab跳转结束的回调函数（调用成功、失败都会执行） |
编程式导航到 tabBar 页面示例如下：
<!--页面wxml文件中--><button bindtap="tabFn">跳转到tabBar页面</button> // 页面js文件中tabFn(){wx.switchTab({url: "/pages/home/home"})}调用wx.navigateTo({...})方法，可以跳转到非 tabBar 的页面。其中 Object 参数对象的属性列表如下
| url | string | 是 | 需要跳转的应用内非tabBar 的页面的路径, 路径后可以带参数 |
| success | function | 否 | 接口调用成功的回调函数 |
| fail | function | 否 | 接口调用失败的回调函数 |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
编程式导航到非 tabBar 页面示例如下：
<!--页面wxml文件中--><button bindtap="tabFun">跳转到非 tabBar页面</button> // 页面js文件中tabFun(){wx.navigateTo({url:"/pages/event/event"})}调用wx.navigateBack({ ... }) 方法，可以返回上一页面或多级页面。其中 Object 参数对象可选的属性列 表如下：
| delta | number | 1 | 否 | 返回的页面数，如果delta 大于现有页面数，则返回到首页。 |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
编程式导航实现后退导航示例如下：
<!--页面wxml文件中--><button bindtap="backFn">跳转到非 tabBar页面</button> // 页面js文件中backFn(){wx.navigateBack({delta: 1})}总结：
编程式导航跳转
navigator 组件的url 属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数，示例如下：
<navigator url="/pages/event/event?id=10&tom=1" >跳转到非 tabBar页面</navigator>调用 wx.navigateTo({ ... })方法跳转页面时，也可以携带参数，代码示例如下：
<!--页面wxml文件中--><button bindtap="tabFun">跳转到非 tabBar页面</button> // 页面js文件中tabFun(){wx.navigateTo({url:"/pages/event/event?id=10&tom=1"})}【总结】小程序里面页面传参依靠的是URL上面的查询参数，但是不能给tabBar页面传递
通过 声明式导航传参 或 编程式导航传参 所写携带的参数，可以直接在 onLoad 事件中直接获取到，示例代码如下
// 页面的js文件中/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log(options) // options 就是页面传递过来的参数}总结概况
❓ 小程序中实现导航跳转的方式有几种，分别是什么？
总结概况
❓ 小程序中如何实现导航传参以及如何获取参数？
思考
❓ 什么是下拉刷新
下拉刷新 是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而 重新加载页面数据 的行为
启动下拉刷新的三种方式，分别是：
全局开启下拉刷新
在app.json的 window节点中，将 enablePullDownRefresh设置为 true
局部开启下拉刷新
在页面的.json 配置文件中，将 enablePullDownRefresh设置为true
使用小程序提供的 API 实现下拉刷新
wx.startPullDownRefresh() // 主动触发下拉刷新，就像手指下拉一样的效果注意： pc模拟器里面是无效的，手机真机是可以实现该效果
在全局或页面的.json 配置文件中，通过backgroundColor和backgroundTextStyle 来配置下拉刷新窗口的样 式，其中
在页面的 .js文件中，通过 onPullDownRefresh()函数即可监听当前页面的下拉刷新事件
Page({/*** 页面的初始数据*/data: {count:1},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {// 用户下拉后，将count的值设置为0this.setData({count:0})},})当处理完下拉刷新后，下拉刷新的loading 效果会一直显示，不会主动消失， 所以需要手动隐藏loading效果， 此时，调用 wx.stopPullDownRefresh()可以停止当前页面的上拉刷新
/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {// 用户下拉后，将count的值设置为0this.setData({count:0})// 关闭下拉刷新wx.stopPullDownRefresh()}思考
❓ 什么是上拉触底
上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为
在页面的.js 文件中，通过onReachBottom 函数即可监听当前页面上的上拉触底事件
/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {console.log('上拉触底喽')},总结概况
❓ 小程序中如何监听下拉刷新以及上拉触底加载
在页面的.js文件中使用 onPullDownRefresh()函数 和onReachBottom()函数
请求数据的过程当中需要展示loading效果，数据获取到以后，loading消失
实现步骤
获取自定义颜色的方法
getColors() {this.setData({isloding: true})// 需要展示 loading 效果wx.showLoading({title: '数据加载中...',})wx.request({url: 'https://www.escook.cn/api/color',method: 'get',success: ({ data: res }) => {this.setData({colorList: [...this.data.colorList, ...res.data]})},complete: () => {wx.hideLoading()this.setData({isloding: false})}})},定义模板内容
<view><view class="item" wx:for="{{ colorList }}" style="background-color: rgb({{ item }});"> {{ item }} </view></view>样式
/* pages/color/color.wxss */.item {/* width: 100%; */height: 350rpx;color: white;line-height: 350rpx;text-align: center;border-radius: 20rpx;margin: 20rpx;}
思考
❓ 现实生活中什么是生命周期？
生命周期 (Life Cycle) 是指一个对象从 创建 -> 运行 -> 销毁 的整个阶段，强调的是一个时间段，例如：
小程序中的生命周期函数分为两类，分别是：
应用的生命周期app.js 是小程序执行的入口文件，在 app.js 中必须调用 App() 函数，且只能调用一次。其中，App() 函数是用 来注册并执行小程序的App(Object) 函数接收一个 Object 参数，可以通过这个Object 参数，指定小程序的应用生命周期函数
App({/*** 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）*/onLaunch: function () {},/*** 当小程序启动，或从后台进入前台显示，会触发 onShow*/onShow: function (options) { },/*** 当小程序从前台进入后台，会触发 onHide*/onHide: function () {},/*** 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息*/onError: function (msg) {}})总结概况
❓ 小程序生命周期包含几类，分别是什么 ？
CommonJS 是 javascript 的模块化规范之一，小程序的脚本语言 wxs 遵循了 CommonJS 规范，因此，使用 wxs 时的体验和使用 node.js 的体验比较相似。
使用的规则
案例代码
没有兼容性
wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行
与 javascript 不同
隔离性
不能作为事件回调
wxs 函数不能作为组件的事件回调
性能好
iOS设备上比 javascript 运行快
由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。
在 android 设备上二者运行效率无差异
打开微信开发者工具 --> 点击 项目 --> 导入项目 --> 选择项目目录 --> 如有必要，需要替换 AppID
创建页面路径
pages/shoplist/shoplist将九宫格的容器组件 view 改成 导航组件 navigator 组件，并绑定跳转的 Id
<view class="grid-list"><navigator url="/pages/shoplist/shoplist?id={{ item.id }}&title={{ item.name }}" class="grid-item" wx:for="{{ gridList }}" wx:key="id"><image src="{{ item.icon }}"></image><text>{{ item.name }}</text></navigator></view>在 onReady() 生命周期函数中对标题栏进行赋值
/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {wx.setNavigationBarTitle({title: 'test'})}在 onLoad() 生命周期函数中获取到商品列表传递的参数
/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log(options)}将 options 中的数据赋值给 data 中的数据
data: {query: {}} /*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.setData({query: options})}在 onReady() 生命周期函数中对标题栏进行赋值
/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {wx.setNavigationBarTitle({title: this.data.query.title})}以分页的形式，加载指定分类下商铺列表的数据：
接口地址
请求方式
请求参数
案例代码
data: {query: {},shoplist: [], // 商铺列表数组page: 1, // 页码pagesize: 10, // 每页请求的数量total: 0 // 总条数}定义获取商品数据的方法，并将数据赋值给 data 中的 shoplist 以及 total
getShopList() {wx.request({url: `https://www.escook.cn/categories/${this.data.query.id}/shops`,method: 'GET',data: {_page: this.data.page,_limit: this.data.pagesize},success: (res) => {this.setData({shoplist: [...this.data.shoplist, ...res.data],total: res.header['X-Total-Count'] - 0})}})}在 onLoad 钩子函数中，调用 getShopList 方法
/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.setData({query: options})this.getShopList()}在网络请求发起之前调用 wx.showLoading 方法，显示 loading 效果
wx.showLoading({title: '数据加载中...',})在网络请求返回以后，隐藏 loading 显示
complete: () => {wx.hideLoading()}完整代码
getShopList() {wx.showLoading({title: '数据加载中...',})wx.request({url: `https://www.escook.cn/categories/${this.data.query.id}/shops`,method: 'GET',data: {_page: this.data.page,_limit: this.data.pagesize},success: (res) => {this.setData({shoplist: [...this.data.shoplist, ...res.data],total: res.header['X-Total-Count'] - 0})},complete: () => {wx.hideLoading()}})}配置页面触底的距离
{"usingComponents": {},"onReachBottomDistance": 100}在 onReachBottom 事件处理程序中处理逻辑
/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {this.setData({page: this.data.page + 1})this.getShopList()}对上拉触底进行节流处理
在 data 中定义 isLoading 节流阀
在 getShopList 方法中修改 isLoading 节流阀的值
在 onReachBottom 中判断节流阀的值，从而对数据请求进行节流控制
代码实现
/*** 页面的初始数据*/data: {isLoading: false // 控制是否显示 loading} getShopList() {this.setData({isLoading: true})// coding……wx.request({url: `https://www.escook.cn/categories/${this.data.query.id}/shops`,// coding……complete: () => {wx.hideLoading()this.setData({isLoading: false})}})} /*** 页面上拉触底事件的处理函数*/onReachBottom: function () {if (this.data.isLoading) returnthis.setData({page: this.data.page + 1})this.getShopList()}如果下面的公式成立，则证明没有下一页数据了：
页码值 * 每页显示多少条数据 >= 总数据条数
方式二:
在 onReachBottom 钩子函数中判断数据是否加载完毕
开启下拉刷新效果
{"usingComponents": {},"onReachBottomDistance": 100,"enablePullDownRefresh": true,"backgroundColor": "#efefef","backgroundTextStyle": "dark"}在 onPullDownRefresh 逻辑函数中监听用户下拉动作
在 utils 目录下创建 tools.wxs 文件，并创建 splitPhone 方法
function splitPhone(str) {if (str.length !== 11) return strvar arr = str.split('')arr.splice(3, 0, '-')arr.splice(8, 0, '-')return arr.join('')}module.exports = {splitPhone: splitPhone}在 shoplist.wxml 文件中导入 tools.wxs 文件
<wxs src="../../utils/tools.wxs" module="tools"></wxs>使用封装的 splitPhone 方法
<text>电话： {{tools.splitPhone(item.phone)}}</text>
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流