微信开放标签wx-open-launch-app
2023-02-16 本文已影响0人
博尔茨杰
一、介绍
微信开放标签地址
微信 JS 接口签名校验工具
参考网址
1 该标签做什么用的?
在微信内置浏览器端打开App,简单说就是在微信端打开某网页,可以在网页中打开App;
- 注:打开的网页不能是通过链接进入,而是通过分享的卡片等形式。
2 需求
需求是:通过App分享到微信的卡片,用户打开后,可以点击网页中的某个按钮,如果App存在,则打开该App,并进入指定的页面。App不存在,则进入应用市场的下载页面;
3 前期准备
首先本人通过创建一个简单的HTML页面,App分享到微信端。
配置相关:
- 服务号需要认证!且服务号和移动应用是同主体,或者有关联关系!
- 绑定JS接口安全域名:在微信号后台操作;绑定的域名是分享到微信端的网页的域名。
- 在微信开放平台的应用管理--公众号,关联需要跳转的App。
填写的信息包含:安全域名,移动应用名称,Appid;具体信息视实际情况哈!
以上是开发前的配置准备。
- 本人开发的思路:客户端页面在初始化时请求服务端中的接口,将网页的url及参数传给该接口(之前就因为网址写死导致一直没有调通),服务端获取到url进行签名算法,回传给客户端签名,时间戳等参数,客户端通过config接口进行权限验证,验证成功后,开放标签便生效。
二、网页代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>微信跳转</title>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
<div>
<wx-open-launch-app id="launch-btn" appid="wx6d206c87ef5e6785" extinfo="liveOpen">
<script type="text/wxtag-template">
<style>.btn { padding: 12px }</style>
<button class="btn">App内查看</button>
</script>
</wx-open-launch-app>
</div>
</body>
<script>
wx.config({
debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来,若要查看传入的参数,可以在 pc 端打开,参数信息会通过 log 打出,仅在 pc 端时才会打印
appId: '', // 必填,公众号的唯一标识
timestamp: '', // 必填,生成签名的时间戳image.png
nonceStr: '', // 必填,生成签名的随机串
signature: '', // 必填,签名
jsApiList: ['updateAppMessageShareData'], // 必填,需要使用的 JS 接口列表
openTagList: ['wx-open-launch-app'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});
wx.ready(function (sender) {
// alert('成功')
// config信息验证后会执行 ready 方法,所有接口调用都必须在 config 接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在 ready 函数中
});
wx.error(function (res) {
// alert('失败')
// config信息验证失败会执行 error 函数,如签名过期导致验证失败,具体错误信息可以打开 config 的debug模式查看,也可以在返回的 res 参数中查看,对于 SPA 可以在这里更新签名
});
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
// alert(e)
});
btn.addEventListener('error', function (e) {
// alert(e.detail.errMsg)
});
</script>
</html>
- 总结:在页面初始化时,访问接口,获取到的签名等数据。config验证成功后,开放标签才能展示,如果验证失败,标签是不会展示的。当然,如果你去掉了标签中的script脚本,标签都会显示的,但这样做就没有什么意义了。
三、注意事项
1 开发工具调试:
开发工具的调试,不要在开发工具中直接操作,这样即便代码写的没问题也会报错;用手机扫描该页面的二维码进行调试就行;
2 真机调试
在真机微信端测试时,要通过点击卡片等形式进入,不能直接通过url地址进入网页,否则也是会一直报莫名其妙的错误的!
3 开放标签的动态隐藏
对开放标签做v-if或v-show的隐藏要非常注意。因为开放标签和config的验证是同步进行的,不能先config验证是否成功,再判断是否显示开放标签,这样做,即便config验证通过,开放标签页不能显示;
4 在vue相关框架中报警告
开放标签属于自定义标签,Vue会给予未知标签的警告,可通过配置Vue.config.ignoredElements来忽略Vue对开放标签的检查。