页面导航

页面导航是页面之间相互跳转，浏览器实现有两种方式

  1. <a>链接
  2. location.href

小程序中实现有两种方式

  1. 声明式导航
  2. 编程式导航

声明式导航

导航到tabBar页面

tabBar页面是被配置为tabBar页面。

在使用<navigator>组件跳转到指定的tabBar页面时，需指定url和open-type属性

  • url表示跳转页面的地址，必须/开头
  • open-type表示跳转的方式，必须为switchTab
1
<navigator url="/pages/message/message open-type="switchTab">跳转到消息页面</navigator>

导航到非tabBar页面

非tabBar页面是没有被配置为tabBar的页面

与tabBar相比，只有open-type不同，必须为navigate,open-type="navigate"属性可省略

1
<navigator url="/pages/info/info open-type="navigate">跳转到info页面</navigator>

后退导航

指定open-type属性和delta属性

  • open-type值必须为navigateBack，表后退导航
  • delta值必须为数字，表后退层级
  • 如后退上一个页面，可省略delta属性
1
<navigator open-type="navigateBack" delta="1">后退 </navigator>

编程式导航

导航到tabBar页面

调用wx.switchTab(Object object)方法，可跳转到tabBar页面，object参数对象列表如下

属性 类型 必填 说明
url string 是 需要跳转的tabBar路径，路径后不带参数
success function 否 接口调用成功的回调函数
fall function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数，调用成功失败都执行 
1
2
3
4
5
6
7
8
9
// 页面结构
<button bindtap="gotoMessage">跳转到消息页面</button>

// 通过编程式导航跳转到message
gotoMessage() {
wx.switchTab({
url: '/pages/message/message'
})
}

导航到非tabBar页面

调用wx.navigateTo(ojecat object)方法，object参数对象的属性列表和tabBar一样

后退导航

调用wx.navigateBack(object object)方法，object参数对象属性列表如下

属性 类型 默认值 必填 说明
delta number 1 否 返回的页面数，如大于现有页面数则返回首页
success funtion 否
fall function 否
complete function 否

导航传参

声明式导航传参

路径后带参数

  1. 参数与参数用?分割
  2. 参数键与参数值用=相连
  3. 不同参数用&分隔
1
<navigator url="/pages/info/info?name=zs&age=20" open-type="navigate">跳转到info页面</navigator>

编程式导航类似

在onload中接收导航参数

通过声明式导航和编程式导航所携带的参数，可以直接在onLoad事件中直接获取到

1
2
3
4
5
// 生命周期函数 监听页面函数
onLoad: function(options) {
    // options就是导航传递来的参数对象
    console.log(options)
}

页面事件

下拉刷新

启动下拉刷新

  1. 全局开启下拉刷新：在app.json的window节点中，将enablePullDownRefresh设置为true
  2. 局部开启下拉刷新：在页面的js 文件中，将enablePullDownRefresh设置为true
  3. 实际开发推荐第二种

配置下拉刷新窗口样式

在全局或页面json 文件中，通过backgroundColor和backgroundTextStyle配置

  1. backgroundColor配置窗口颜色，仅支持十六进制
  2. backgroundTextStyle配置loading样式，仅支持dark和light

监听页面下拉刷新事件

在页面js文件中，通过onPullDownRefresh()函数即可监听当前页面的下拉刷新事件

停止下拉刷新效果

当处理完下拉刷新后，下拉刷新的loading效果会一致显示，不会主动消失，需手动隐藏loading效果，需要调用wx.stopPullDownRefresh()可停止当前页面刷新

上拉触底

监听页面上拉触底事件

在页面js文件中，通过onReachBottom函数即可监听当前页面上拉触底事件

1
2
3
4
//页面上拉触底事件处理函数
onReachBottom: function() {
    console.log("出发了上拉触底")
}

配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离

在全局或页面json文件中，通过onReachBottomDistance属性配置上拉触底距离，默认50px

生命周期

生命周期（Life Cycle）是指一个对象从创建，运行，销毁的整个阶段，强调的是一个时间段，我们可以把每个小程序的运行过程概括为生命周期

生命周期的分类

  1. 应用生命周期：小程序从启动，运行，销毁的过程
  2. 页面生命周期：每个页面加载，渲染，销毁的过程
  3. 页面生命周期范围较小，应用程序生命周期范围较大

生命周期函数

生命周期函数是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行

  • 作用：允许程序员在特定时间点，执行某些特定操作
  • 生命周期强调的是时间段，生命周期函数强调的是时间点

小程序生命周期函数分为两类：

  1. 应用生命周期函数
  2. 页面生命周期函数

应用的生命周期函数

小程序的应用生命周期函数需要在app.js中进行声明

1
2
3
4
5
6
7
8
9
// app.js文件
App({
    // 小程序初始化完成时，执行此函数，全局只触发一次，可以做一些初始化工作
    onLaunch: function(options) { },
    // 小程序启动，或从后台进入前台显示时触发
    onShow: function(options) { },
    // 小程序从前台进入后台时触发
    onHide: function() { }
})

页面的生命周期函数

小程序的页面生命周期函数需要在.js文件进行声明

1
2
3
4
5
6
7
8
// 页面 的 .js文件
Page({
    onLoad: function(options) {},  // 监听页面加载，一个页面只调用一次
    onShow: function() {},  //监听页面显示
    onReady: function() {},  //监听页面初次渲染完成，一个页面只调用一次
    onHide: function() {},  //监听页面隐藏
    onUnload: function() {}  //监听页面卸载，一个页面只调用一次
})

WXS脚本

概述

WXS （Weixin Script）是小程序独有的一套脚本语言，结合WXML可以构建页面结构。

WXML中无法调用页面的.js文件中定义的函数，但是，WXML中可以调用WXS中定义的函数，因此，小程序中的wxs的典型应用场景是”过滤器“

wxs与JavaScript的关系

  1. wxs有自己的数据类型
  2. wxs不支持ES6以上的语法
  3. wxs村寻CommonJS规范

基本语法

内嵌wxs脚本

wxs代码可以编写在wxml文件中的<wxs>标签内，wxml文件中的每一个<wxs></wxs>标签，必须提供module属性，用来指定当前wxs的模块名称，方便在wxml中访问模块中的成员

1
2
3
4
5
6
7
8
<view>{{m1.toUpper(username)}}</view>

<wxs module="m1">
// 将文本转为大写形式
module.exports.toUpper = function(str) {
	return str.toUpperCase()
}
</wxs>

外联wxs脚本

wxs代码还可以编写在以.wxs为后缀名的文件内。

在wxml中引入外联的wxs脚本时，必须为<wxs>标签添加module和src属性

  • module用来指定模块名称
  • src用来指定要引入的脚本路经，必须相对路径
1
2
3
4
5
// 调用m2 模块中的方法
<view>{{m2.toLower(country)}}</view>

// 引用外联的 tools.wxs 脚本，并命名为m2
<wxs src="../../utils/tools.wxs" module="m2"></wxs>

特点：

  1. 不能作为组件的事件回调
  2. 性能好
  3. 隔离性