關(guān)于 React 中使用 wx-open-launch-weapp 喚起微信小程序

配圖源自 Freepik

記錄一下踩坑的過程。

一共兩篇:

最近在做一個中秋國慶活動項目,然后有一個需求是:在 H5 頁面中喚起微信小程序

在前段時間,微信 JSSDK 開放了該接口 <wx-open-launch-weapp> ,當(dāng)然了僅限于微信瀏覽器內(nèi)喚起小程序。?? 官方文檔在這里

一、此功能的開放對象:

重要:一定要滿足,不然就渲染不出來,就是加了代碼,在真機也顯示不出來的。

  • 已認證的服務(wù)號,服務(wù)號綁定“JS接口安全域名”下的網(wǎng)頁可使用此標簽跳轉(zhuǎn)任意合法合規(guī)的小程序。
  • 已認證的非個人主體的小程序,使用小程序云開發(fā)的靜態(tài)網(wǎng)站托管綁定的域名下的網(wǎng)頁,可以使用此標簽跳轉(zhuǎn)任意合法合規(guī)的小程序。

我遇到的坑就在這里,我一直以為生產(chǎn)環(huán)境與測試環(huán)境都是用了同一個公眾號。后面問了后端的同事才知道,原來測試環(huán)境是用了一個私人公眾號,不滿足上述條件,所以在測試環(huán)境搗弄了半天也沒弄出來! ??

二、版本要求

微信 JS-SDK 版本:1.6.0 及以上。
微信版本要求為:7.0.12 及以上。
系統(tǒng)版本要求為:iOS 10.3 及以上、Android 5.0 及以上。

切記:要真機上才有效果,微信開發(fā)工具也是看不到的哦!

三、wx.config

注意標簽,別弄錯了!

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

*這里我看過某個帖子說,即使不用 jsApiList: [] 也要配置一項,wx.config() 才能生效。因為我項目本身就有使用它,所以我沒有去驗證。可通過 debug: true 來驗證 wx.config() 是否成功。

前提是這個配置成功了,后續(xù)的功能才能實現(xiàn)。

四、<wx-open-launch-weapp>

屬性注意一下:

  • username(必填):所需跳轉(zhuǎn)的小程序原始 id,即小程序?qū)?yīng)的以 gh_ 開頭的 id。(非小程序 APPID)
  • path(非必填):所需跳轉(zhuǎn)的小程序內(nèi)頁面路徑及參數(shù)。( 對于path屬性,所聲明的頁面路徑必須添加.html后綴,如pages/index/index.html

以下是使用 React 的寫法,其他的框架或庫我沒特意去寫過,可以參考 ?? 官方文檔。但看官方文檔要帶一雙慧眼,開放初期官方示例似乎語法有錯誤,現(xiàn)在似乎修復(fù)了,反正認真檢查一下就好了。

React 中不支持直接寫 <template /> 標簽,需要使用 <script type="text/wxtag-template /> 替換。或者考慮使用 dangerouslySetInnerHTML

<div style={{ position: 'relative', width: '6.3rem', height: '2.46rem' }}>
  <div>這里寫你喚起小程序的頁面元素</div>
  <wx-open-launch-weapp
    id="launch-btn"
    username="gh_****"
    path="/pages/index/index.html"
    style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
  >
    <script type="text/wxtag-template">
      <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', opacity: 0 }} />
    </script>
  </wx-open-launch-weapp>
</div>

五、References

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。