微信JSSDK的运用

微信JS-SDK说明文档

微信JSSDK使用步骤

1：绑定安全域名

2：页面引入JS----JSSDK

3：通过config接口注入权限配置

4：调用所所需要的功能接口

绑定安全域名：

 

页面引入js：

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

 

config接口注入权限详细说明

 

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

在进行JSSDK的config权限配置前，需要了解一下jsapi_ticket的机制，jsapi_ticket是访问微信JSAPI的凭证，正常情况下，jsapi_ticket的有限期为7200秒，通过access_token来获取。

由于获取jsapi_ticket和access_token的api调用次数非常有限，频繁刷新jsapi_ticket和access_token会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket和access_token 。

jsapi_ticket的获取方式：（使用GET方式）

1.先去获取access_token。access_token获取的接口地址

2.用刚刚获取到access_token去获取jsapi_ticket。jsapi_ticket获取的接口地址

微信JSSDK接口权限配置依赖了4个参数，分别是微信jsapi_ticket(调用jssdk的凭证)、时间戳（精确到秒）、随机数（任意字符串）、当前页面的url(包含请求参数，在url全连接的#之前部分)， 进行签名时，微信采用的是sha1的方式签名，并且将需要签名的4个参数按照参数名称的ascii码从小到大排序。

签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分） 。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。

 

即signature=sha1(string1)。 示例：

• noncestr=Wm3WZYTPz0wzccnW
• jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
• timestamp=1414587457
• url=http://mp.weixin.qq.com?params=value

步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

步骤2. 对string1进行sha1签名，得到signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed

注意事项

1. 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
2. 签名用的url必须是调用JS接口页面的完整URL。
3. 出于安全考虑，开发者必须在服务器端实现签名的逻辑。

sha1算法：

sha1百度百科

SHA1的算法JAVA实现：

 

进行SHA1算法签名的注意事项：

1.url为当前页面的url全链接（包含get参数部分，除去#之后的内容）

2.四个参数的拼接顺序

 

config签名中常见错误详情：

附录5-常见错误及解决方法

调用config 接口的时候传入参数 debug: true 可以开启debug模式，页面会alert出错误信息。以下为常见错误及解决方法：

1. invalid url domain当前页面所在域名与使用的appid没有绑定，请确认正确填写绑定的域名，如果使用了端口号，则配置的绑定域名也要加上端口号（一个appid可以绑定三个有效域名，见 目录1.1.1）。
2. invalid signature签名错误。建议按如下顺序检查：
   1. 确认签名算法正确，可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
   2. 确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。
   3. 确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。
   4. 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
   5. 确保一定缓存access_token和jsapi_ticket。
   6. 确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去'#'hash部分的链接（可用location.href.split('#')[0]获取），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。
3. the permission value is offline verifying这个错误是因为config没有正确执行，或者是调用的JSAPI没有传入config的jsApiList参数中。建议按如下顺序检查：
   1. 确认config正确通过。
   2. 如果是在页面加载好时就调用了JSAPI，则必须写在wx.ready的回调中。
   3. 确认config的jsApiList参数包含了这个JSAPI。
4. permission denied该公众号没有权限使用这个JSAPI，或者是调用的JSAPI没有传入config的jsApiList参数中（部分接口需要认证之后才能使用）。
5. function not exist当前客户端版本不支持该接口，请升级到新版体验。
6. 为什么6.0.1版本config:ok，但是6.0.2版本之后不ok（因为6.0.2版本之前没有做权限验证，所以config都是ok，但这并不意味着你config中的签名是OK的，请在6.0.2检验是否生成正确的签名以保证config在高版本中也ok。）
7. Android用户已取消分享朋友圈，但仍返回分享成功（微信团队已修复此问题，已在Android6.1版本上线）
8. 在iOS和Android都无法分享（请确认公众号已经认证，只有认证的公众号才具有分享相关接口权限，如果确实已经认证，则要检查监听接口是否在wx.ready回调函数中触发）
9. Android6.0.2部分客户端无法使用监听分享接口（Android6.0.2之前以及6.0.2.58以后的版本都不会有问题，请从官网weixin.qq.com下载最新版本体验）
10. 服务上线之后无法获取jsapi_ticket，自己测试时没问题。（因为access_token和jsapi_ticket必须要在自己的服务器缓存，否则上线后会触发频率限制。请确保一定对token和ticket做缓存以减少2次服务器请求，不仅可以避免触发频率限制，还加快你们自己的服务速度。目前为了方便测试提供了1w的获取量，超过阀值后，服务将不再可用，请确保在服务上线前一定全局缓存access_token和jsapi_ticket，两者有效期均为7200秒，否则一旦上线触发频率限制，服务将不再可用）。
11. Android部分版本上传图片接口偶尔卡住（早期的Android6.0.2版本存在此问题，官方已修复，6.0.2.58之后的版本都支持，请从官网下载最新版本体验）
12. uploadImage怎么传多图（目前只支持一次上传一张，多张图片需等前一张图片上传之后再调用该接口）
13. 没法对本地选择的图片进行预览（chooseImage接口本身就支持预览，不需要额外支持）
14. 通过a链接(例如先通过微信授权登录)跳转到b链接，invalid signature签名失败（后台生成签名的链接为使用jssdk的当前链接，也就是跳转后的b链接，请不要用微信登录的授权链接进行签名计算，后台签名的url一定是使用jssdk的当前页面的完整url除去'#'部分）
15. 出现config:fail错误（这是由于传入的config参数不全导致，请确保传入正确的appId、timestamp、nonceStr、signature和需要使用的jsApiList）
16. 如何把jsapi上传到微信的多媒体资源下载到自己的服务器（请参见文档中uploadVoice和uploadImage接口的备注说明）
17. 在Android中通过其他设备上传的serverId，能下载成功但无法播放（微信团队已经确认此问题，已在Android6.1版本中修复）
18. Android通过jssdk上传到微信服务器，第三方再从微信下载到自己的服务器，会出现杂音（微信团队已经修复此问题，目前后台已优化上线）
19. 绑定父级域名，是否其子域名也是可用的（是的，合法的子域名在绑定父域名之后是完全支持的）
20. 在Android中通过扫一扫打开页面，再调用scanQRCode并返回数据给第三方，会直接退出当前页（微信团队已经确认此问题，已在Android6.1版本中修复）
21. 在iOS微信6.1版本中，分享的图片外链不显示，只能显示公众号页面内链的图片或者微信服务器的图片（微信团队已经确认此问题，会在6.2中修复）
22. 是否需要对低版本自己做兼容（jssdk都是兼容低版本的，不需要第三方自己额外做更多工作，但有的接口是6.0.2新引入的，只有新版才可调用）
23. 该公众号支付签名无效，无法发起该笔交易（请确保你使用的jweixin.js是官方线上版本，不仅可以减少用户流量，还有可能对某些bug进行修复，拷贝到第三方服务器中使用，官方将不对其出现的任何问题提供保障，具体支付签名算法可参考 JSSDK微信支付一栏）
24. 之前微信jssdk语音接口上传的文件类型为speex，第三方在自己的网页无法直接播放（微信团队确认了该问题，并已在本周上线解决了此问题，第三方可以通过多媒体接口下载得到标准的amr音频文件）
25. 目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复

 

在config接口权限配置完成后，就可以进行后续所需要的接口调用了。不过需要注意的是所有调用的微信js的接口最后是在

wx.ready(function () {

});之间，这样是为了保证上一步的config权限注入完成后再进行操作。

 

注意：微信js文件的加载只支持使用 AMD/CMD 标准模块加载方法加载，zepto.js不支持此加载方式，应用zepto.min.js。