記錄一下踩坑的過程。
一共兩篇:
- 關(guān)于 React 中使用 wx-open-launch-weapp 喚起微信小程序,里面有詳細介紹,并給出完整的示例。)
- wx-open-launch-weapp 樣式問題
最近在做一個中秋國慶活動項目,然后有一個需求是:在 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>