小程序'路由拦截'，全局组件设计

路由拦截、埋点

场景：大部分页面内接口需要登录拿到 token，一般登录是需要跳转到一个统一的登录页，登录后返回之前页面。小程序没有全局的路由拦截，需要在页面 onLoad onShow 生命周期内判断是否登录过，未登录跳转到登录页，实现起来不方便统一管理且容易遗漏。

实现：

重写 Page 方法

app.js

const routerBeforeEach = (next) => {
   const token = wx.getStorageSync('token');
   if (token) {
     next();
     return;
   }
   if (!token && !getApp().globalData.isInLogin) {
   getApp().globalData.isInLogin = true
    wx.navigateTo({
      url: '/pages/login/index'
    })
    return
   }
   next()
}

const OldPage = Page;
Page = function (options) {
  const oldLoad = options.onLoad
  const oldShow = options.onShow
  options.onLoad = function () {
    routerBeforeEach(() => {
      oldLoad.apply(this, arguments)
      console.log('new onLoad')
      // 小程序页面 uv 埋点
    })
  }
  options.onShow = function () {
    routerBeforeEach(() => {
      oldShow.apply(this, arguments)
      console.log('new onShow')
      // 小程序页面 pv 埋点
    })
  }
  OldPage(options)
}

扩展

• 重写 onShareAppMessage 方面，分享时可以统一处理分享需要带出的公共数据
• 重写 onLoad 方法，统一解析 onLoad 的参数方便页面使用
• 重写 App Page Component 方法，重写三个方法传入 options 内部的生命周期，点击事件绑定的方法等实现埋点功能

全局公共组件

场景：广告弹框、浮窗

实现：创建一个全局的 pageWrap 组件，整个页面用作为 pageWrap 的插槽使用。

components/pageWrap/index

<view class="page-wrap">
   <!-- 页面 -->
  <block>
    <slot></slot>
  </block>

  
   <!-- 广告弹框 -->
  <van-dialog title="广告弹框">
    <image src="https://img2.baidu.com/it/u=1728522718,1340994382&fm=26&fmt=auto&gp=0.jpg" />
  </van-dialog>

   <!-- 浮窗 -->
  <view class="flow-window"></view>
</view>

app.json

"usingComponents": {
    "page-wrap": "/components/pageWrap/index",
  },

pages/home/index.wxml

<page-wrap>
  <view>home</view>
</page-wrap>