記錄一下踩坑的過程。
一共兩篇：
- 關(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>
