微信小程序（2）页面导航

1.页面导航

1.1导航跳转

一、声明式导航
1).导航到tabBar页面
在使用 <navigator> 组件跳转到指定的 tabBar 页面时，需要指定 url 属性和 open-type 属性，其中：
url 表示要跳转的页面的地址，必须以／开头
open-type 表示跳转的方式，必须为 switchTab

<navigator url="/pages/message/message" open-type="switchTab">导航到message</navigator>

2).导航到非 tabBar 页面
在使用\ 组件跳转到普通的非 tabBar 页面时，则需要指定 url 属性和open-type 属性，其中：
url 表示要跳转的页面的地址，必须以／开头
open-type 表示跳转的方式，必须为 navigate

<navigator url="/pages/info/info" open-type="navigate">导航到info</navigator>

3).后退导航
如果要后退到上一页面或多级页面，则需要指定 open-type 属性和 delta 属性，其中：
open-type 的值必须是 navigateBack，表示要进行后退导航
delta 的值必须是数字，表示要后退的层级

<navigator open-type="navigateBack" delta="1">返回上一页</navigator>

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

属性	类型	必选	说明
url	string	是	需要跳转的tabBar 页面的路径，路径后不能带参数
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

gotoMessage(){
  wx.switchTab({
    url: '/pages/message/message',
  })
},

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

gotoInfo(){
  wx.navigateTo({
    url: '/pages/Info/Info',
  })
},

3).后退导航
调用wx.navigateBack(Object object) 方法，可以返回上一页面或多级页面。其中 Object
参数对象含有参数delta，默认值为1

gotoBack(){
  wx.navigateBack()
},

1.2导航传参

navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：
参数与路径之间使用？分隔
参数键与参数值用=相连
不同参数用 ＆分隔

<navigator url="/pages/info/info?name=zhangsan&age=20" open-type="navigate">导航到info</navigator>

调用wx.navigateTo(Object object) 方法跳转页面时，也可以携带参数

  wx.navigateTo({
    url: '/pages/Info/Info?name=zhangsan&age=20',
  })

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

  onLoad: function (options) {
    console.log(options);
  },

2.页面事件

2.1下拉刷新事件

开启下拉刷新
在页面的 .json 配置文件中，将enablePullDownRefresh 设置为 true

{
  "enablePullDownRefresh": true,
  "backgroundColor": "#efefef",
  "backgroundTextStyle": "dark"
}

监听页面的下拉刷新事件
在页面的 .js 文件中，通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。调用wx.stopPullDownRefresh()停止当前页面的下拉刷新

  onPullDownRefresh: function () {
    console.log("触发了下拉事件");
    wx.stopPullDownRefresh()
  },

2.2上拉触底事件

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

  onReachBottom: function () {
    console.log("触发了上拉触底事件");
  },

添加loading提示效果：

getList(){
  wx.showLoading({
    title: '数据加载中...',
  })
  wx.request({
    //省略其他代码
    complete:()=>{
      wx.hideLoading()
    }
  })
},

对上拉触底进行节流处理：
方法：设置节流阀参数

data: {
  isloading:false
},
getList(){
  this.setData({
    isloading:true
  })
  wx.showLoading({
    title: '数据加载中...',
  })
  wx.request({
    //省略请求代码
    complete:()=>{
      wx.hideLoading()
      this.setData({
      	isloading:false
      })
    }
  })
},
onReachBottom: function () {
  if(this.data.isloading)return
  this.getList()
},

3.生命周期

1.应用的生命周期函数
onLaunch(Object object)
小程序初始化完成时触发，全局只触发一次。参数也可以使用 wx.getLaunchOptionsSync 获取。

onShow(Object object)
小程序启动，或从后台进入前台显示时触发。也可以使用 wx.onAppShow 绑定监听。

onHide()
小程序从前台进入后台时触发。也可以使用 wx.onAppHide 绑定监听。

onError(String error)
小程序发生脚本错误或 API 调用报错时触发。也可以使用 wx.onError 绑定监听。

2.页面的生命周期函数
onLoad(Object query)
页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

onReady()
页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
注意：对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在onReady之后进行。

onHide()
页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。

onUnload()
页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。

4.WXS脚本

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

<view>{{m1.toUpper(username)}}</view>
<wxs module="m1">
  module.exports.toUpper=function(str){
    return str.toUpperCase()
  }
</wxs>

2.外联的wxs脚本

//utils/tools.wxs
function toLower(str){
  return str.toLowerCase()
}

module.exports={
  toLower:toLower
}

在 wxml 中引入外联的 wxs 脚本时，必须为 标签添加 module 和 src 属性，其中：
module 用来指定模块的名称
src 用来指定要引入的脚本的路径，且必须是相对路径

<view>{{m1.toLower(username)}}</view>
<wxs src="../../utils/tools.wxs" module="m1"></wxs>