最近研究H5跳转小程序偶然发现了wx-open-launch-weapp这个标签,可以在微信浏览器中直接打开小程序,抱着激动的心情试了一下,
按照官方的写法写了之后一运行,want,显示不出来,于是找遍各种文档,终于找到了解决方法。
本方法是在HTML页面中使用的,vue估计也差不多,区别不会太大
首先是要引入微信sdk的,最低都需要1.6.0以上的版本
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript" charset="utf-8"></script>
其次,我引入了jq,因为需要发送ajax请求
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
下面是js代码
$.ajax({
url: "后台给的链接",
data: {
local_url: window.location.href.split('#')[0],
version: '4.1.0',
appKey: 'QTSHE_WECHAT',
deviceId: Math.random()
},
success(res){
let data = JSON.parse(res);
wx.config({
debug: true,
appId: '公众号的APPId',
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'translateVoice',
'startRecord',
'stopRecord',
'onRecordEnd',
'playVoice',
'pauseVoice',
'stopVoice',
'uploadVoice',
'downloadVoice',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',
'scanQRCode',
'chooseWXPay',
'openProductSpecificView',
'addCard',
'chooseCard',
'openCard'
],
openTagList: [
'wx-open-launch-weapp',
'wx-open-launch-app'
]
});
}
});
.btn {
width: 100%;
height: 100px;
padding: 12px;
font-size: 16px;
}
<div style="width: 100%; height: 100px">
<wx-open-launch-weapp id="launch-btn" username="需要跳转的小程序的原始id" path="/pages/index/index.html">
// 官方例子上面是template,但是由于我是在html文件内,所以改成script标签,type="text/wxtag-template"不能漏掉
<script type="text/wxtag-template">
<style>
.btn {
width: 375px;
height: 50px;
font-size: 16px;
}
</style>
<button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>
</div>