AngularJS接入微信JSSDK小结

最近手里一个微信WEB项目，需要接入微信的部分功能——诸如“录音”、“文件上传”等等。一开始我只是当做一个普通的web工程在做，选了Framework7作为UI+逻辑框架，也算是练练手。之后发现Template7在逻辑代码的组织上存在一些我不大习惯的地方，于是还是回归了AngularJS。

---

配置清单：

Angular：1.5.7

Angular-UI-Router：0.3.1

微信JSSDK：1.0.0

微信调试工具：0.3。0

---

资源：

微信测试号申请：http://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index

签名验证：http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

接口调试：http://mp.weixin.qq.com/debug/

---

1.需要准备的内容：

公众号的APPID和Secret：这个我是直接在测试页面拿到的。

调试工具：一定要有，因为直接在控制台看，和真机的偏差还是较大的。

2.原理：

通过APPID和Secret生成token，通过token生成api的票据(ticket)，通过票据算出配置，传入配置，激活wx对象，在wx对象ready之后，即可调用方法。

而且后面会讲到，wx对象接受的配置里，加密字符串是包含了当前页面的地址的，只对单地址有效的，这个地址是#之前的部分，而使用了UI-router后，Angular项目——推测其他SPA也是——只有一个地址，这就使得只需要做一次wx对象的初始化，方便了不少。

3.config文件的生成：

这个我最初理解错了，想写在客户端，但是后来发现只要服务器持有一个7200s的token和ticket就可以。于是我拿Node在服务端写了一个简单的方法，用于生成。具体代码不贴了，超级简单。

时间戳代码：

Date.parse(newDate()) /1000

4.wx初始化

wx对象初始化时接受的config对象中，有一个signature，signature是由ticket、noncestr、时间戳、当前地址拼接成的字符串，SHA-1加密生成的。故当你URL变了之后，需要重新获取。

这里我使用了【https://www.zhihu.com/question/48160043】这个问题中的方法。在run方法中直接调用$http去获取config，然后在每个Controller中只是进行$window.wx的ready。

//利用angular初始调用

angular.module("wechatShare",[])

.run(function($http,$window,$location){

//利用http将$location.$$absUrl发送到后端并完成签名，再将签名等参数发送回前端,前端再利用返回来的参数填入config：

$http(

url: 实现签名的后端url,

method:"post",

data: {url: $location.$$absUrl},

).then(

function(res){

$window.wx.config(res.config);

}

);

})

.controller("sharePageCtrl", function($window,$scope){

//在每一个需要分享的页面对应的controller,调用wx.ready():

/*建议可建一个factory，就不用每个controller给微信写一大串代码了*/

$window.wx.ready(

function(){

$window.wx.onMenuShareTimeline({});

$window.wx.onMenuShareAppMessage({});

}

);

})

这样其实有个问题，就是错误处理其实比较麻烦……我还没想到好的方法。

---

以上就是正常流程。下面是错误处理：

首先，在wx初始化时，如果是签名错误，请仔细核对每一个字段，我出现过两个错误：1.时间戳不对；2.&符号错误。请务必——仔细核对！。

其次，如果是URL不合规，这里有个tips：首先，测试号允许使用IP而非域名进行安全域的注册，其次，localhost可以写成127.0.0.1。这样的话，就可以注册本机了。

第三，当测试号使用IP时，一定要注意，只写IP和Port，千万……不要写……协议。参见【http://blog.csdn.net/zyf_balance/article/details/48178353】

这样下来，就可以了。

P.S.:因为文章写的时候还不会markdown，所以代码比较乱。