1.进页面判断环境
let ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/Alipay/i) == "alipay") {
//支付宝
this.isBrowser = true;
} else if (ua.match(/MicroMessenger/i) == "micromessenger") {
//微信
this.isBrowser = false;
} else {
//普通浏览器
this.isBrowser = true;
}
2.微信环境调用wx sdk
npm install weixin-js-sdk --save
import wx from 'weixin-js-sdk'
3.请求后端验签得到配置参数
传给后端当前url进行验签,#号后的字符串不要
let url = window.location.href;
let newUrl = url.substring(0, url.indexOf('#'));
4.拿到参数后添加jsApiList和openTagList,配置wx-sdk环境
config.jsApiList = ['scanQRCode'];
config.openTagList = ['wx-open-launch-weapp'];
wx.config(config);
wx.ready(function() {
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中
});
5.template里的html
<wx-open-launch-weapp id="launch-btn" :username="username" :path="path">
<script type="text/wxtag-template">
<style>
.open-btn {
margin-top: 100px;
background-color: #4CAF50;
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
border-radius: 15px;
width: 200px;
height: 50px;
line-height: 50px;
}
</style>
<button class="open-btn">打开小程序</button>
</script>
</wx-open-launch-weapp>
username:小程序初始ID,要去小程序平台找
path:跳转路径,根据当前href判断跳转路径