2017.5.15
1. 着手做微信扫码功能。
负责前端部分,首先需要了解微信JS-SDK说明文档。奈何公司网屏蔽微信网站。所以,下一步,翻墙。
2.翻墙
我用的xx-net,配置步骤如下:https://github.com/XX-net/XX-Net/wiki/中文文档。配置完成后,可以打开谷歌,但微信网页坚挺着不让进去。问了J哥,需要把默认的“全局PAC智能代理”,修改为“全局通过GAEProxy代理”。
---------------------分割线---------------------------------------------
2017.5.16 - 2017.5.23
1. JSSDK使用步骤
文档中已经有详细步骤,我自己也做了总结。微信JS-SDK文档 : https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
步骤一:绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。“填写JS接口安全域名”文档中看似简单的一句话,让我掉进了无尽深渊。下面记录我跳的坑坑洼洼的坑.
1. js接口安全域名填写如下图:
2. 这个安全域名不是随便填写的,需要后台部署好服务器后才能填。而且仅支持80(http)和443(https)两个端口。对填写格式也有要求,填写域名或路径,不需要写http://,如二级域名:abc.123.com 不能写成http://abc.123.com,直接写abc.123.com即可。
3. 必须将文件MP_verify_F0BZjTZr0XVxtPpO.txt上传至填写域名或路径指向的web服务器(或虚拟主机)的目录,如果没有上传,会报错。
步骤二:引入JS文件
在需要调用JS接口的页面引入如下JS文件,http://res.wx.qq.com/open/js/jweixin-1.0.0.js,如果你的页面启用了https,务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ,否则将无法在iOS9.0以上系统中成功使用JSSDK。
我用的相对协议引入的微信js文件,即:<script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
步骤三:通过config接口注入权限验证配置
wx.config({
debug: true,
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});
微信文档有明明确说明,签名必须从后台获取, 即timestamp nonceStr signature是通过后台接口拿到的数据, appId是固定的,公众号的唯一标识, jsApiList以为是自己填的.
步骤四:通过ready接口处理成功验证
所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
wx.ready(function(){
});
步骤五:通过error接口处理失败验证
wx.error(function(res){
});
1). 判断当前客户端版本是否支持指定JS接口,此接口不是触发时调用的接口,所以需要放在wx.ready中。
wx.ready(function(){
wx.checkJsApi({
jsApiList: ['scanQRCode'], // 需要检测的JS接口列表
success: function(res) {
} // 可用的api值true,不可用为false,如:{"checkResult": //{"chooseImage":true},"errMsg":"checkJsApi:ok"}
});
});
2). 微信扫一扫
wx.scanQRCode({
needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ["qrCode","barCode"], // qrCode二维码, barCode一维码
success: function (res) {
}
});
2. 测试
因为是微信的扫码,一定要在微信浏览器测试! 我是个无知的小白, 开始测试的时候用的uc浏览器,后来换成qq浏览器,都无效. 我的方法是,把测试的网页链接发给一个微信好友, 从微信里打开就ok了. 记得要把config里的debug设置为true,这样才会弹出测试结果.
---------------------分割线---------------------------------------------
顺路说一下微信支付,我做的支付是pc端的,着手做的时候把扫一扫和微信支付弄混了 (同时在做pc端的支付和公众号的扫一扫). 我做的支付其实很简单, 后台返回二维码网页,前台要做的就是显示二维码网页,我用的<ifame>标签,. 然后再定时去查询结果,直到支付成功.
微信扫码和微信支付是不一样的, 不要把自己绕进去! 扫码需要去调用微信sdk的扫一扫接口, 微信扫码支付是不需要的, 直接显示二维码, 拿起手机去扫就可以了.