Process Routing with Middleware for wechat miniprogram

How to install weio-router ?

  cd miniprogram

  # yarn
  yarn add weio-router -S --registry=https://registry.npmjs.org/

  # npm
  npm i weio-router -S --registry=https://registry.npmjs.org/

How to use weio-router ?

安装完之后需在微信开发者工具在菜单栏中找到 工具 --> 构建npm

After installation, you need to find the build npm option under Tools in the WeChat Developer Tools menu bar

Router Init

// esm
import WeioRouter from 'weio-router';

const router = new WeioRouter();

router.create();

router.go();
router.back();
router.tab();
router.redirect();
router.reLaunch();

// cjs
const WeioRouter = require('weio-router');

const router = new WeioRouter();

API

• create
  • 创建一个WeioRouter实例
  • Create a WeioRouter instance

  • import WeioRouter from 'weio-router';
    const router = new WeioRouter();
    router.careate(); // Create a WeioRouter instance

• go
  • 跳转到应用内的某个页面
  • Jump to a page within the app

  • import WeioRouter from 'weio-router';
    const router = new WeioRouter();
    router.go({
      url: string;
      events: object;
      middleware: RouterMiddlewareFunction<T>[];
      ignoreMiddleware: string[];
      success: Function;
      complete: Function;
    })

  • Document
• back
  • 关闭当前页面，返回上一页面或多级页面
  • Close the current page, return to the previous page or multi-level page

  • import WeioRouter from 'weio-router';
    const router = new WeioRouter();
    router.back({
      delta: number;
      fail: Function;
      success: Function;
      complete: Function;
      middleware: RouterMiddlewareFunction<T>[];
      ignoreMiddleware: string[];
    })

  • Document
• tab
  • 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
  • Jump to the tabBar page and close all other non-tabBar pages

  • import WeioRouter from 'weio-router';
    const router = new WeioRouter();
    router.tab({
      url: string;
      middleware: RouterMiddlewareFunction<T>[];
      ignoreMiddleware: string[];
      fail: Function;
      success: Function;
      complete: Function;
    })

  • Document
• redirect
  • 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
  • Close the current page and jump to a page in the app. But jumping to the tabbar page is not allowed

  • import WeioRouter from 'weio-router';
    const router = new WeioRouter();
    router.redirect({
      url: string;
      middleware: RouterMiddlewareFunction<T>[];
      ignoreMiddleware: string[];
      fail: Function;
      success: Function;
      complete: Function;
    })

  • Document
• reLaunch
  • 关闭所有页面，打开到应用内的某个页面
  • Close all pages, open to a page in the app

  • import WeioRouter from 'weio-router';
    const router = new WeioRouter();
    router.redirect({
      url: string;
      middleware: RouterMiddlewareFunction<T>[];
      ignoreMiddleware: string[];
      fail: Function;
      success: Function;
      complete: Function;
    })

  • Document

Middleware

Careate a Middleware

 // 示例：跳转页面时需要验证是否已经授权登录
 // Example: When jumping to the page, you need to verify whether you have authorized login

 // middleware.ts

 export default {
  key: 'authorized',
  action: async (ctx, next) => {
   const token = wx.getStoreSync('auth:token'); 
   if (string !== typeof token || token === '') {
    wx.showToast({
      icon: 'none',
      title: 'Please authorize login first',
    });
   }else await next();
  }
 }

 // router.ts
 import WeioRouter from 'weio-router';
 import authorized from './authorized.ts';
 const router = new WeioRouter();
 
 // middleware use global
 router.use(authorized);

 // or use block
 router.go({
  url:'/pages/main/main',
  middleware: [authorized],
 });

Ignore Middleware

router.go({
  url:'/pages/login/login',
  ignoreMiddleware: ['authorized'],
})