微信SDK开发

这篇是3月做的基于微信公众号开发的总结。
有微信SDK的讲解以及我所走过的坑。还有调试实践和比较好的书写方法。

步骤一:绑定域名
通过微信公众平台登录后,可以设置公众号的“js接口安全域名”

步骤二:引入js文件
在引用接口的页面引入

1
2
3
<script>
http://res.wx.qq.com/open/js/jweixin-1.0.0.js
</script>

require方式引入

1
2
3
4
5
6
require.config({
baseUrl: 'scripts/',
paths:{
'wx':'http://res.wx.qq.com/open/js/jweixin-1.0.0'
}
})

步骤三:通过config接口注入权限验证配置

1
2
3
4
5
6
7
8
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名,见附录1
jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

注意发布的时候一定记住把debug模式去掉

步骤四:通过ready接口处理成功的验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
wx.ready(function(){				
//获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
wx.onMenuShareTimeline({
title: that.title, // 分享标题
link: that.link, // 分享链接
imgUrl: that.icon, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
//alert('success')
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});

//获取“分享给朋友”按钮点击状态及自定义分享内容接口
wx.onMenuShareAppMessage({
title: that.title, // 分享标题
desc: that.desc, // 分享描述
link: that.link, // 分享链接
success: function () {
// 用户确认分享后执行的回调函数
//alert('share to friend success')
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});

wx.error(function(){
common.showPrompt('网络提醒<br>网络连接异常,请稍后重试');
});

以上为分享给朋友及分享到朋友所适用的SDK,其余功能参见附录链接。

可能遇到的需求
点击按钮后触发弹框,然后进行页面跳转.
对用户来说,阅读弹框中的文字需要时间(即设置弹框出现到消失的定时器),跳转之前需要时间(即设置弹框消失之后执行跳转这一时间间隔的定时器),所以需要设置两个定时器让它们自己排队解决。注意setTimeout的用法,有关eventloop的内容详见《深入浅出nodejs》60页。

一些逻辑实现
实现原理来说,获取微信授权需要先跳转再回到当前页面,对于用户来说,跳转越少越好,所以采用缓存的方式,将用户的unionId(代表该用户微信帐号的唯一值)缓存到微信浏览器中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//设置
window.localStorage.setItem('unionId',this.unionId);
document.cookie="unionId="+escape(unionId);
//获取
window.localStorage.getItem('unionId');
getCookie('unionId');

function getCookie(name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}

根据微信官方说法是4月底微信浏览器升级,之前的bug将修复。当设置缓存的时候可能遇到localstorage无法使用的情况,最好是同时设置localstorage和cookie,但是我实际操作中没有遇到此类问题,localstorage基本通用,所以仅做参考。

关于调试
附录中有关于微信调试工具的链接,实测并没有特别好用(主要是没找到代理的设置),建议还是charles走代理调试,ios版微信有页面刷新功能,android版没有,建议用iphone调试。

需要注意的书写方式
后期会有URL地址变动或者实参的改变,地址或参数相关尽量写成可配置的形式,如在代码段的开头将参数设置为对象的属性。

1
2
3
4
5
6
var config = {
url:'api/app/userinfo',//获取用户信息
android:'https://www.aaa.com/android',//android下载地址
iphone:'https://www.aaa.com/iphone',//iphone下载地址
imgDefault:'http://aaa.com/c.jpg'
}

附录

微信开发者文档
微信JSSDK说明文档
微信web开发者工具
charles下载地址