最近手里一个微信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，所以代码比较乱。
网友评论