微信开发标签官方文档
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
注意事项
微信安全域名只能修改绑定3次/每月
开发平台配置
- 注意将移动应用的
- 点击移动应用的基本信息和开发信息 全部要填写完整
微信回流存在的问题
- 微信回流
- 安全域名要设置关联上
- 微信标签可以动态产生，避免vue的兼容性
- 注意微信的版本 7.0.12 上可以才生效
- 微信官方文档很不清楚，说的很含糊，需要很高的试错成本
- 微信的开放标签可以动态创建，官方并未说明
- 调错机制基本没有，需要不断的折腾，实验，耗费很多耐心和时间，甚至对微信这个功能都保持怀疑了
代码实例
- 第1步
html部分
<div id="wxOpenInAPP" class="wexin-launch-btn" v-show="isOK">
</div>
js部分
var dom = document.getElementById('wxOpenInAPP') //
dom.innerHTML = '<wx-open-launch-app style="width:100%; display:block;" id="launch-btn" extinfo="" appid=""><template><style> .wx-btn { color: #666; width: 100%; height:100%; display: block; text-aligin:center; }</style><button class="wx-btn">我想接这单</button></template></wx-open-launch-app>'
var launchBtn = document.getElementById('launch-btn')
if (!launchBtn) {
return
}
launchBtn.addEventListener('launch', function (e) {
console.log('success')
})
launchBtn.addEventListener('error', function (e) {
console.log('fail', e.detail)
})
实现在vue 创建好元素后 ，去调用微信的授权签名 debug 模式为 true
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [], // 必填，需要使用的JS接口列表 必须不是空数组
openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});
- 第3步 为微信开放标签按钮绑定 参数以及 应用号的appid 不是公众号哦
var launchBtn = document.getElementById('launch-btn')
if (!launchBtn) {
return
}
launchBtn.setAttribute('appid', yourAppId)
launchBtn.setAttribute('extinfo', `{"url":"${url}"}`)
- 第4步 在微信最新的版本中打开测试 , 点击按钮 弹出弹窗 在 什么应用打开 表示成功，开发工具可能版本不够 要检查哦
注意，实测 华为mate20 pro ，实际的安卓应用没安装，点击允许 页面失去响应了
