皮皮网

1.微信公众号开发之如何使用JSSDK
2.如何开发一款JSSDK
3.如何在React中调用微信的jsSDK

微信公众号开发之如何使用JSSDK

        微信开发交流群：

        欢迎留言、转发、打赏

        系列文章参考地址 极速开发微信公众号

        项目源码参考地址 点我点我--欢迎Start

        服务号、订阅号可以通过登录 微信公众平台 查看 开发>接口权限

        使用JSSDK主要包括

        1、判断当前客户端版本是否支持指定JS接口、

        2、分享接口（微信认证）

        3、图像接口

        4、音频接口

        5、智能接口（识别语音并返回结果）

        6、设备信息（获取网络状态）

        7、地理位置

        8、界面操作

        9、微信扫一扫

        、微信小店（服务号必须通过微信认证）

        、微信卡券 （微信认证）

        、微信支付（服务号必须通过微信认证）

        官方参考文档

        步骤一：绑定域名

        先登录微信公众平台进入 公众号设置 的 功能设置 里填写 JS接口安全域名 。

        步骤二：引入JS文件

        在需要调用JS接口的页面引入如下JS文件，（支持W',例源打娃娃源码    accessTokenUrlin.qq.com/cgi-bin/token',    ticketUrl:'com/cgi-bin/ticket/getticket',

       }

       exports.sign = function (url,callback) {  var noncestr = config.noncestr,

              timestamp = Math.floor(Date.now()/), //精确到秒

          ...

              request(config.accessTokenUrl + '?grant_type=' + config.grant_type + '&appid=' + config.appid + '&secret=' + config.secret ,function(error, response, body){            if (!error && response.statusCode == ) {                var tokenMap = JSON.parse(body);

                      request(config.ticketUrl + '?access_token=' + tokenMap.access_token + '&type=jsapi', function(error, resp, json){                    if (!error && response.statusCode == ) {                        var ticketMap = JSON.parse(json);

                              cache.put('ticket',ticketMap.ticket,config.cache_duration);  //加入缓存

                              callback({                            noncestr:noncestr,                            timestamp:timestamp,                            url:url,                            jsapi_ticket:ticketMap.ticket,                            signature:sha1('jsapi_ticket=' + ticketMap.ticket + '&noncestr=' + noncestr + '&timestamp=' + timestamp + '&url=' + url)

                              });

                          }

                      })

                  }

              })

          }

       }

       è¿™é‡Œçš„流程和我们刚才描述的并无二致。首先是通过appId和secret获得调用获取jsapi_ticket的access_token，然后通过该access_token获得我们签名需要用到的jsapi_ticket。noncestr我们是提前随便填写好的。timestamp的算法也比较简单。

       æœ€åŽå°±æ˜¯é€šè¿‡sha1这个库提供的方法，将jsapi_ticket，noncestr，timestamp和页面url进行sha1签名，然后将以上这些信息通过callback返回给上层调用函数。

       é‚£ä¹ˆæˆ‘们往下看下我们的上层调用函数。其实就是我们的express路由:

app.get("/api/signature", function(req,res) {    const url = req.query.url.split('#')[0];

          signature.sign(url,function(signatureMap){

              signatureMap.appId = wechat_cfg.appid;

              res.send(signatureMap);

          });

       })

       æ ¹æ®å¾®ä¿¡å¼€å‘文档需求，我们首先需要将传进来的url的锚点后面的数据给去掉，保留前面的有效部分。

       ç„¶åŽå°±æ˜¯è°ƒç”¨ä¸Šé¢çš„sign方法来生成签名。上面的签名方法最后传进来的json数据就是这里的signatureMap。我们最终会将这些数据发送回react客户端。

       åŒæ—¶ï¼Œé€šè¿‡ä¸Šé¢çš„wx.config的示例，我们知道还需要用到微信公众号的appId。所以这里一并将其放到signatureMap中进行返回。

       é‚£ä¹ˆåˆ°æ­¤ä¸ºæ­¢ï¼Œreact客户端调用服务端的"/api/signature"返回的数据示例如下:

{

        noncestr: 'Wm3WZYTPz0wzccnW',

        timestamp: ,

        url: 'com/?code=kGsdxcm7F1PAFfUudkGsdr&state=',

        jsapi_ticket: 'sM4AOVdWfPE4DxkXGEs8VBqyVbs-TKGYp4d_ZSQa0Q5WvvMUPNQ6XGpyEcgKOD_xID_GrMCaalSmIF9JbrGaOg',

        signature: 'ffaf4b9eb0dfcfefe3daae3c'

       }

       3.  å®¢æˆ·ç«¯èŽ·å–签名信息

       3.1 获取签名信息并注入jssdk

       å’Œä¹‹å‰çš„获取微信用户信息一样，我们这里会建立一个新的Source文件WechatSdkSource.js来调用远程服务器的"/api/signature"接口:

var WechatSdkSource = {

        fetchSignatureMap() {    return {

            remote(state,url) {        return co(function *() {          let signatureMap = null;          const getSignatureMapUrl = `/api/signature`;          try {            let result = yield request.get(getSignatureMapUrl).query({ url:url});

                  signatureMap = result.body;

                } catch (e) {

                  signatureMap = null;

                }          //console.log("userInfo:", userInfo);

                return signatureMap;

              });

            },

            local() {        // Never check locally, always fetch remotely.

              return null;

            },      success: WechatSdkActions.updateSignatureMap,      error: WechatSdkActions.getSignatureMapFailed,      loading: WechatSdkActions.getSignatureMap,

          }

        }

       };

       è¿™é‡Œä¼ è¿›æ¥çš„url由下面将要谈及的上层函数所生成。整个流程就没有什么好说的了，说白了就是通过相应的库发送一个带有url的query参数的请求到服务器端来请求签名信息，相信有跟着这个系列文章的朋友都是很清楚的了。

       æœ€ç»ˆè¯·æ±‚成功返回的时候就会调用WechatSdkActions的updateSignatureMap这个Action。

var alt = require('../alt');module.exports  = alt.generateActions(    'updateSignatureMap',    'getSignatureMap',    'getSignatureMapFailed',

       );

       è€Œè¿™ä¸ªaction就会触发所监听的WechatSdkStore的onUpdateSignatureMap这个回调。

class WechatSdkStore {  constructor() {    this.signatureMap = [];    this.errorMessage = null;    this.ready = false;    this.bindActions(WechatSdkActions);    this.exportAsync(WechatSdkSource);