WXOPEN Club

【feature】路由事件

发布于 6 年前作者 longjuan4507 次浏览最后编辑 6 年前来自 ask
  • 需求的场景描述（希望解决的问题）

需要监听页面路由的变换。在路由变化时做响应的处理

  • 希望提供routeChange的相关hook，并可以利用hook的返回值，决定真正路由方向

例如（支持promise更好）：

     wx.onRouteBeforeChange(({ current: {path: ‘’, query: ‘’}, next: {},}) => {})

     wx.onRouteAfterChange(({ current, next }) => {})

4 回复
mintan
mintan1 楼6 年前

如果不考虑默认导航（顶部和底部的导航）的点击的话，可以简单对几个跳转方法做个封装的嘛

chao61
chao612 楼6 年前

考虑了一下，有了个大胆的想法

其实我觉得在现有功能上是基本可以实现路由监听的。那就是重写Page方法, 比如:

const _oldPage = Page;
const pages = [];

Page = functin(option) {

 const onLoad = option.onLoad;

 const onUnload = option.onUnload;

  option.onLoad = function(initOption) {
    
 
    if (pages[pages.length - 1] !== this) {
       pages.push(this);

    }


    typeof this.beforeRouteEnter === 'function' && this.beforeRouteEnter();


    onLoad.call(this, initOption);
  };
 
  option.onUnload = function() {
    pages.pop();

    typeof this.beforeRouteLeave === 'function' && this.beforeRouteLeave();

   onUnload.call(this);

  }
 
  option.router = {
    navigateTo: function({ url}) {
      typeof this.beforeRouteLeave === 'function' && this.beforeRouteLeave();
      wx.navigateTo({ url: url });
    },
    // 同理类似编写switchTab, navigateBack等方法，只是注意其路由变化时触发函数不要重复触发， 因为使用某些路由跳转方法会卸载页面，触发一次onUnload方法
  };
   
  _oldPage(option);
};


向上面这样，在每个页面逻辑里面强行插入自定义的路由状态变更逻辑。应该可以优化很多路由方面的问题

只是一些特性啊，效率上可能没有那么高，比如beforeRouteLeave中无法传入下一个页面实例，如法阻止网页跳转。

有错误欢迎指正。

junren
junren3 楼6 年前

这个业务侧有需求的话应该是可以自己实现的

minbai
minbai4 楼4 年前

关键字：

路由事件监听，路由事件钩子，路由事件，路由钩子，

小程序路由事件监听，小程序路由事件钩子，小程序路由事件，小程序路由钩子