页面导航

• 声明式导航 <navigator>
• 编程式导航 API

<navigator url="/pages/info/info" >按钮</navigator>

导航到 tabBar 页面

• url 以斜向开头
• open-type 表示跳转的方式， switchTab

<navigator url="/pages/message/message" open-type="switchTab">
按钮</navigator>

注意： 导航到非 tabBar 页面的 open-type 为 navigate 但是可以省略不写

后退页面

• open-type 值为 navigateBack
• 包含 delta 属性，表示要后退的层级 (默认值为1)

<navigator open-type='navigateBack' delta="1">返回</navigator>

编程式导航

跳转至tabBar：wx.switchTab()

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

属性	类型	是否必选	说明
url	string	是	跳转路径
success	function	否	成功回调函数
fail	function	否	失败回调函数
complete	function	否	接口回调函数

跳转到非 tabBar 页面： wx.navigateTo()

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

后退导航： wx.navigateBack()

属性	类型	是否必选	说明
delta	number	否	返回页面数
success	function	否
fail	function	否
complete	function	否

gotoBack(){
  wx.navigateBack()
}

导航传参

参数的携带

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

声明式

<navigator url="/pages/info/info?name=zs&age=20" >按钮</navigator>

编程式

gotoInfo(){
  wx.navigateTo({
    url:'/pages/info/info?name=zs&age=20'
  })
}

参数的接收赋值

onLoad 对页面的监听函数

onLoad:function(options){
 	this.setData({
    myData:options //接收赋值给本地变量
  })
}

下拉刷新

.json 配置文件中开启下拉刷新

enablePullDownRefresh 开启全局刷新

属性名	类型	默认值	说明
navigationBarTitleText	String	字符串	导航栏标题文字内容
navigatoinBarBackgroundColor	HexColor	#000000	导航栏背景色
navigationBarTextStyle	String	white	导航栏标题颜色
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉loading的样式
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBootomDistance	Number	50	页面上拉触底时距离页面底部距离，单位为px

下拉监听事件函数

onPullDownRefresh()

onPullDownRefresh:function(){
  this.setData({
    count:0
  })
}

停止下拉刷新

在实际微信运行中下拉刷不会自动关闭 ， 需要手动关闭

wx.stopPullDownRefresh()

在每次处理完后关闭下拉刷新

onPullDownRefresh:function(){
  this.setData({
    count:0
  })
  wx.stopPullDownRefresh()
}

上拉触底

onReachBootmDistance 在json中可配置上拉触底距离

上拉触底事件处理函数

onReachBottom()

onReachBottom:function(){
  console.log('reach bottom')
}

上拉触底节流控制

1. 在 data 中定义 isloading 节流阀
   • flase 表示当前没有任何数据请求
   • true 表示当前正在进行数据请求
2. 在 getAPI 网络请求中修改 isloading 节流阀的值
   • 调用网络请求时将节流阀设置为 true
   • 在网络请求的 complete 回调函数中，将节流阀重置为 false
3. 在 onReachBottom 中判断节流阀的值，从而对数据进行节流控制
   • 判断节流阀的布尔值，阻止或发起网络请求

生命周期

• 页面生命周期（小程序）启动 - 运行 - 销毁
• 页面生命周期（页面） 加载 - 渲染 - 销毁

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

作用：在特定的时间点，执行特定的操作

小程序的生命周期函数

App({
  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {    
  },
  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {    
  },
  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {    
  },
  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {   
  }
})

页面的生命周期函数

Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {//options 携带的参数
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
})

wxs语法

wxml 中无法调用在页面 js 文件中定义的函数，但是 wxml 中可以调用 wxs中定义的函数，所以小程序 wxs 的典型应用场景就是 过滤器

wxs 由自己的数据类型

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

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

• 不支持 ： let、const 、结构赋值、展开运算符、箭头函数、对象属性简写、etc...
• 支持： var 、 function

wxs遵循 CommonJS 规范

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

基本用法

<view>{{m1.toUpper(username)}}</view>

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

外联用法

创建 .wxs 为后缀的文件名

funtion toLower(str){
  return str.toLowerCase()
}
module.exports = {
  toLower: toLower
}

使用

<view>{{m2.toUpper(username)}}</view>

<wxs src="../../utils/tools.wxs"  module="m2"></wxs>

注意事项

• 不能作为组件的事件回调 <button bindTap="m2.toLower>"
• 不能调用 js 定义的函数 、 不能使用小程序提供的API

仅做 过滤器 使用