h5頁面跳轉小程序

2020年以前, 只能通過 web-view內嵌h5跳轉小程序,現在  可以直接跳了!!!!!!

 

 官方文檔:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

用的是JS-SDK的接口，需要使用到js-sdk-1.6.0的版本才有支持，https://res.wx.qq.com/open/js/jweixin-1.6.0.js

wx.config({
  debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印 appId: '', // 必填，公眾號的唯一標識 timestamp: , // 必填，生成簽名的時間戳 nonceStr: '', // 必填，生成簽名的隨機串 signature: '',// 必填，簽名 jsApiList: [], // 必填，需要使用的JS接口列表 openTagList: [] // 可選，需要使用的開放標簽列表，例如['wx-open-launch-app'] }); 

 

在wx.config下面多了一項openTagList，開放標簽列表，目前支持配置wx-open-launch-weapp，wx-open-launch-app

wx-open-launch-weapp 指H5跳轉小程序

wx-open-launch-app 指H5跳轉app

我們主要介紹的是wx-open-launch-weapp H5跳轉小程序

先上才藝：

html代碼如下：

  var btn = document.getElementById('launch-btn'); btn.addEventListener('launch', function (e) { console.log('success'); }); btn.addEventListener('error', function (e) { console.log('fail', e.detail); }); 

 

username為小程序的原始id，path對應的是小程序的鏈接地址。之前有寫過微信H5的應該會知道怎么把這段代碼嵌入到之前的代碼里面。

目前此功能僅開放給已認證的服務號，網頁的域名要在服務號的“JS接口安全域名”下。

親測<wx-open-launch-weapp>可以跳轉到任意合法合規的小程序，是任意的小程序都能跳轉！！！！這個接口真開放（不怕人干壞事？）

 

PS：

有個坑，官方文件說的path是/a/b/c?d=1&e=2#fg，類似的這樣的鏈接格式，但是我自己親測如果直接使用/a/b/c?d=1&e=2#fg這樣格式的鏈接會報頁面不存在，然后我想到了小程序那邊復制鏈接的時候會在鏈接后面加上.html，於是挖槽的事情發生了，把path鏈接格式換成/a/b/c.html?d=1&e=2#fg這樣就能正常訪問，不知道是微信故意這樣設計的還是bug，有待考證。

然后這個接口真的可以干好多壞事，希望大家能用正確的價值觀來正確使用此接口。

 

微信開放標簽有最低的微信版本要求，以及最低的系統版本要求。

如果開發過程中出現以下情況的，要確認一下，微信版本要求為：7.0.12及以上。 系統版本要求為：iOS 10.3及以上、Android 5.0及以上。

 

 

 

更多參考鏈接:https://blog.csdn.net/github_38281308/article/details/107310719

https://developers.weixin.qq.com/community/develop/article/doc/0006c218d103a089e79a8720a56813

 

 

 

 

 

 

 

 

H5跳轉小程序wx-open-launch-weapp

注意事項

微信開放標簽有最低的微信版本要求，以及最低的系統版本要求。
微信版本要求為：7.0.12及以上。 系統版本要求為：iOS 10.3及以上、Android 5.0及以上。

綁定域名

微信安全域名只能修改綁定3次/每月
登錄微信公眾平台進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。

引入JS文件

在需要調用JS接口的頁面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）
如需進一步提升服務穩定性，當上述資源不可訪問時，可改訪問：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

通過config接口注入權限驗證配置

wx.config({
          debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
          appId: "XXXXXXXXXXX", // 必填，公眾號的唯一標識
          timestamp: this.timestamp, // 必填，生成簽名的時間戳
          nonceStr: this.nonceStr, // 必填，生成簽名的隨機串
          signature: this.signautre, // 必填，簽名
          jsApiList: [
            "onMenuShareTimeline",
            "onMenuShareAppMessage",
            "checkJsApi",
            "scanQRCode"
          ], // 必填，需要使用的JS接口列表
          openTagList:['wx-open-launch-weapp']
        });
        wx.ready(function() {
          //config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中
        });
        wx.error(function(res) {
          console.log('res',res);
          // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這里更新簽名。
        });

 

wx-open-launch-weapp開放標簽屬性

開放標簽使用(angular2/4項目)

<div id="wxOpenInAPP" class="wexin-launch-btn">
  </div>

 

 

var dom = document.getElementById('wxOpenInAPP') 
    dom.innerHTML = '<wx-open-launch-weapp id="launch-btn" username="gh_XXXX" path="pages/login/login/main.html"><template><style>  .wx-btn {   color: #666; width: 100%; height:100%; display: block; text-aligin:center; }</style><button class="wx-btn">跳轉小程序</button></template></wx-open-launch-weapp>'
    var launchBtn = document.getElementById('launch-btn')
    if (!launchBtn) {
      return
    }
    launchBtn.addEventListener('launch', function (e) {
      console.log('eee',e);
    })
    launchBtn.addEventListener('error', function (e:any) {
      console.log('fail', e.detail)
    })

 

開放標簽使用(vue項目)

<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxxxxx"  path="pages/login/login/main.html" @error="handleErrorFn" @launch="handleLaunchFn">
        <script type="text/wxtag-template">
            <style>.btn { display: flex;align-items: center; }</style>                                
            <div> <button class="wx-btn">跳轉小程序</button>    </div>            
        </script>
    </wx-open-launch-weapp>

    handleErrorFn(e){
        console.log('fail', e.detail);
    }

    handleLaunchFn(e){
        console.log('success');
    }