微信 h5頁面 跳轉微信小程序 wx-open-launch-weapp注意事項

請確保小程序是已認證的非個人主體的小程序，已認證的服務號“JS接口安全域名” 已經綁定。

問題：按照官方文檔寫的樣式沒有出現

文檔用例：

<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/home/index.html?user=123&action=abc" > <template> <style>.btn { padding: 12px }</style> <button class="btn">打開小程序</button> </template> </wx-open-launch-weapp>

使用內聯樣式可以解決這個問題。

<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/home/index.html?user=123&action=abc" style="內聯樣式" > <template> <button class="btn" style="內聯樣式">打開小程序</button> </template> </wx-open-launch-weapp>

問題：靜態h5頁面好用，使用vue就沒有效果。

修改 標簽。更換為 <script type="text/wxtag-template">

<script type="text/wxtag-template"> <button class="btn">打開小程序</button> </script>

問題：按鈕真機不出現 微信開發者工具里面出現點擊沒有作用

1. 檢查config注入是否成功

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

2. 注意：所有必填項必須填寫，否則無效

   如果你的config注入成功，debug: true, 時，會有彈窗提示注入成功。

3. 檢查所有必填項 jsApiList 也為必填項，不能因為沒有用到這項就不填寫**，要在微信提供的 jsApiList所有可選項的表里面填一個，這個方法需要使用。在wx.ready{}中調用一下**

4. openTagList 這個值要是 wx-open-launch-weapp 不是 wx-open-launch-app。

   wx-open-launch-app 是 app 里面的用法。

5. 樣式中的大小最好使用 px 單位。

6. 在jsApiList 中選擇的方法要在這里使用下，結果不重要，沒有使用可能會導致引入不正確。

   wx.ready(function () { // config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中 }); 

確定 config注入的時候 所有必填項的值都正確。

appId

是 以 

wx

開頭的值。

• 跳轉的頁面需要有后綴 html

• 不要使用 pc 的瀏覽器查看頁面的效果，請用微信開發者工具查看，否則可能會有網絡錯誤。

  出現 config：invalid url domain 錯誤的時候，放置在統一域名下運行。

問題：按鈕不出現。

1. 要在微信瀏覽器中打開，不要再 pc 的瀏覽器中打開。
2. 檢查 config 是否注入成功。
3. 把頁面放到小程序相同域名下。

根據手機微信頁面彈出的錯誤提示進行查詢。