React+Umi 的H5 小程序公用跳转 H5小程序路由带参

场景分析

使用H5编写小程序的原因：

1. 公众号和小程序的页面重复，避免同一页面写两次。
2. 可从网页进入，也可从小程序进入

跳转方法分析

1. 工具使用端的分为 小程序内页面跳转和 普通网页页面跳转
2. 小程序内的页面跳转会分为：
   a>关闭本页打开
   b>不关闭本页打开（普通跳转）
   c>跳转tab页
   d>跳转外链
   e>回跳
3. 网页跳转：外链跳转，普通项目内跳转

Code

// 公用跳转处理 modelName：页面路由，query:参数， type:跳转方式
export const navigate = (modelName, query, type) => {
   
  //判断是否是小程序里
  isMiniProgram((res) => {
   
    if (res) {
   
      // 多层级路由格式处理
      const finalUrl = handleSubUrl(modelName);
      switch (type) {
   
        case 'redirect': //关闭本页面打开
          wx.miniProgram.redirectTo({
   
            url: `..${
     finalUrl}/index?weburl=${
     prodUrl}${
     modelName}&${
     stringify(query)}`,
          });
          break;
        case 'net': //跳转外链  小程序里面的对应页面放在query的pageName里面
          wx.miniProgram.navigateTo({
   
            url: `../${
     query.pageName}/inde