h5跳轉小程序

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

這個只需要用web-view標簽即可，

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

<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返回小程序

返回指定頁面即可

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

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

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

1、使用wx-open-launch-weapp標簽

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

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

<div style="position: relative;width: 100%;height: 3rem;">
   //需要的按鈕樣式，以絕對定位放在微信跳轉按鈕的相同位置
  <van-button  style="position: absolute;top:1rem">打開小程序</van-button >
    //微信跳轉按鈕
   <wx-open-launch-weapp
       style="position: absolute;top: 0"
       id="launch-btn"
       appid="wx12345678"
     username="小程序原始id，即小程序對應的以gh_開頭的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> //設置透明度為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() {
    // 頁面加載完成后的代碼
    console.log('頁面加載完成');
    this.getWxConfig()//發(fā)起微信驗證的接口請求
};
// 后端驗證接口： getSign （驗證接口測試最好在線上測試）
 getSign = (data = {}) => {
    return request({
        url: '后端驗證接口地址',
        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, // 驗證結果彈窗控制，微信環(huán)境可能會因為接口安全問題出現(xiàn)失敗彈窗，所以直接設置的false，
          appId: res.data.appId, // 公眾號唯一appid
          nonceStr: res.data.nonceStr,
          timestamp: res.data.timestamp,
          signature: res.data.signature,
          jsApiList: ['scanQRCode'],//隨便填寫的一個
          openTagList: ['wx-open-launch-weapp']
        })
        wx.ready(function (success) {
          that.isWxBtn = true //表示驗證成功
          console.log('success', success)
        })
        wx.error(function (err) {
          Toast.fail('暫不支持',error);
          // config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于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)頁、微信內(nè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跳轉小程序非微信環(huán)境 URL Scheme

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

在H5頁面中通過a標簽或者JavaScript的window.location.href進行跳轉。

1、加密 URL Scheme

獲取方式：通過服務端接口可以獲取打開小程序任意頁面的加密 URL Scheme。

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

2、明文 URL Scheme

獲取方式：開發(fā)者無需調(diào)用平臺接口，在MP平臺->設置->隱私與安全->明文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

小程序打開小程序

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

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

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

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

首先是H5頁面修改

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

2、跳轉到包含該h5頁面的小程序某個頁面，帶上目標參數(shù)和路徑

wx.miniProgram.navigateTo({

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

});

然后是小程序頁面修改

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

2、小程序打開小程序

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