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}/index?weburl=${modelName}`,
            fail: function (e) {
              console.log('err===', e);
            },
          });
          break;
        case 'switchTab': //跳转tab页
          wx.miniProgram.switchTab({
            url: `..${finalUrl}/index?weburl=${prodUrl}${modelName}&${stringify(query)}`,
            fail: function (e) {
              console.log('err===', e);
            },
          });

          break;
        case 'back': // 回跳
          wx.miniProgram.navigateBack();
          break;
        default:
          // 默认push 页面
          wx.miniProgram.navigateTo({
            url: `..${finalUrl}/index?weburl=${prodUrl}${modelName}&${stringify(query)}"`,
            fail: function (e) {
              console.log('err===', e);
            },
          });
          break;
      }
    } else {
      console.log('query=', stringify(query));
      //非小程序页面使用路由跳转
      // 判断是否为外链
      const openUrl = modelName.startsWith('http');
      if (openUrl) {
        window.location.href = modelName;
        return;
      }

      history.push({
        pathname: modelName,
        query: query || {},
      });
    }
  });
};

//是否为小程序环境
export const isMiniProgram = (callback) => {
  //是否在微信环境
  if (!isWeixin()) {
    callback(false);
  } else {
    //微信API获取当前运行环境
    wx.miniProgram.getEnv((res) => {
      if (res.miniprogram) {
        //小程序环境
        callback(true);
      } else {
        callback(false);
      }
    });
  }
};

const isWeixin = () => {
  var ua = navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == 'micromessenger') {
    return true;
  }
  return false;
};


// 小程序路由只能嵌套一层 约定规则为'/'改为'-'
const handleSubUrl = (url) => {
  const count = getStrCount(url, '/');
  let vUrl = url;
  if (count > 1) {
    const str = url.slice(1).split('/').join('-');
    vUrl = `/${str}`;
  }
  return vUrl;
};

// 判断后字符出现的次数aStr：整个string, aChar：需要被查的字符
const getStrCount = (aStr, aChar) => {
  var regex = new RegExp(aChar, 'g'); // 使用g表示整个字符串都要匹配
  var result = aStr.match(regex);
  var count = !result ? 0 : result.length;
  return count;
};

使用微信的API 需要引用它的JSSDKhttps://res.wx.qq.com/open/js/jweixin-1.3.2.js
官网介绍：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

解析
我们用在路由中的参数无法带在webUrl中，在小程序中拿不到?后面的值
只能用另一个参数名带过去，然后在小程序中拼接
正常网页地址：

跳转代码为：

navigate(`/welcome/articleList`, { type: 'food' })}

在小程序中的承接和拼接

始终觉得这样的带参有些拼凑了 如果有更加合理的写法，麻烦给我留言