页面导航
声明式导航
基本概念：
- 在页面上声明一个 导航组件
- 通过点击 组件实现页面跳转
具体演示：
- 无参写法
html
<navigator url="/pages/list/list" open-type="switchTab">导航到信息列表</navigator>-
含参写法
<navigator url="/pages/list/list?name=zs&age=28" open-type="switchTab">导航到信息列表</navigator>
后退导航：
html
<navigator open-type="navigateBack" delta="1">返回到上一页</navigator>编程式导航
基本概念：
- 调用小程序的导航 API，实现页面的跳转
具体演示：
- index.js（无参写法）
javascript
Page({
// 通过 wx.switchTab(...)，跳转到 tabBar 页面
// 如果想要跳转到非tabBar页面(即普通页面)，请使用 wx.navigateTo(...)
goto() {
wx.switchTab({
url: '/pages/list/list',
})
}
})-
index.js（含参写法）
Page({
// 通过 wx.switchTab(...)，跳转到 tabBar 页面
// 如果想要跳转到非tabBar页面(即普通页面)，请使用 wx.navigateTo(...)
goto() {
wx.switchTab({
url: '/pages/list/list?name=zs&age=28',
})
}
}) -
index.wxml
html
<button bindtap="goto">跳转</button>
后退导航：
- index.wxml
html
<button bindtap="gotoBack">后退</button>- index.js
javascript
Page({
// 后退到上一页
gotoBack() {
wx.navigateBack()
}
})
接收导航参数
无论是 声明式导航 还是 编程式导航，都是通过下面方式进行接收参数
- index.js
javascript
Page({
// 生命周期函数------监听页面加载
onLoad: function (options) {
console.log(options) // 输出传递过来的参数
}
})使用导航参数
Page({
// 页面的初始数据
data: {
query: {} // 导航传递过来的参数对象
}
// 生命周期函数------监听页面加载
onLoad: function (options) {
console.log(options) // 输出传递过来的参数
this.setData({
query: options
})
}
})
页面事件
下拉刷新事件
启用事件
-
方式一：全局开启下拉刷新
在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true
-
方式二：局部开启下拉刷新（推荐使用）
在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true
配置样式
backgroundColor用来配置下拉刷新窗口的背景颜色，仅支持16进制的颜色值backgroundTextStyle用来配置下拉刷新 loading 的样式，仅支持 dark 和 light
监听事件
javascript
Page({
// 页面相关事件处理函数------监听用户下拉动作
onPullDownRefresh: function () {
console.log('触发了index页面的下拉刷新')
}
})停止效果
当处理完下拉刷新后，下拉刷新的 loading 效果会一直显示，不会主动消失，所以需要手动隐藏 loading 效果
Page({
// 页面相关事件处理函数------监听用户下拉动作
onPullDownRefresh: function () {
console.log('触发了index页面的下拉刷新')
}
// 当完成需求后，调用此函数，关闭下拉刷新的效果
wx.stopPullDownRefresh()
})
上拉触底事件
概念：手指在屏幕上拉滑动，加载更多数据
监听事件
javascript
Page({
// 页面上拉触底事件的处理函数
onReachBottom: function () {
console.log('触发了上拉触底事件')
}
})触底距离
概念：上拉触底距离，指的是触发"上拉触底事件"时，滚动条距离页面底部的距离
- 小程序默认触底距离是 50px
- 可以在 .json 配置文件中，通过 onReachBottomDistance 属性来配置上拉触底的距离
全局的 app.json 或者 index.json 配置如下内容：
json
{
"onReachBottomDistance": 150
}生命周期
生命周期函数
概念：生命周期函数是由小程序框架提供的内置函数，会伴随生命周期，自动按次序执行
作用：允许程序员在特定的时间点，执行某些特定的操作（例如：页面刚加载时，可以在onLoad生命周期函数中初始化页面的数据）
分类：分为小程序层面的 应用的生命周期函数 和 页面层面的 页面的生命周期函数
应用的生命周期函数
- app.js
javascript
App({
// 小程序初始化完成时，执行此函数，全局只触发一次，可以做一些初始化的工作
onLaunch: function(options) {...},
// 小程序启动，或者从手机后台进入前台显示时候触发
onShow: function(options) {...},
// 小程序从前台进入手机后台时候触发
onHide: function() {...}
})页面的生命周期函数
-
index.js
Page({
onLoad : function(options) {...}, // 监听页面加载，一个页面只调用1次
onShow : function() {...}, // 监听页面显示
onReady : function() {...}, // 监听页面初次渲染完成，一个页面只调用1次
onHide : function() {...}, // 监听页面隐藏
onUnload : function() {...} // 监听页面卸载，一个页面只调用1次
})
wxs 脚本
认识 wxs
概念：WXS（WeiXin Script）是小程序独有的一套脚本语言，结合 WXML，可以构建出页面的结构
wxs 和 JavaScript 的关系：
-
wxs 有自己的数据类型
number、string、boolean、object(对象类型)、function、array、date、regexp(正则)
-
wxs 不支持类似于 ES6 及以上的语法形式
不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写...
支持：var定义变量、普通 function 函数等类似于 ES5 的语法 -
wxs 遵循 CommonJS 规范
module 对象
require() 函数
module.exports 对象
应用场景：
- wxs 典型的应用常见就是充当"过滤器"，经常配合 Mustache 模板语法进行使用，例如：
html
<view>{{ m1.toUpper(username) }}</view>- 但是，在 wxs 中定义的函数不能作为组件的事件回调函数，例如下面的用法是错误的：
html
<button bindtap="m2.toLower">按钮</button>隔离性：
隔离性指的是 wxs 的运行环境和其他 JavaScript 代码是隔离的：
- wxs 不能调用 js 中定义的函数
- wxs 不能调用小程序提供的 API
运行速度：
在 iOS 设备上，小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍
在 Android 设备上，二者的运行效率无差异
内嵌的 wxs 脚本
- index.js
javascript
Page({
// 页面的初始数据
data: {
username: 'zs'
}
})- index.wxml
html
<view>{{ m1.toUpper(username) }}</view>
<wxs module="m1">
// 将文本转换为大写形式：zs => ZS
module.exports.toUpper = function(str) {
return str.toUpperCase()
}
</wxs>外联的 wxs 脚本
javascript
// index.wxs 文件
function toLower(str) {
return str.toLowerCase()
}
module.exports = {
toLower: toLower
}使用外联的 wxs 脚本
- index.wxml
html
<!-- 调用 m2 模块中的方法 -->
<view>{{ m2.toLower(country) }}</view>
<!-- 引用外联的 tool.wxs 脚本，并命名为 m2 -->
<wxs src="../../utils/tool.wxs" module="m2"></wxs>