历经百般折磨终于解决了这些bug

官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

首先，需要在公众号配置js接口安全域名，一定要记得配置！！

然后，需要引入JS文件，官方文档里有具体链接，(ps: 不过这边我遇到个坑，如果是直接通过在线引入的话，放到线上后会显示未引入，所以我把他直接拉下来了)

接着最让我头疼的地方来了，就是通过config接口注入权限验证配置的时候

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

下面这四个参数都是后端返回来的

注意：当你请求后端获取这些参数时，需要传一个url过去，你需要获取到当前页面的url，方法 window.location.href.split('#')[0];，一定要确保你传过去的url没有错。

配置完后，你如果开启了调试模式，那么说明你config接口注入权限验证配置成功了

如果签名参数出现问题，就会报签名错误，这个错误有可能是后端接收你传的url没有进行处理，一定要跟后端对比一下传入的url，如果url没有错误，有可能是你的没有在公众号配置js接口安全域名，还有就是可能后端这边access_token失效了。

还有就是按钮样式失效的问题

这个是微信官方提供的demo

如果是vue项目建议使用script

但是不知道为什么我的用两种方式都不行，最后我是加了template，在开放按钮wx-open-launch-weapp上，以及里面的button上写了行内样式然后就生效了，可能是我的css使用了rem单位的原因

以上是我所遇到的问题，尤其是在签名这个地方，百般折磨，发布这篇文章就是希望有伙伴遇到这些问题能够有所帮助。