項目記錄 — 微信h5跳轉小程序

實際項目中，咱們期盼微信內置的h5網頁可以拉起微信小程序，終於在2020年3月份，微信推出了開放標籤，可以讓咱們在微信端調起小程序；

微信配置

1.測試公衆號

很是重要：必須是已經認證成功的服務帳號；我的測試帳號是不能夠的；

圖1 微信認證的服務號

上面標註必須是已認證

2.配置微信接口

微信jsSdk的版本 1.6.0
獲取已經認證的服務帳號的appid等信息，進行配置；

wx.config({
   debug: false,
     appId: data.data.appid,
     timestamp: data.data.timestamp,
     nonceStr: data.data.noncestr,
     signature: data.data.signature,
     jsApiList: jsApiList, //微信配置
     openTagList: ["wx-open-launch-weapp"] // 跳轉小程序時必填
})
複製代碼

此時咱們已經得到了微信給咱們的開放的標籤；wx-open-launch-weapp;

3.配置標籤

在vue的框架中進行配置

<div class="button-wrapper" >
          <wx-open-launch-weapp id="to-webapp small" :username="webappConfig.username" :path="webappConfig.path" @launch="launch" @ready="ready" @error="error" > <script type="text/wxtag-template"> <style> .to-lead{ width: 140px; height: 190px; } </style> <div class="to-lead"></div> </script> </wx-open-launch-weapp>
        </div>
複製代碼

• username 是所需跳轉的小程序原始id，即小程序對應的以gh_開頭的id
• path 所需跳轉的小程序內頁面路徑及參數
• 文檔中的template 在框架中須要改爲script標籤的形式；
• wx-open-launch-weapp內的內容爲插槽格式，所以須要給標籤自定義上樣式
• 樣式中的px在移動端可能存在適配的問題，所以能夠進行簡單的適配

4.兼容性

微信的開放標籤是在2020年才支持的，由於對於微信的老版本而言可能存在適配的問題，因此須要進行版本的適配；

獲取微信的版本

var wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
複製代碼

圖2 獲取微信版本信息

比較版本

// comVersion(wechatInfo[1], "7.0.12")
 function comVersion(version1, version2) {
      version1 = version1.split(".");
      version2 = version2.split(".");
      for (var i = 0; i < version1.length; i++) {
        if (version1[i] > version2[i]) {
          return true;
        }
      }
      return false;
    }
複製代碼

5.配置成功

本身進行回調便可，微信的標籤中 提供了幾個方法，

圖3 微信配置成功調起小程序

問題坑點記錄

1.微信開發工具中不顯示按鈕

目前微信開放標籤只支持微信真機中的內容查看，不支持微信開發工具

2.微信真機中標籤不顯示

2.1.查看微信配置是否正確 此時涉及到微信公衆號的相關配置

• 配置失敗

圖4 微信進行配置時候失敗

當微信配置失敗時候，緣由有不少，可自行查找微信對應api進行排除；

• 配置成功

圖5 微信配置成功

2.2 配置成功 查看當前公衆號權限

當全部的內容均配置成功了，可是仍是沒有調起小程序----

• 微信服務號 必需要認證成功
• 微信公衆號中的開發者配置，裏面的獲取js的權限域名添加，須要加上當前的域名
• 可申請一個線上的服務號用於測試呀～

3.微信小程序樣式坑點

在微信端的wx-open-launch-weapp的標籤須要在script中寫內容，所以對於複雜的樣式，是很是難調試的，好比按鈕的寬度，按鈕中文字居中的樣式，所以在標籤內部的樣式能夠採用圖片的格式進行固定，不過任何都是有風險的，因此仍是須要一步一步的進行調試和整合；

參考文檔

微信開放標籤配置