VUE项目中使用wx-open-launch-weapp跳转小程序
前提：微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。
步骤如下
1.安装微信jsdk,并在页面中使用引入。jsdk版本不低于1.6.0
// package.json
"dependencies": {
"weixin-js-sdk": "^1.6.0"
},
//test.vue
<template>
<div> </div>
</template>
<script>
import "weixin-js-sdk"; // 引入wx-jsdk
export default {
}
</script>
2.通过config接口注入权限验证配置并申请所需开放标签
// test.vue
created(){
this.setWxConfig();
}
methods: {
setWxConfig(){
const that = this;
const appid = this.appid;
const url = window.location.href; // 注意这里，我的项目中路由模式用的是history模式
console.log(appid, url);
// 注意这里是调用接口获取到微信配置相关参数的
that.$api.getJsApiConfig({ appid: appid, jsurl: url }, res => {
const config = res;
wx.config({
debug: false, // 开启调试模式,
appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.nonceStr, // 必填，生成签名的随机串
signature: res.signature, // 必填，签名，见附录1
jsApiList: [
"checkJsApi",
"openLocation",
"getLocation",
"closeWindow",
"scanQRCode",
"chooseWXPay",
"chooseImage",
"uploadImage",
"previewImage",
"getLocalImgData"
], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
openTagList: ['wx-open-launch-weapp'] // 这里要配置一下
});
});
}
}
3.在页面中添加wx-open-launch-weapp标签
<template>
<div>
<wx-open-launch-weapp
id="launch-btn"
username="小程序原始id"
path="/pages/index/index.html"
@launch="launchHandle"
@error="errorHandle"
>
<script type="text/wxtag-template">
<style>.btn { padding: 12px; border: 1px solid red; }</style>
<button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>
</div>
</template>
4.解决vue中报wx-open-launch-weapp组件未注册的问题
// main.js
Vue.config.ignoredElements = ['wx-open-launch-weapp'];
5.将代码上传至服务器，在真机上查看(微信开发者工具中无效果)
总结以下几个注意点
1.wx.config接口中配置openTagList项
2.需要真机调试，开发者工具无效
3.<wx-open-launch-weapp>标签中的path再设置小程序路径时必须加上“.html”
4.跳转小程序按钮在vue项目中需要放在<script type="text/wxtag-template"></script>内，样式也要写在该标签内。如下：
<script type="text/wxtag-template">
<style>.btn { padding: 12px; border: 1px solid red; }</style>
<button class="btn">打开小程序</button>
</script>
5.当vue路由为history模式时，ios手机上兼容问题(这个是和微信缓存机制相关)
原因：ios下微信会缓存第一次进入的页面地址，如果从微信一级页面跳转到二级页面，
由于vue是单页应用，不会刷新页面，vue路由地址变了，和微信缓存的地址不一致，
所以在进行wxConfig时传入的url和微信缓存的url不一致会导致jsdk调起失败，进而导致<wx-open-launch-weapp>无法生效
解决办法：
// 刷新一下当前页面
reloadPage() {
if (!this.$utils.isIOS()) return;
const currUrl = location.href;
const isReload = currUrl.indexOf("?reload=1") > -1 ? true : false;
if (!isReload) {
location.replace(currUrl + "?reload=1");
}
},
