一、介绍
微信开放标签地址
微信 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对开放标签的检查。
网友评论