记录公众号开放标签的使用

应项目需求，在公众号内点击按钮跳转至一小程序的指定页面进行缴费，在开发中使用微信官方提供的开放标签。记录一下使用流程和出现的问题

官方文档：目录 | 微信开放文档​​​​​​

1.引入JS文件

项目我是用uniapp写的，打包成h5，用法基本与vue无异，文档中写的是在需要调用 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）

我选择在App.vue的生命周期中动态生成script标签

const oScript = document.createElement('script');
 oScript.type = 'text/javascript';
 oScript.src = 'https://res2.wx.qq.com/open/js/jweixin-1.6.0.js';
 oScript.id = 'script'
 oScript.onload = this.configInfo
 document.body.appendChild(oScript);

在项目启动时就连接上了，也可以在index.html中直接引入

2.通过 config 接口注入权限验证配置并申请所需开放标签

wx.config({
  debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [], // 必填，需要使用的 JS 接口列表
  openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});
wx.ready(function() {
 console.log('config ready');
//通过 ready 接口处理成功验证
});
wx.error(function() {
 console.log('config error');
//通过 error 接口处理失败验证
})

此处的各项参数需要从后端获取，我在这写的是一个get请求，参数是页面当前url，此处有一个坑，后面介绍各种问题时再详细解释

3.跳转小程序开发式标签

vue下标签中script需携带type="text/wxtag-template",username和path是必填的，需要根据这两个条件来进行跳转，在第二部中如果签名成功 此按钮会自动浮现

4.各项问题和解决办法

在第二步时，需将debug模式设为true，出现问题会通过弹框弹出，解决问题后别忘记关了就行

①按钮不出现

如果你是在浏览器或者模拟器中看效果，是看不见按钮的，必须在真机中调试，微信中打开。

②invalid signature 无效签名

签名错误，config中设置的键错了或者值错了，确认给后端传的 url 是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及'？'后面的 GET 参数部分,但不包括'#'hash后面的部分

url无误，并且wx.config配置中的键值无误，格式无误，可能是后端返回的数据问题，过期或重复申请等，需和后端一起排查。

③invalid url domain 无效url

到这一步报错了，一般就是签名过了，但你此时的url出现问题，前端域名没有授权，部署微信前端页面的服务器的域名要在在公众平台授权。修改JS接口安全域名，设置白名单

具体效果需要上传服务器才能看见效果，localhost和ip局域网是不行的

④按钮出现，但跳转超时或小程序信息有误

检查开放标签中的username（appId)和path（小程序页面路径）是否有误，两者任一项错误都无法跳转

当弹出config:ok的时候，签名完成，此时按钮会出现，点击即可跳转