vue中H5跳转微信小程序 wx-open-launch-weapp

vue中H5跳转微信小程序 wx-open-launch-weapp

1、先请求接口配置微信需要的一些参数

getShopWxConfig() { let that = this; let url = window.location.href; console.log('urlaaaaaaaaaaaaaa', url); //getWechatConfig为请求后台接口 getWechatConfig(url).then(res => { console.log('res1111111111', res); wx.config({ debug: true, appId: res[1].appId, nonceStr: res[1].nonceStr, timestamp: res[1].timestamp, // url: res[1].url, signature: res[1].signature, openTagList: ['wx-open-launch-weapp'], jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage', 'checkJsApi', 'scanQRCode', ], // 必填，需要使用的JS接口列表 }); wx.ready(function () { console.log('res44444444'); }); wx.error(function (err) { // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 console.log('err44444444', err); }); }); },

配置的方法需要放到created、mounted或者beforeRouteEnter里

async mounted() { // this.appSource() await this.getShopWxConfig(); },

2、在页面中添加wx-open-launch-weapp标签

<div class="home"> <wx-open-launch-weapp id="launch-btn" :username="username" :path="path" @launch="handleLaunchFn" @error="handleErrorFn" > <script type="text/wxtag-template"> <style> .ant-btn { line-height: 1.499; position: relative; display: inline-block; font-weight: 400; white-space: nowrap; text-align: center; background-image: none; border: 1px solid #d9d9d9; -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.015); box-shadow: 0 2px 0 rgba(0,0,0,0.015); cursor: pointer; -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1); transition: all .3s cubic-bezier(.645, .045, .355, 1); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: manipulation; touch-action: manipulation; height: 32px; padding: 0 15px; font-size: 14px; border-radius: 4px; color: rgba(0,0,0,0.65); background-color: #fff; } .ant-btn-red { color: #fff; background-color: #FF5A44; border-color: #FF5A44; text-shadow: 0 -1px 0 rgba(0,0,0,0.12); -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.045); box-shadow: 0 2px 0 rgba(0,0,0,0.045); } </style> <button class="ant-btn ant-btn-red">{{ btnText }}</button> </script> </wx-open-launch-weapp> </div> data() { return { username: 'gh_xxxxxxxxxxxx', // gh_ 开头的原始小程序ID path: 'pages/index/index.html', // 一定要以 .html 结尾 btnText: '我的小程序', }; }, handleLaunchFn(e) { console.log('success', e); }, handleErrorFn(e) { console.log('fail', e.detail); },

3.使用该标签的时候可能会报错，在main.js文件中添加上该行代码即可

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