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

中，在小程式中拿不到

?

後面的值

隻能用另一個參數名帶過去，然後在小程式中拼接

正常網頁位址：

跳轉代碼為：

在小程式中的承接和拼接

始終覺得這樣的帶參有些拼湊了 如果有更加合理的寫法，麻煩給我留言