核心内容:wx-open-launch-app标签
首先在需要使用的h5页面引入
<script src="//res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
引入之后在页面内使用标签
<wx-open-launch-app id="openApp" appid="所需跳转的移动应用的AppID" @click='launchClick' @error="waitJump">
<script type="text/wxtag-template">
<style> </style>
<view class="btnBox">
<view class="title">打开APP</view>
</view>
</script>
</wx-open-launch-app>
使用之后查看页面发现没有出现按钮,那么马上就要进入第二大重点了
页面内全局使用
const jweixin = require('jweixin-module');
getConfig(res) {
jweixin.config({
debug: true, //调试模式
appId: '', //必填,公众号的唯一标识
timestamp: res.timestamp,
nonceStr: res.noncestr,
signature: res.signature,
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'hideMenuItems',
'chooseImage',
],
openTagList: ['wx-open-launch-app']
});
},
参考概述 | 微信开放文档文档,拿到上述参数,最好由后端返回
调用之后发现跨域,ok,进入第三步
在微信服务号里设置IP白名单以及JS接口安全域名,并且关联被打开的APPID
设置好之后用设置的安全域名进行调试,这样就不跨域了
全部设置好之后并且接口调通之后你会发现,wx-open-launch-app里的东西已经展示在页面上了,剩下的就是点击,如果APPID配置正确并且手机安装了需要打开的APP的话,点击标签是可以正常打开的,那么没有安装或打开失败的情况下需要有备用方案,我们的方案是打开应用市场
wx-open-launch-app 标签有@error=""属性,这个就是打开失败的回调
waitJump() {
if (uni.getSystemInfoSync().platform === 'android') {
window.location.replace(``) //安卓备用方案
} else {
window.location.replace(``) //IOS备用方案
}
},
顺便一提:真机查看的时候打开链接是无效的,只能通过分享卡片才能打开