1)首先是在index.html中引进微信sdk
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
2)在该h5的vue里,如果h5页面可能会存在多种环境里,那么首先还需要判断微信h5网页环境: isWeixinH5
(如果确定该h5页面只会存在微信网页中,那么可以不用判断)
export const isWeixinH5 = () => {
let ua = navigator.userAgent.toLowerCase()
return ua.indexOf('micromessenger') > -1
}
注意微信按钮的style不好调整,所以我们将它设置为宽度100%,高度适合的一条透明按钮,再将自己所需要的按钮样式写在同样的位置。
<div style="position: relative;width: 100%;height: 3rem;" v-if="isWxBtn && isWeixinH5 ">
//需要的按钮样式,以绝对定位放在微信跳转按钮的相同位置
<van-button style="position: absolute;top:1rem">打开小程序</van-button >
//微信跳转按钮
<wx-open-launch-weapp
style="position: absolute;top: 0"
id="launch-btn"
username="原始id" //注意不是小程序id,是原始id
:path="wx_path"
v-if="isWxBtn">
<script type="text/wxtag-template">
<style>.mini-btn {
width:100%;
margin: 24px auto;
height: 3rem;
opacity: 0}</style> //设置透明度为0
<p class="mini-btn"></p>
</script>
</wx-open-launch-weapp>
</div>
data () {
return {
isWxBtn: false, // 打开微信小程序按钮
wx_path: 'pages/tab1/tab1?toPath=weixinPath',//跳转小程序的位置和参数(如果小程序是内嵌h5,可以通过该参数判断,进行跳转到指定页面)
token: localStorage.getItem('token'),
userId: localStorage.getItem('userId'),
}
},
3)在created阶段发起微信验证
created () {
localStorage.setItem('userId', this.$route.query.userId)
this.userId = this.$route.query.userId//userId需要才h5地址中传过来,并存储
this.wx_path = this.wx_path + '&token=' + this.token
this.getWxConfig()//发起微信验证的接口请求
},
后端验证接口: getSign
(验证接口测试最好在线上测试)
export const getSign = (data = {}) => {
return request({
url: '后端验证接口地址',
method: 'post',
data: data
})
}
methods: {
getWxConfig () {
let that = this
let url = window.location.href.split('#')[0]
const query = {
webUrl: url,
userId: this.userId
}
getSign(query).then(res => {
wx.config({
debug: false, // 验证结果弹窗控制,微信环境可能会因为接口安全问题出现失败弹窗,所以直接设置的false,
appId: res.data.appId, // 公众号唯一appid
nonceStr: res.data.nonceStr,
timestamp: res.data.timestamp,
signature: res.data.signature,
jsApiList: ['scanQRCode'],//随便填写的一个
openTagList: ['wx-open-launch-weapp']
})
wx.ready(function (success) {
that.isWxBtn = true //表示验证成功
console.log('success', success)
})
wx.error(function (err) {
Toast.fail('暂不支持',error);
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
console.log('error', error)
})
})
},
}
4)如果是内嵌h5的小程序,需要跳转到指定页面,则在小程序的项目里找到之前:path中跳转页面的js文件
onLoad: async function (options) {
...
if(options.toPath == "weixinPath"){
this.setData({
url: `${configApi.jump_url}/需要跳转的地址xxx?${str}`, //str是小程序项目需要的一些用户参数,按照自己的小程序决定
});
}
}
...
以上是微信h5页面跳转小程序的代码喔~