公衆號/h5 跳轉到小程序填坑指南

時間 2021-08-14

標籤 javascript html vue java ios web 算法 npm 小程序微信小程序欄目 JavaScript 简体版

原文原文鏈接

公衆號/h5 跳轉到小程序填坑指南

本文介紹的是使用微信開放標籤 wx-open-launch-weapp 實現微信瀏覽器內網頁跳轉到任意合法合規的小程序裏，官方要求微信版本爲：7.0.12 及以上，系統版本要求爲：iOS 10.3 及以上、Android 5.0 及以上。話很少說，先貼官方文檔：開放標籤說明文檔javascript

一. 準備工做

寫代碼前，必定要先把配置處理好,避免後續操做的不愉快。html

步驟一：綁定域名

登陸微信管理後臺，在開發-開發管理-開發設置-服務域名，把你 js 請求的接口域名添加進去。vue

步驟二：引入 js 文件

在你的項目裏面引入 js 文件，能夠有兩種方式。
方式 1：在 html 裏面使用 script 標籤引入java

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js "></script>複製代碼

方式 2： npm 安裝ios

npm install weixin-js-sdk-ts複製代碼

使用：import wx from ''weixin-js-sdk-ts'; Vue.prototype.wx = wxweb

步驟三：經過 config 接口注入權限驗證配置並申請所需開放標籤

這一步是很是關鍵的，調用微信 js 接口前要先拿到 config 信息，同一個 url 只須要調用一次。算法

wx.config({  debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
  appId: '', // 必填，公衆號的惟一標識
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: '', // 必填，生成簽名的隨機串
  signature: '',// 必填，簽名
  jsApiList: [], // 必填，須要使用的JS接口列表，如['onMenuShareTimeline','onMenuShareAppMessage']
  openTagList: [] // 可選，須要使用的開放標籤列表，例如['wx-open-launch-app']})複製代碼

其中 signature 簽名是須要從開發者服務器上去獲取。npm

獲取 signature 簽名的四個步驟：
步驟一：使用appId和appSecret獲取 access_token (一般是由開發者服務器全局緩存，有效期爲 7200 秒，獲取 accessToken)
步驟二：使用 access_token 獲取jsapi_ticket臨時票據
步驟三：用時間戳、隨機數、jsapi_ticket 和要訪問的 url 按照簽名算法拼接字符串；
步驟四：對第三步的字符串進行 SHA1 加密，獲得簽名。
注意事項：
1.簽名用的 noncestr 和 timestamp 必須與 wx.config 中的 nonceStr 和 timestamp 相同。
2.簽名用的 url 必須是調用 JS 接口頁面的完整 URL，但不包含#後面的。
詳情請移步這裏（微信 js-sdk 獲取簽名）小程序

步驟四：使用 ready/error 驗證成功與否

上面處理好以後，能夠經過 wx.ready 方法處理成功後的結果，wx.error 處理失敗後的結果。一般，若是打開了 debug，此時應該會出現 alert 彈窗，若是出現 config:ok 則說明配置成功。微信小程序

小提示：若是尚未帳號，在微信公衆後臺可申請微信測試帳號，能夠調用大部分的 js 接口。

使用 wx-open-launch-weapp 分享到小程序

在須要跳轉的地方使用 wx-open-launch-weapp 標籤，首先該標籤須要在 wx.config 的 openTagList 中進行註冊。
其中 username 是須要跳轉到的小程序原始 Id, 是以gh開頭的，非 wx 開頭的，（APP 分享到小程序也是使用 gh 開頭的 appId）。
path 是須要跳轉到小程序的指定頁面，非必填，默認跳轉到小程序的首頁。
須要注意的是，path必須帶有html，如小程序路徑：/pages/list, 這裏應該寫成/pages/list.html, 後面能夠用?拼接參數，參數能夠在 app.js,指定頁面的 onLoad, onShow 裏面拿到。

官方給的 demo 是下面這樣的，其中跳轉按鈕是用 template 標籤包裹，以插槽的形式存在。

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_XXXX"
  :path="path"
  >
  <template><img src="/images/live/mini-icon@2x.png" alt=""><span>微信小程序</span>
  </template></wx-open-launch-weapp><!-- path: `/packages/live/watch.html?liveId=XXX`-->複製代碼

爲了在瀏覽器上調試時能看到 wx-open-launch-weapp， vue 項目中能夠在 main 中加入下面這行代碼：

Vue.config.ignoredElements = ['wx-open-launch-weapp']複製代碼

然而上面這段代碼在真機上並無效果，多是與 Vue 中的 template 標籤衝突的緣由，因而將 template 改用 script 標籤的形式。

<script type='text/wxtag-template'>
  .icon{width: 55px;
    display: block;
    margin: 10px 0 10px 10px;
  }
  .title {
    font-size: 14px;
    margin-left: 14px;
  }
  <image class='icon' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAC+lBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8SkOAUkeEWkuEYkeEakuEck+EglOIjlOIlleImluInleIpluIql+Iql+Msl+MsmOMumOMwmOMxmeMzmuQ0m+Q1muQ2m+Q3nOQ5nOQ6neU8neU/nuU/n+VCoOVFoeZGouZIouZJo+ZJo+dKo+dKpOdMpOdNpOdOpeZQpuZRpudRp+dSp+dTqOdUp+dVqOdWqedYqehZquhbq+herOlfrelgrelgruljr+llsOpmseposeppsuprs+tts+tvtetxtux0t+x1t+x1uOx3ue15ue16uu17u+x8u+59vO2Ave2Cvu6Fv+6IwO6Lwu+Mw++PxPCQxfCRxfCSxvCTxvGWx/GXyPGYyfGZyfGbyvKcy/KdzPKfzPKhzfOjzvKq0vOr0/Ox1vWz1/W02PW42va52/a62va72/a83PbA3vbB3vbB3/bB3/fC3/fC4PfD4PfE4ffF4PfG4ffH4ffH4vfI4vjJ4/jK5PjL5PjM5fjN5PjP5vnQ5/nR5/nT6PrU6frV6frV6vrY6vrZ6/ra7Pvb6/vc7Pre7frf7vvg7/vl8fzm8fzn8vzo8/zp8/3r9f3v9v3v9v7w9/7x9/7x+P7y+P70+f/1+v72+v73+/74/P75+/77/f/8/f/9/v/+//////+CTNvLAAAAXnRSTlMAAQYHCBITFBUWFxgZGhwgIiMkJicoKSwtMzQ3OD5DREVcXWNkZWtsbnByc4SJiouQkZSVlpmam5ykpaansLGyvr/AyMnKy9fY29zd3+Dh4uPk7e7v8PHy8/T29/v9fke2jAAABPZJREFUGBm1wQ18zHUcB/DvGbspzJ4ybJhsppFpbZYba2ZbG9bV3c7Z7r5Reey5RHqgltGDp5Ke9KRnokTPzyIRJaIopedFT1pF0ef1yv3udnfj/7u7393/3m8KVVy37NzBpVUWO2C3VJUOzs3uFkd6SswyVUNDtSkrkXSR0rcSAVT2TaEIteldiqBKe7eh8CXn1yEkdfnJFJ6kM5wImXNQEqkz5jmgxJFnJDWGk61QZu1lIAXxJQhLSTyFLMOGMNkyKDQxAxGBgTEUghPLEJGydhRUp2pEqLoTBZFmQcQsaRRQuh06sKdTAF3t0MWoriSVWgOd1K***HszdGPuQJpalUJHpa1Iy0DoqpA0ZEBnGXSceBt0ZounYxjOhO5KDNRSL0RBJrUQey6iwBJL/k5DVOSRnyQHosKRRD6DECUm8kp2QtmuVfdef9UV0xctW9sEOWcKNSuAqjfnsNekp7+HVAF5GGuhZvuN3NJzkKk1ktspUPMSH2fe75DIIbcKKFnFGq45AG0VJHSGkvWs6SZIdCaXflDx9xj2OY99noe2fuRSCRXPssely9bt3f/T7jVT2eMPaKqkoxKg4sgkdnu8CW6HlrDbK9CWQERZUPEJuy2FTz0LC6Ati4iKoGI1CxfDz14WxkNbERGdDRUPsbAc/maxAG1mojgouYOFd+FvOQuQiKNuUHIbCzvgbyULkOhB2VByCws74G8uu5wPiWzKhZI5LGyHn49YmAmJXBoCJbNZ2Aaf7y5k4SlIFFM5lDSwsBVe6y5gt08hUU4jENyv3zbBYxYLH8KjcSl7XAuZkWRFMOvvG8eTX4dbPQtb4PbyWG72PmSsNAqBbZzLwjYIM1nYDOEZ9loMKTshoD8fYY9bIcxgYRNctrDX5QchRwhkz9XsdQQuM1jYAJf7udlljQiARkFuJ/vMhzCThQ1wWcEe835GAHayQqqRfeb/AqGehY1wOXAJu1z5KgKy0ghIzeBm89+BxywWNkHY/2h9w2NvH0JgI6kcMmvZY/p78Gpg4QMoKKchkFnIbov+gc9sFjZDQTHlQmY8C9fB3xwWPoaCAZQNGXbbCH+3s7ATCrKpO2TGsMu4g/A3l4XPoaAHxUFmMrtcdBj+bmZhDxScQGSGxA0s/AA/hyey8A1CZyaiIkgsYWE1/OxkYWwTQldERFmQeI2Fif/BZyELDVDQm4gSINHIbg/A60V2ewEKEuioKkgsYLcn/oWw70n2+A2hqyKXUyGxiz2mrdr25e43HhzLHiuhoB+5dIbMPaxpKlR0IaECEn9NZC0/QsFZ5JYDma9Yw2dQkUNuxlrI7JrAx5jyBVTUGsmjAFL77uIWHm6CkgJqluKE3FsN7LV4K9Q4TyIvEwLZvuLOKeMnTLt7zddQZSKfJAeiwpFMfvIQFaeTv1gLosAaSy1kIgoyqSVDCXRXYqBjxNugM1s8HScDOutJGgqhq0LSEjMMOiqPIU0dzNCNuQNJpNZAJzWpJJVmhy7saRRAuh06sKdTQGlWRMyaRkGkViNC1akUVLsyRKSsPYWgdSEiUNiaQpNhQ5hsPSlkHYciLEM7kgJDphXKrJkGUmPMc0CJI89I6pIHOREypymZwpOcX4eQ1OWnUPjicioQVEVOHEWoS/9KBFDZvwvpIjHLZIaGc0xZiaSntt37DCgeNtwyGhhtGT6seECf7m0pRP8DNlHuGV5JPV0AAAAASUVORK5CYII='></image>  <view class='title'>小程序</view></script>複製代碼

注意：在 script 標籤裏面，與頁面是隔離的，而且要按照小程序的寫法來寫，如上面使用的 view 標籤，同時圖片文件須要用 base64 的形式。另外樣式也要寫在 script 標籤裏面，以 style 的形式寫。若是是在彈窗裏面寫的，還須要注意層級問題。

若是出現下面的彈窗，說明成功啦。但也要確保是否爲所指定頁面。

總結

使用wx-open-launch-weapp標籤跳轉到小程序，與使用微信JS-SDK是相似的，須要配置config信息，並引入wx-open-launch-weapp標籤。
只有已認證的服務號且綁定域名或者已認證的小程序雲開發靜態託管的域名下的網頁才能夠跳轉，訂閱號目前不支持。

問題排查：沒效果/報錯？

1.打開wx.config的debug, 根據報錯信息一步步處理，直到出現config:ok；

2.出現組件未註冊的報錯，在app.js裏面配置Vue.config.ignoredElements = ['wx-open-launch-weapp'];
3.真機上按鈕不顯示？wx.config中是否有注入？template標籤衝突？層級樣式問題？

4.樣式問題？若是是vue項目，style也要寫在script標籤內，若是是其餘，用template包裹的，樣式寫在html標籤上

5.跳轉失敗？使用wx-open-launch-weapp標籤中的lanch或error方法判斷跳轉成功與否

6.兼容問題？vue項目使用history路由，在ios上不生效？
緣由：ios下微信會緩存第一次進入的頁面地址，若是從微信一級頁面跳轉到二級頁面，因爲vue是單頁應用，不會刷新頁面，vue路由地址變了，和微信緩存的地址不一致，因此在進行wxConfig時傳入的url和微信緩存的url不一致會致使jsdk調起失敗，進而致使 wx-open-launch-weapp 沒法生效。
解決：

// 刷新一下當前頁面reloadPage() {  if(!this.isIos) return;  const currUrl = location.href;  const isReload = currUrl.indexOf("?reload=1") > -1 ? true : false;  if (!isReload) {
    location.replace(currUrl + "?reload=1");
  }
},複製代碼