不同場景下的小程式跳轉

阿新 • • 發佈：2022-04-06

1、小程式原生頁面之間的互相跳轉

wx.switchTab、wx.reLaunch、wx.redirectTo、wx.navigateTo、wx.navigateBack
具體跳轉方式可檢視官方文件--https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html

2、同一小程式內嵌H5頁面和小程式原生頁面之間跳轉

內嵌H5跳轉小程式原生頁面
  wx.miniProgram.navigateTo({
    url: '/page/index/index?id=' + id + '&name=' + name
  })

小程式原生頁面跳轉內嵌H5 跳轉方式同第一種情況，先使用小程式原生頁面的跳轉方式跳轉到webview頁面，跳轉時攜帶需要內嵌的H5頁面地址，將其繫結在webview上即可例如：原生頁面： wx.navigateTo({ url: `/page/webView/webView?pageUrl=${pageUrl}` }) 小程式webView頁面 <view> <web-view :src="pageUrl" @message="message"></web-view>

</view> message(e) {}//接收web-view傳遞的引數

3、小程式A跳轉到小程式B

  //（1）在小程式A的原生頁面跳轉小程式B
  wx.navigateToMiniProgram({
    appId: appId,//appId
    path: href,//需要跳轉的頁面地址
    extraData: {},
    envVersion: 'trial',//環境
    success() {},
    fail(){}
  })
  //（2）在小程式A的內嵌H5頁面跳轉小程式B
  // 先從H5頁面跳轉至小程式A的原生頁面之後操作方式同上 

  // 跳轉成功後，需手動回退，否則返回時會停留在中轉頁面
  wx.navigateToMiniProgram({
    appId: appId,
    path: href,
    extraData: {},
    envVersion: 'trial',
    success(res) {
      let pages = getCurrentPages().length-1;
      wx.navigateBack({
        delta:pages
      });
      // 開啟成功
    },
    fail(){
      wx.navigateBack();
    }
  })

4、小程式A的分享頁面（微信瀏覽器開啟），跳轉至小程式B

html部分

<div class="parentBox">
    <img :src="圖片路徑" />
    <wx-open-launch-weapp 
        id="launch-btn"         
        :username="原始id"          
        :path="頁面具體路徑"
    >
    <script type="text/wxtag-template">
        <style>
          .linkBox { 
            width: 100%;
            height: 100%;
            position:absolute;
            top:0;
            left:0;
          }
        </style>
        <div class="linkBox"></div>
        </script>
    </wx-open-launch-weapp>
  </div>

css部分

<style>
  .parentBox {
    overflow: hidden;
    position: relative;
  }
  #launch-btn {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;  
    z-index: 9;
    overflow: hidden;
  }
</style>

js部分

<script>
  created() {
      const oScript = document.createElement('script');
      oScript.type = 'text/javascript';
      oScript.src = 'https://res2.wx.qq.com/open/js/jweixin-1.6.0.js';
      oScript.onload = this.getjssdk 
      document.body.appendChild(oScript);
  }
  getjssdk() {
    var _this = this
    let params = {
      url: window.location.href.split('#')[0]//當前地址
    }
    // 獲取簽名等
    axios({
      type: 'get',
      url: '後臺介面地址',
      params: params
    })
    .then((data) => {
      if(data) {
        var jsApiConfigParamsJson = JSON.parse(data.data.jsApiConfigParams)
        var noncestr = jsApiConfigParamsJson.noncestr;
        var signature = jsApiConfigParamsJson.signature;
        var timestamp = jsApiConfigParamsJson.timestamp;
        var appid = jsApiConfigParamsJson.appid;
        wx.config({
          debug: true,
          appId: appid,
          timestamp: timestamp,
          nonceStr: noncestr,
          signature: signature,
          jsApiList: [
            "checkJsApi",
            "showAllNonBaseMenuItem",
            "onMenuShareTimeline",
            "onMenuShareAppMessage",
            "onMenuShareQQ",
            "onMenuShareWeibo",
            "onMenuShareQZone"
          ],
          openTagList:['wx-open-launch-weapp']
        });
      }
    })
  }
</script>