Vue開發微信公衆号網頁跳轉小程式

需求描述：Vue開發的公衆号網頁，點選圖示跳轉小程式

公衆号中跳轉小程式，一般是配置菜單欄跳轉即可，但是我們需要在頁面中跳轉，就需要微信的開放标簽了

微信開放标簽說明文檔

此文檔面向網頁開發者，介紹微信開放标簽如何使用及相關注意事項。需要注意的是，微信開放标簽有最低的微信版本要求，以及最低的系統版本要求。

微信版本要求為：7.0.12及以上

系統版本要求為：iOS 10.3及以上、Android 5.0及以上

話不多說，上代碼

HTML模闆

<!-- 
          username: 小程式原始ID
          path： 小程式首頁路徑
    -->
    <wx-open-launch-weapp
      id="launch-btn"
      username="**********"
      path="pages/index/index"
      @click="jumpProgam"
    >
      <!-- Vue項目模闆type值必須為text/wxtag-template -->
      <script type="text/wxtag-template">
        <style type="text/css">
            <!-- 書寫樣式 -->
            .text{}
        </style>
        <div class="text">點我打開小程式</div>
      </script>
    </wx-open-launch-weapp>
           

JS

<script>
// 頁面全局聲明一個對象用于存儲配置參數，友善多次調用
var config = {};
export default {
  data() {
    return {};
  },
  created() {
    // 頁面加載時，執行一次，不然開放标簽包裹的模闆顯示不了
    this.renderCode();
  },
  methods: {
    renderCode() {
      let that = this;
      let obj = {
        url: location.href,
        jsApiList: ["wx-open-launch-weapp"],
      };
      // 請求接口，擷取wx.config()配置參數
      get("api/login/get_jssdk_config", obj).then((res) => {
        if (res.code == 200) {
          config = res.data;
          wx.config(config);

          wx.ready(function () {
            // config資訊驗證後會執行ready方法，所有接口調用都必須在config接口獲得結果之後，config是一個用戶端的異步操作，是以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確定正确執行。對于使用者觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
            var btn = document.getElementById("launch-btn");
            btn.addEventListener("launch", function (e) {
               alert("打開成功");
            });
            btn.addEventListener("error", function (e) {
              alert("打開失敗");
            });
          });
        }
      });
    },
  },
};
</script>
           

總結

1. 微信開放标簽
2. Vue項目模闆type值必須為text/wxtag-template
3. 頁面加載時，先執行wx.config()

新手上路，如有錯誤，勞請評論指出，謝謝！