Vue使用wx-open-launch-weapp跳转小程序

官方文档

代码如下

<div class="launchbox">
    <wx-open-launch-weapp id="launch-btn" username="跳转小程序id" path="跳转地址" //pages/park/home @launch="onLaunch"
        @error="onError" style="width:3.45rem;margin:0  0.15rem;">
        <script type="text/wxtag-template">
         <style>
             html {
                 font-size: 100px;
             }
             body {
                 font: 0.14rem/1.5 Arial, 'Microsoft Yahei';
             }
             .vippay-btn{
                 width:100%;
                 height:0.41rem;
                 line-height: 0.41rem;
                 background:linear-gradient(90deg,#e8cda5, #d4b385 );
                 border-radius:20px;
                 font-size: 0.18rem;
                 color: #fff;
                 background-size: contain;
                 text-align: center;
                 border:none;
             }
         </style>
         <button class="vippay-btn">跳转小程序</button>
      </script>
    </wx-open-launch-weapp>
</div>
created() {
    this.vippay();
    onLaunch(e) {
        console.log(e);
    },
    onError(e) {
        console.log("fail", e);
    },
},
methods: {
    vippay() {
        getJump({ //getJump是请求接口
            url: "当前页面的url"
        }).then(res => {
            if (res.data.success == true) {
                var info = res.data.data;
                wx.config({
                    debug: false, //是否开启debug
                    appId: info.appId, //必填，公众号的唯一标识
                    timestamp: , // 必填，生成签名的时间戳
                    nonceStr: '', // 必填，生成签名的随机串
                    signature: '',// 必填，签名
                    jsApiList: [], // 必填，需要使用的JS接口列表
                    openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
                });
                wx.ready(() => {
                    console.log("ready");
                    //config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
                });
                wx.error(res => {
                    console.info("开始error", res);
                    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
                });
            }
        });
    },
}

记得引入和挂载

 <script type=text/javascript src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

Vue.config.ignoredElements = ['wx-open-launch-weapp']

注意事项

1.页面中不要引入http-equiv=“Content-Security-Policy”，会导致安卓不显示
2.至于ios第一次不刷新，直接在created里调用location.reload()就好了