[移动开发]微信小程序5 - （页面导航，生命周期，WXS脚本）

页面导航

页面导航指的是页面之间的相互跳转

小程序实现页面导航的方式有两种

声明式导航

• 在页面上声明一个<navigator>导航组件
• 通过点击<navigator>组件实现页面跳转

编程式导航

调用小程序的导航API，实现页面的跳转

导航到tabBar页面

1. 声明式导航
   在使用<navigator> 组件跳转到指定的tabBar页面时，需要指定url属性和open-type属性，其中：

• url表示要跳转的页面的地址，必须以/开头
• open-type表示跳转的方式，必须为switchTab

<navigator url="/pages/shangcheng/shangcheng" open-type="switchTab" >跳转到商城界面</navigator>

2. 编程式导航
   调用wx.switchTab(Object object)方法，可以跳转到tabBar页面。其中Object参数对象的属性列表如下：
   |属性|类型 |是否必选|说明|
   |–|–|–|–|
   |url | string | 是|需要跳转的tabBar页面的路径，路径后不能带参数|
   |success|function|否|接口调用成功的回调函数|
   |fail|function|否|接口调用失败的回调函数|
   |complete|function|否|接口调用结束的回调函数（调用成功、失败都会执行|

.wxml

<button bindtap="gotoShopping">跳转到商城2</button>

.js

//跳转到商城
  gotoShopping(){
    wx.switchTab({
      url: '/pages/shangcheng/shangcheng',
    })
  }

导航到非tabBar页面

1. 声明式导航
   非tabBar页面是指没有被配置成tabBar的页面

• url必须以/开头
• open-type必须为navigate(导航到非tabBar页面可以不设置open-type)

<navigator url="/pages/info/info" open-type="navigate">跳转到info界面（非tabBar）</navigator>

2. 编程式导航
   调用wx.navigateTo(Object object)方法，可以跳转到非tabBar的页面。其中Object参数对象的属性列表如下：

.js

 //跳转到info页面
  gotoInfo(){
    wx.navigateTo({
      url: '/pages/info/info',
    })
  }

后退导航

1. 声明式导航

• open-type的值必须是navigateBack,表示要进行后退导航
• delta的值必须是数字，表示要后退的层级

<navigator open-type="navigateBack" delta="1">后退界面</navigator>

如果只是后退到上一个界面，则可以省略掉delta属性，因为其默认值就是1

2. 编程式导航
   调用wx.navigateBack(Object object)方法，可以返回上一页面或多级页面。其中Object参数对象可选的属性列表如下：

.js

 //后退页面
   gotoBack(){
    wx.navigateBack({
      delta: 1,
    })
  },

导航传参

1. 声明式导航传参
   navigator组件的url属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数

• 参数和路径之间使用?分隔
• 参数键与参数值用=相连
• 不同参数用&分隔

<navigator url="/pages/info/info?name='zs'&age='18">跳转到info界面并传参</navigator>

如何查看是否传参成功

2. 编程式导航传参
调用wx.navigateTo(Object object)方法跳转页面时，也可以携带参数

 //跳转到info界面并传参
  gotoInfo2(){
    wx.navigateTo({
      url: "/pages/info/info?class='一班'&id='65'",
    })
  }

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

data: {
    //预设一个空对象，用来接收传递过来的参数
   quare: {}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log(options);
    this.setData({
      quare: options
    })
  },

保存到data的作用是为了扩大作用域

页面事件

下拉刷新事件

1. 开启下拉刷新
   .json文件（如果全局就在app.json中的window中设置，当前页就在当前页的.json中设置）

 "enablePullDownRefresh": true 

2. 对下拉事件进行处理
   在.js文件中

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

在上面的方法中处理下拉的事件
3. 关闭下拉的效果
下拉的效果是不会自动合上的，需要手动调用

 wx.stopPullDownRefresh({
     // success: (res) => {},
    })

注意在模拟机上是会自动合上的，但真机不会，由于JS是逐行编译的，方法要在刷新事件结束后再去调用

即：

 /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    //刷新事件
    //....
    //停止下拉刷新
    wx.stopPullDownRefresh({
     // success: (res) => {},
    })
  },

上拉触底

上拉触底指的是手指再屏幕上的上拉滑动操作，从而加载更多数据的行为

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

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

只有在页面的内容被充满溢出的时候，才可以看到上拉触底的效果

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
     console.log('触发了上拉触底事件');
  },

这里会被仿佛触发，所以需要在实际开发中限制在上一个请求还没有结束前不发起下一个请求

生命周期

在小程序中，生命周期分为两类，分别是：

1. 应用生命周期

• 特指小程序从启动-》运行-》销毁的过程

2. 页面生命周期

• 特指小程序中，每个页面的记载-》渲染-》销毁的过程

其中，页面的生命周期范围比较小，应用程序的生命周期范围较大。
如下图所示

生命周期函数

• 生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按序执行
• 作用： 允许程序员在特定的时间点，执行某些特定的操作

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

// app.js
App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
  }
})

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

Page({

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  }
})

WXS脚本

概述

WXS(WeiXin Script)是小程序独有的一套脚本语言，结合WXML，可以构建出页面的结构。

WXS的应用场景

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

wxs和JavaScript的关系

1. wxs有自己的数据类型

• number 数值类型 、string 字符串类型、boolean 布尔类型、object 对象类型、
• function 函数类型、array 数组类型、date 日期类型、regexp 正则

2. wxs 不支持类似于ES6及以上的语法形式

• 不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc…
• 支持： var定义变量、普通function函数等类似于ES5的语法

3. wxs遵循CommonJS规范

• module 对象
• require()函数
• module.exports 对象

wxs脚本 - 基础语法

1. 内嵌 wxs 脚本
   wxs代码可以编写在wxml文件的<wxs>标签内，就像JS可以编写在html文件中的<script>标签内一样。
   wxml文件中的每个标签，必须提供module属性，用来指定当前wxs的模块名称，方便在wxml中访问模块中的成员；

.wxml

<!--pages/shangcheng/shangcheng.wxml-->
<wxs module="m1">
//将小写字母渲染成大写
    module.exports.toUpper = function(str){
      return str.toUpperCase()
    }
</wxs>
<view>{{userName}}</view>
<view>{{ m1.toUpper(userName) }}</view>

2. 定义外联的wxs脚本
   wxs代码还可以编写在以.wxs为后缀名的文件内，就像JS代码可以编写在.js为后缀名的文件中一样。示例代码如下：

tools.wxs

function toLower(str){
  return str.toLowerCase()
}
//对外暴露属性
module.exports = {
  toLower:toLower
}

使用外联的wxs脚本
在wxml中引用外联的wxs脚本时，必须为标签添加module和src属性，其中：

• module 用来指定模块的名称
• src 用来指定要引入的脚本的路径，且必须是相对路径

<!--pages/shangcheng/shangcheng.wxml-->
<wxs module="m2" src="../../utils/tools.wxs"></wxs>
<view>{{ott}}</view>
<view>{{m2.toLower(ott)}}</view>

wxs的特点

1. wxs借鉴了大量的JS,但又是一门独立的语言
2. wxs中定义的函数不能作为组件的事件回调函数
3. 具有隔离性
   隔离性指的是wxs的运行环境和其他JavaScript代码是隔离的。体现在如下两方面：

• wxs不能调用.js中定义的函数
• wxs不能调用小程序提供的API
  4.性能好
• 在ios设备上，小程序的WXS会比JavaScript代码快2~20倍
• 在android设备上，二者的运行效率无差异