[学习笔记]微信扫码 & 微信支付

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文件，即：

步骤三：通过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端的支付和公众号的扫一扫). 我做的支付其实很简单, 后台返回二维码网页,前台要做的就是显示二维码网页,我用的标签,. 然后再定时去查询结果,直到支付成功. 

微信扫码和微信支付是不一样的, 不要把自己绕进去! 扫码需要去调用微信sdk的扫一扫接口, 微信扫码支付是不需要的, 直接显示二维码, 拿起手机去扫就可以了.