微信SDK开发

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

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

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

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

require方式引入

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

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

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

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

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

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（代表该用户微信帐号的唯一值）缓存到微信浏览器中。

//设置
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地址变动或者实参的改变，地址或参数相关尽量写成可配置的形式，如在代码段的开头将参数设置为对象的属性。

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下载地址