开标标签 微信回流wx-open-launch-app 踩坑实践

微信开发标签官方文档

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

注意事项

微信安全域名只能修改绑定3次/每月

开发平台配置

1. 注意将移动应用的
2. 点击移动应用的基本信息和开发信息 全部要填写完整

微信回流存在的问题

• 微信回流
• 安全域名要设置关联上
• 微信标签可以动态产生，避免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 ，实际的安卓应用没安装，点击允许 页面失去响应了