微信JSSDK

发表于   |   分类于   |  

说明

此为基本文档，仅仅有微信发送给朋友和分享到朋友圈两个功能，其余类似。
参照https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

JSSDK使用步骤

绑定域名

登录微信公众平台->“公众号设置”，填写”JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。

引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：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
如需使用摇一摇周边功能，请引入 jweixin-1.1.0.js
备注：支持使用 AMD/CMD 标准模块加载方法加载

通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。
该步骤需要Server端配合处理。

1
2
3
4
5
6
7
8
9
10
wx.config({
    debug: true,
    appId: '<?php echo $signPackage["appId"];?>',
    timestamp: <?php echo $signPackage["timestamp"];?>,
    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
    signature: '<?php echo $signPackage["signature"];?>',
    jsApiList: [
      // 所有要调用的 API 都要加到这个列表中
    ]
  });

ready接口处理成功验证

1
2
3
4
wx.ready(function(){

    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

通过error接口处理失败验证

1
2
3
wx.error(function(res){
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

基础接口参照官方URL

心得

1、调试引入js可在PC端调试配置（config），但域名需要加入JS安全域名；
2、微信端调试时，可把debug模式打开；
3、config里面的URL必须是JS所在页面的URL，否则会报”invalid signature”.