官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#11
1、引入js文件(最好使用https引入,否则ios开放标签不出)
在需要调用 JS 接口的页面引入如下 JS 文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)
如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)
2、申请开放标签(不申请用不了)
wx.config({
debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来,若要查看传入的参数,可以在 pc 端打开,参数信息会通过 log 打出,仅在 pc 端时才会打印
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名(签名最好后端生成。将动态获取到的,不包括#及后面参数的url,传递给后端,返回签名)
jsApiList: ['chooseImage', 'previewImage','wx-open-launch-app','onMenuShareTimeline','onMenuShareAppMessage','checkJsApi','scanQRCode'], // 必填,需要使用的 JS 接口列表(酌情配置,不可为空)
openTagList: ['wx-open-launch-app'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});
//检查开放标签是否申请成功
wx.ready(function (res) {
console.log("ready1>>>",res)
});
wx.error(function (res) {
console.log("error1>>>",res)
});
//点击开放标签,成功的事件 与 失败的事件
var btn = document.querySelector("#launch-btn")
btn.addEventListener('launch', function (e) {
console.log('success>>>',e);
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
alert(e.detail.errMsg)
//找不到app,跳转下载页
const u = navigator.userAgent;
const iOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (iOS) {
window.location.href=""
} else {
window.location.href = ""
}
});
3、页面上使用
<!-- 此处appid为绑定安全域名的开发id,详见官方文档 -->
<wx-open-launch-app
id="launch-btn"
appid="your-appid"
extinfo="your-extinfo"
>
<template>
<style>.btn { padding: 12px }</style>
<button class="btn">App内查看</button>
</template>
</wx-open-launch-app>
注意事项:
1、开放标签只能绑定已认证的服务号,只能在微信真机上测试。
2、error
事件返回值errMsg
说明如下。
errMsg | 说明 |
---|---|
"launch:fail" | 当前场景不支持跳转,或 Android 上该应用未安装,或 iOS 上用户在弹窗上点击确认但该应⽤未安装 |
"launch:fail_check fail" | 校验 App 跳转权限失败,请确认是否正确绑定AppID |
3、开放标签出不来,照官方文档 附件5 检查错误。
4、后端生成签名见 附录1-JS-SDK使用权限签名算法
可以通过工具验证签名是成功