記錄vue3（vue2 也通用）在微信公眾號網頁開發中，跳轉微信小程序的踩坑：
步驟一：使用微信JSSDK
微信JSSDK官方說明，估計找到這篇文章的都看了文檔。
不多說，在這個步驟中，后端和前端都有各自的事情做，我分別講解各自的責任：
前端責任
引入js文件，直接在 index.html 中引用就成：
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
引入過后，你當前的瀏覽器環境會有一個全局變量wx（直接wx訪問，或者window.wx、globalThis.wx都是可以的），但是這個變量不能馬上用，必須你將當前網頁的路徑（不包括#號以及后面的路徑，包括#號前面的那個斜杠 / ）傳給后端，后端根據你傳的路徑返回給你 appId、timestamp、nonceStr、signature，然后根據這些參數調用 wx.config，進行wx的初始化：
wx.config({
debug: true, // 調試的時候打開
appId: '', // 后端的事情
timestamp: '', // 后端的事情
nonceStr: '', // 后端的事情
signature: '',// 后端的事情
jsApiList: [] ,// 需要的能力，比如拍照、獲取信息等等，跳轉小程序不需要
openTagList:[] // 能夠使用的標簽，也就是HTML標簽，只不過是微信自定義的。
});
有哪些標簽，看這里。
由於跳轉小程序需要一個微信自定義的標簽wx-open-launch-weapp，所以上面的配置中的 openTagList 我是這樣的：
openTagList:[`wx-open-launch-weapp`]
配置后，就可以在微信中網頁中使用了
后端責任
我簡單講解：
保證微信開發是服務號，而不是訂閱號，因為只有服務號才能小程序跳轉。
首先得后端綁定域名，向微信平台獲取訪問憑證access_token，根據這個憑證再次訪問微信平台得到jsapi_ticket。
然后，根據前端傳來的路徑基於jsapi_ticket進行加密，加密請看微信JSSDK官方說明。
注意，vue開發的網頁，基本都是單頁面應用，比如 http://aa.baidu.com/#/aa，那么后端需要的路徑就是：http://aa.baidu.com/，注意需要最后的/是需要的，這是我踩的坑，不然前端配置初始化會失敗。所以，單頁面應用寫死路徑也可以。
還有路徑寫死的話，前端就不能在本地開發了，比如以http://localhost:8080/#/home這種，那前端也會失敗。所以可以內網穿透，並代理前端的內網地址，將代理的域名添加白名單，然后以域名的形式訪問進行調試，就可以了。
步驟二、跳轉小程序
wx配置后，就可以使用微信內置的HTML標簽了，官方的示例是這樣的：
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index?user=123&action=abc"
>
<script type="text/wxtag-template">
<style>.btn { padding: 12px }</style>
<button class="btn">打開小程序</button>
</script>
</wx-open-launch-weapp>
在vue2中可以用v-html渲染。但是在vue3中會編譯出錯，因為在 vue 的 template 中，不允許 script 和 style 出現。而 wx-open-launch-weapp 會有警告，但是可以渲染。
我們需要vue跳過對內部 script 和 style 的渲染：
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index?user=123&action=abc"
>
<div v-is="script" type="text/wxtag-template" style="display: block">
<div v-is="style" style="display: block">.btn { padding: 12px }</div>
<button class="btn">打開小程序</button>
</div>
</wx-open-launch-weapp>
v-is 會將其渲染成指定標簽,但是vue 3.1.0版本已經廢棄，將 v-is 替換成 is 就可以了,比如上面的樣式在高版本的vue3中可以這么寫：
<div is="style">.btn { padding: 12px }</div>
常見問題：
- 樣式不出現，設定的div或者按鈕不出現，注意上面的設置
style="display: block"，這個是必須的，不然其渲染生成的會默認display: none - 按鈕點擊沒有反應，注意
wx.config后會在控制台輸出信息：
，注意到只有 jsApiList，而沒有 openTagList ，或者只是一個空數組，沒有["wx-open-launch-weapp"]。注意這個功能只有服務號才有，訂閱號是沒有的。 - 不能用測試號小程序id，必須已經正式發布的小程序id