【前端技術(shù)】微信小程序?qū)崿F(xiàn)于H5之間的互相跳轉(zhuǎn)

發(fā)布時(shí)間：2025-05-30 熱度：

h5跳轉(zhuǎn)小程序

小程序內(nèi)打開(kāi)h5

這個(gè)只需要用web-view標(biāo)簽即可，

可打開(kāi)關(guān)聯(lián)的公眾號(hào)的文章，其它網(wǎng)頁(yè)需登錄小程序管理后臺(tái)配置業(yè)務(wù)域名。

<web-view src="https://www.baidu.com" bindload="bindload" binderror="binderror"></web-view>

參考文檔：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

小程序內(nèi)h5返回小程序

返回指定頁(yè)面即可

wx.miniProgram.navigateTo({url: '/path/to/page'})

參考文檔：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

h5 跳轉(zhuǎn)到小程序（微信環(huán)境）

1、使用wx-open-launch-weapp標(biāo)簽

它依賴于微信 JS-SDK 的支持，因此只能在微信環(huán)境中使用。需要進(jìn)行簽名校驗(yàn)

注意微信按鈕的style不好調(diào)整，所以我們將它設(shè)置為寬度100%，高度適合的一條透明按鈕，再將自己所需要的按鈕樣式寫在同樣的位置。

<div style="position: relative;width: 100%;height: 3rem;">
   //需要的按鈕樣式，以絕對(duì)定位放在微信跳轉(zhuǎn)按鈕的相同位置
  <van-button  style="position: absolute;top:1rem">打開(kāi)小程序</van-button >
    //微信跳轉(zhuǎn)按鈕
   <wx-open-launch-weapp
       style="position: absolute;top: 0"
       id="launch-btn"
       appid="wx12345678"
     username="小程序原始id，即小程序?qū)?yīng)的以gh_開(kāi)頭的id"
     path="pages/home/index?user=123&action=abc"
      referrerinfo="{'key1':'value1','key2':'value2'}"  <!-- 可選參數(shù)，傳遞額外信息給小程序 -->
    >
     <script type="text/wxtag-template">
       <style>.mini-btn {
         width:100%;
         margin: 24px auto;
         height: 3rem;
       opacity: 0}</style> //設(shè)置透明度為0
       <p class="mini-btn"></p>
     </script>
   </wx-open-launch-weapp>
 </div>
<!-- 引入微信 JS-SDK -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
window.onload = function() {
    // 頁(yè)面加載完成后的代碼
    console.log('頁(yè)面加載完成');
    this.getWxConfig()//發(fā)起微信驗(yàn)證的接口請(qǐng)求
};
// 后端驗(yàn)證接口： getSign （驗(yàn)證接口測(cè)試最好在線上測(cè)試）
 getSign = (data = {}) => {
    return request({
        url: '后端驗(yàn)證接口地址',
        method: 'post',
        data: data
    })
}
  getWxConfig () {
      let that = this
      let url = window.location.href.split('#')[0]
      const query = {
        webUrl: url,
        userId: this.userId
      }
      getSign(query).then(res => {
        wx.config({
          debug: false, // 驗(yàn)證結(jié)果彈窗控制，微信環(huán)境可能會(huì)因?yàn)榻涌诎踩珕?wèn)題出現(xiàn)失敗彈窗，所以直接設(shè)置的false，
          appId: res.data.appId, // 公眾號(hào)唯一appid
          nonceStr: res.data.nonceStr,
          timestamp: res.data.timestamp,
          signature: res.data.signature,
          jsApiList: ['scanQRCode'],//隨便填寫的一個(gè)
          openTagList: ['wx-open-launch-weapp']
        })
        wx.ready(function (success) {
          that.isWxBtn = true //表示驗(yàn)證成功
          console.log('success', success)
        })
        wx.error(function (err) {
          Toast.fail('暫不支持',error);
          // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過(guò)期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開(kāi)config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名。
          console.log('error', error)
        })
      })
    }
 
</script>

參考文檔：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

官方案例：https://developers.weixin.qq.com/miniprogram/dev/wxcloudservice/wxcloud/guide/staticstorage/jump-miniprogram.html

2、使用URL Link

適用于從短信、郵件、網(wǎng)頁(yè)、微信內(nèi)等場(chǎng)景打開(kāi)小程序。

生成的 URL Link 如下所示：

https://wxaurl.cn/*TICKET* 或 https://wxmpurl.cn/*TICKET*

參考文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-link.html

h5跳轉(zhuǎn)小程序非微信環(huán)境 URL Scheme

適用于從短信、郵件、微信外網(wǎng)頁(yè)等場(chǎng)景打開(kāi)小程序。通過(guò) URL Scheme 打開(kāi)小程序的場(chǎng)景值為 1065。

在H5頁(yè)面中通過(guò)a標(biāo)簽或者JavaScript的window.location.href進(jìn)行跳轉(zhuǎn)。

1、加密 URL Scheme

獲取方式：通過(guò)服務(wù)端接口可以獲取打開(kāi)小程序任意頁(yè)面的加密 URL Scheme。

location.href = 'weixin://dl/business/?t= *TICKET*'

2、明文 URL Scheme

獲取方式：開(kāi)發(fā)者無(wú)需調(diào)用平臺(tái)接口，在MP平臺(tái)->設(shè)置->隱私與安全->明文Scheme拉起此小程序聲明后，可自行根據(jù)如下格式拼接appid和path等參數(shù)，作為明文 URL Scheme 鏈接。

location.href = 'weixin://dl/business/?appid=*APPID*&path=*PATH*&query=*QUERY*&env_version=*ENV_VERSION*'

參考文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html

小程序打開(kāi)小程序

wx.navigateToMiniProgram({
   appId: appId, //必傳值
   path: path,//別的小程序路徑,空為跳到主頁(yè)
   success(res) {
     // 打開(kāi)成功
   },
   fail(res) {
     //打開(kāi)失敗
    }
})

參考文檔：https://developers.weixin.qq.com/miniprogram/dev/api/navigate/wx.navigateToMiniProgram.html

小程序內(nèi)h5跳另一個(gè)小程序

當(dāng)我們的H5被某一個(gè)小程序打開(kāi)，又想在H5內(nèi)打開(kāi)別的小程序，這種我們可以結(jié)合”小程序內(nèi)H5返回小程序”和”小程序打開(kāi)小程序”的模式

首先是H5頁(yè)面修改

1、獲取配置的別的小程序參數(shù)和別的小程序路徑

2、跳轉(zhuǎn)到包含該h5頁(yè)面的小程序某個(gè)頁(yè)面，帶上目標(biāo)參數(shù)和路徑

wx.miniProgram.navigateTo({

url: '/pages/自己小程序頁(yè)面路徑?appid=別的小程序參數(shù)&path=別的小程序路徑'

});

然后是小程序頁(yè)面修改

1、獲取別的小程序appid和別的小程序路徑path

2、小程序打開(kāi)小程序

wx.navigateToMiniProgram({
   appId: appId, //必傳值
   path: path,//別的小程序路徑,空為跳到主頁(yè)
   success(res) {
     // 打開(kāi)成功
   },
   fail(res) {
     //打開(kāi)失敗
   }