最近微信公众号网页开发项目遇到一个问题:
在吊起扫一扫功能的时候,Android端正常,iOS端总是提示config:fail 或者签名失败(sigxxxxxx)
Vue的项目,前几个类似的项目没遇到这种问题。这次微信配置和吊起的代码也是同事考培来的。
通过调试还有微信提供的签名验证工具都没问题;
因为Android端正常,说明逻辑是正确的,签名失败配置失败说明iOS端的参数是有问题的。
直接搜问题搜不到,最后从侧面看了下history模式,发现:
在路由配置的时候,即项目router下的路由文件中:
export default new Router({ mode:'history', // ....省略不用代码 })
开启了history模式,注释掉后iOS吊起扫一扫正常;
因为history模式造成了,传入后台的url不对导致微信配置信息返回不正确,所以显示签名失败;
除了扫一扫外,分享等功能应该也会有这样的问题;
下面记录下weixin-js-sdk的配置和功能使用,以扫一扫为例:
步骤一:绑定JS接口安全域名
在'微信公众平台->设置->公众号设置->功能设置'中, 填写JS接口安全域名. 设置后, 公众号开发者才能在该域名下调用微信开放的JS接口.
注:后台的端口号必须以 80开头;微信官方要求;
步骤二:引入JS文件
在项目根目录下的index.html文件中直接引入:
<!-- WXJSAPI --> <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
注:如果你的页面启用了https,务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ,否则将无法在iOS9.0以上系统中成功使用JSSDK
步骤三:配置微信config
然后在你需要调用微信功能的界面中注册即可,如果项目需要多次调用或者需要微信多个功能,可以全局注册;
下面以微信扫一扫为例:
在界面初始化时注册wx.config:
// 初始化界面调用 // 传入的参数是要使用的功能对应的接口 // 其他功能对应的名字在官方文档中找(下面的是扫一扫) mounted() { this.RegisterWxJsApi(["scanQRCode"]); } // 先通过后台接口获取微信配置的一些信息,一些保密或者动态信息放在后台处理是正常逻辑 // 后台具体逻辑在下面后台部分记录 // 下面的请求参数是按照ReliableA_Wechat项目走的,因为是公司文档,所以参数注释掉了 RegisterWxJsApi: function(jsApiList) { var url = "/后台配置信息获取接口"; var req = { AppType: "xxxx", RequestUrl: window.location.href.split('#')[0] }; this.$http.get(url, { params: req }).then(response => { wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: response.data.AppId, // 必填,公众号的唯一标识 timestamp: response.data.TimeStamp, // 必填,生成签名的时间戳 nonceStr: response.data.NonceStr, // 必填,生成签名的随机串 signature: response.data.Sign, // 必填,签名,见附录1 jsApiList: jsApiList // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 }); }); }
步骤四:吊起微信功能
按钮点击时吊起微信扫一扫
// 点击事件 clickEvent: function() { var _this = this; wx.ready(function() { wx.scanQRCode({ needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果, scanType: ["barCode"], // 可以指定扫二维码还是一维码,默认二者都有 success: function(res) { var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果 var resultArr = result.split(","); _this.Bind(resultArr[1]); } }); wx.error(function(res) { var str = JSON.stringify(res); alert(str); }) }); },