【WeChat 小程序】009 - 页面跳转以及自定义数据属性

页面跳转

常见的页面跳转函数如下

路由方式
对于路由的触发方式以及页面生命周期函数如下：
路由方式 触发时机 路由前页面 路由后页面
初始化 小程序打开的第一个页面 onLoad, onShow
打开新页面 调用 API wx.navigateTo
使用组件 onHide onLoad, onShow
页面重定向 调用 API wx.redirectTo
使用组件 onUnload onLoad, onShow
页面返回 调用 API wx.navigateBack
使用组件
用户按左上角返回按钮 onUnload onShow
Tab 切换 调用 API wx.switchTab
使用组件
用户切换 Tab 各种情况请参考下表
重启动 调用 API wx.reLaunch
使用组件 onUnload onLoad, onShow

页面间传递自定义数据属性

"data-xxx-xxx" 自定义数据属性

会被转换为驼峰命名的方式之后记录在currentTarget属性/dataset中

1. 在原页面wxml中在元素属性中声明以data-xxx-xxx格式的自定义数据属性

 <view class="container movie-card"
    bindtap="f1" data-movie-id="{{item.id}}">
 </view>

2. 在原页面js逻辑文件中通过事件处理函数调用自定义数据属性

  f1: function(event){
    var movieId = event.currentTarget.dataset.movieId
    wx.navigateTo({
      url: '/pages/detail/detail?id=' + movieId,
    })

3. 在跳转目标页的js文件中通过onLoad函数的options参数获取id

  onLoad: function(options){
    console.log(options.id)
    this.setData({
      mid: options.id
    })
  }