記錄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.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進行加密，加密觀看文件。
注意，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