微信小程序-导航 & 路由

微信小程序-导航 & 路由

页面跳转

页面路由

页面栈, 框架以栈的形式维护了当前的所有页面。

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html

使用 getCurrentPages() 函数获取当前页面栈。

// pages/base/index.js

const log = console.log;
const err = console.error;

log(`getCurrentPages() 获取当前页面栈 base`, getCurrentPages());

// pages/base/index.js

const log = console.log;
const err = console.error;

log(`getCurrentPages() 获取当前页面栈 base`, getCurrentPages());

Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg: "小程序-基础页面",
    img: "/images/peppa-pig.jpeg",
    arr: ["A", "B", "C",],
    list: [
      {
        name: "xgqfrms",
        age: 23,
      },
      {
        name: "China",
        age: 5000,
      },
      {
        name: "USA",
        age: 200,
      },
    ],
    isLogin: true,
    count: 0,
  },
  clickAdd: function (e) {
    console.log(`this =`, this);
    console.log(`\nevent =`, e);
    // this.data.count = this.data.count + 1;
    this.setData({
      count: this.data.count + 1,
    });
  },
  add (e) {
    console.log(`this =`, this);
    console.log(`\nevent =`, e);
    // ye {__wxExparserNodeId__: "fa2cbe59", __route__: "pages/base/index", route: "pages/base/index", __displayReporter: g, clickAdd: ƒ, …}
    this.setData({
      count: this.data.count + 1,
    });
  },
  // add: (e) => {
  //   arrow function this bug
  //   console.log(`this =`, this);
  //   // this = undefined
  //   console.log(`\nevent =`, e);
  //   this.setData({
  //     count: this.data.count + 1,
  //   });
  // },
  clickBox () {
    console.log(`click box`);
  },
  clickItem () {
    console.log(`click item`);
  },
  dataset (e) {
    // console.log(`e.currentTarget === e.target`, e.currentTarget === e.target, e);
    // object !== object
    const dataset = e.currentTarget.dataset;
    console.log(`dataset =`, dataset);
    // dataset = {uid: "123"}
    console.log(`uid =`, dataset.uid);
    // uid = 123
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    log(`%c小程序 页面的生命周期: %conLoad`, `color: #f00;`, `color: #f0f;`);
    log(`options =`, options);
    log(`getCurrentPages() 获取当前页面栈 ️`, getCurrentPages());
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    log(`%c小程序 页面的生命周期: %conReady`, `color: #f00;`, `color: #f0f;`);
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    log(`%c小程序 页面的生命周期: %conShow`, `color: #f00;`, `color: #f0f;`);
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    log(`%c小程序 页面的生命周期: %conHide`, `color: #f00;`, `color: #f0f;`);
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    log(`%c小程序 页面的生命周期: %onUnload`, `color: #f00;`, `color: #f0f;`);
  },

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

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    log(`%c小程序 页面的生命周期: %oonReachBottom`, `color: #f00;`, `color: #f0f;`);
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    log(`%c小程序 页面的生命周期: %oonShareAppMessage`, `color: #f00;`, `color: #f0f;`);
  }
})

navigateTo

1. 调用 API wx.navigateTo

https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html

wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

//test.js
Page({
  onLoad: function(option){
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

1. 使用组件 <navigator open-type="navigateTo"/>

https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

<!-- sample.wxml -->
<view class="btn-area">
  <navigator
    url="/page/navigate/navigate?title=navigate"
    hover-class="navigator-hover">
    跳转到新页面
  </navigator>
  <navigator url="../../redirect/redirect/redirect?title=redirect"
    open-type="redirect"
    hover-class="other-navigator-hover">
    在当前页打开
  </navigator>
  <navigator url="/page/index/index"
    open-type="switchTab"
    hover-class="other-navigator-hover">
    切换 Tab
  </navigator>
  <navigator target="miniProgram"
    open-type="navigate"
    app-id=""
    path=""
    extra-data=""
    version="release">
    打开绑定的小程序
  </navigator>
</view>

<!-- navigator.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角, 返回回到, 之前页面 </view>

<!-- redirect.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角, 返回回到, 上级页面 </view>

Page({
  onLoad: function(options) {
    this.setData({
      title: options.title
    })
  }
})

redirectTo

switchTab

reLaunch

Tips:

navigateTo, redirectTo 只能打开非 tabBar 页面。

switchTab 只能打开 tabBar 页面。

reLaunch 可以打开任意页面。

页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。

调用页面路由携带的参数可以在目标页面的 onLoad 生命周期函数中获取。

refs

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---