vue h5跳转到跳转小程序

<template>
   <div>
       this is a demo -- 014
       <div class="home">
           <wx-open-launch-weapp
                   id="launch-btn"
                   :username="username"
                   :path="path"
           >

           <script type="text/wxtag-template">
               <style>.btn { display: flex;align-items: center;padding: 12px;margin-left:30px;color:red;}</style>
               <button class="btn">h5打开小程序</button>
           </script>
           </wx-open-launch-weapp>
       </div>
   </div>
</template>


<script>
   //引用Jssdk文件
   const wx = require("jweixin-module");
   export default {
       name: "Applet",
       components:'',
       data() {
           return {

               username: 'gh_732aef12e391', // gh_ 开头的原始小程序ID
               path: 'pages/index/index.html', // 一定要以 .html 结尾
               btnText: "物社体验版",
               id: '',
               appId:'',
               htmlBag:'',

           }
       },

       created() {
       },
       methods: {
           ToMiniapp() {


               window.axios
                   .get("/SmallAPP/index/get_sign", {
                       params: { url: window.location.href.split("#")[0].toString()}
                   })
                   .then(({ data }) => {
                       wx.config({
                           debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
                           appId: data.appId, // 必填，公众号的唯一标识
                           timestamp: data.timestamp, // 必填，生成签名的时间戳
                           nonceStr: data.nonceStr, // 必填，生成签名的随机串
                           signature: data.signature,// 必填，签名，见附录1
                           jsApiList: [
                               'updateAppMessageShareData', 'updateTimelineShareData', 'scanQRCode', 'getLocation', 'openLocation', 'chooseImage', 'previewImage', 'getLocalImgData'
                           ], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                           openTagList: ["wx-open-launch-weapp"]
                       });

                       wx.ready(function (res) {
                           // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
                           console.log(res)
                       });

                       wx.error(function (res) {
                           console.log(JSON.stringify(res))
                       });

                   })
                   .catch(err => {
                       console.log(err)
                   });
           },

       },
       mounted() {
           //这个要有
           this.ToMiniapp();

           var btn = document.getElementById("launch-btn");
           btn.addEventListener("launch", function (e) {
               console.log("success");
           });
           btn.addEventListener("error", function (e) {
               alert("小程序打开失败");
               console.log("fail", e.detail);
           });



       }

   }
</script>