码迷，mamicode.com
首页 > 微信 > 详细

微信JSSDK使用指南

时间：2017-07-11 21:20:03      阅读：289      评论：0      收藏：0      [点我收藏+]

标签：iter   sso   异步   1.0   更新   tco   事件处理   tor   nop   

????这篇文章主要来说说微信JSSDK的一些配置和微信分享的使用，包括从前端sdk文件引入到server端和微信server的交互。

另外Tangide已经把一些工作做好了。我会简要说一说怎么把它用起来。在开发的过程中主要參考了微信官方开发文档，因为微信提供的功能略多，我会定期更新文档，假设你已经熟悉了微信JSSDK的开发流程能够直接跳过前面的步骤，直接跳转到Tangide与微信JSSDK的使用结合 ：）。

1. 首先得有个公众号

微信把公众号细分为服务号和订阅号。

接口权限各不同样，假设你记不住你的公众号有没有相应功能的权限，能够到开发人员中心->接口权限表相应查看。

2. 配置JS接口安全域名

微信限制了JS接口使用的域名。详细在：公众号设置->功能设置页面。好在能够同一时候配置3个，并且能够改动： 技术分享

这意味着配置能够复用了。反复劳动降低了：）。

3. 引入JS文件

http://res.wx.qq.com/open/js/jweixin-1.0.0.js这个是微信官方提供的sdk。能够在h5页面放个<script>标签把它引入进来。

4. 注入权限验证配置

微信为了验证调用SDK的合法性，须要我们的server与微信server交互获取配置信息。

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

一般来说仅仅有是否开启调式模式由client决定，其它的都是通过http请求server获得,以下我们就来看看怎样从服务获取配置信息。

5. 服务端获取配置信息

这是整个过程相对关键的一步，你必须要缓存好两个token: jsapi_ticket以及access_token。access_token有效时间为2个小时。向微信server请求频率限制为：每天2000次。微信还有其它一些參数的频率限制，你能够看这里。


以下来说说获取配置信息的详细步骤：

技术分享

来看看server端是怎么处理的：

nodejsserver端：

var fs = require(‘fs‘);
var path = require(‘path‘);
var urlParser = require(‘url‘);
var TokenManager = require(‘./token_manager‘);

var Handler = function() {
};

Handler.doit = function(req, res) {
    try {
        var query = urlParser.parse(req.url, true).query;
        if(!query || !query.url) {
            throw new Error(‘invalid params‘);
        }
        var realUrl= atob(decodeURI(query.url));
    }
    catch(e) {
        res.status(401).json({code: -1, message: e});
        res.end();
        return;
    }
    Handler.tokens.getJsApiTicket(realUrl, function(err, config) {
        if(!!err) {
           res.status(500).json({code: -1, message: err});
        }
        else {
           res.status(200).json({code: 0, message: ‘success‘, data: config});
        }
        res.end();
    });
};

Handler.init = function(app, express, config) {
    Handler.opts = {
        appid: config.appid,
        secret:config.secret
    };
    Handler.tokens = TokenManager.create(opts);
    app.post(‘/weixin/get-config.php‘, Handler.doit);
};

module.exports = Handler;

//////////////////////////////////////////////////////////////////////////////
//token manager

var TokenManager = function(opts) {
    this.opts = opts;
    if(!opts.appid || !opts.secret) {
        thow new Error(‘appid and secret should not be empty!!!‘);
    }
    var tokenPath = path.join(__dirname, ‘tokens.json‘);
    this.loadToken = opts.loadToken || function(type, cb) {
        fs.readFile(tokenPath, ‘utf8‘, function(err, data) {
            if(!!err) {
                return cb(err);
            }
            try {
                data = data || JSON.stringify({});
                data = JSON.parse(data);
            }
            catch(e) {
               return cb(e);
            }
            cb(null, data[type] || {});
        });
    };
    this.saveToken = opts.saveToken || function(token, cb) {
        fs.readFile(tokenPath, ‘utf8‘, function(err, data) {        
            if(!!err) {
                return cb(err);
            }
            data = data || {};
            var type = Object.keys(token)[0];
            data[type] = token[type];
            fs.writeFile(tokenPath, JSON.stringify(data), cb);
        });
    };
};

var isValid = function() {
    return !!this.token && (new Date().getTime()) < this.expireTime;
};

var load = function(stream, cb) {
    var chunks = [];
    stream.on(‘data‘, function(chunk) {
        chunks.push(chunk);
    });
    stream.on(‘error‘, function(err) {
        cb(err);
    });
    stream.on(‘end‘, function() {
        cb(null, Buffer.concat(chunks));
    });
};

var request = function(url, cb) {
    require(‘https‘).get(url, function(res) {
        load(res, cb);
    }).on(‘error‘, function(err) {
        cb(err);
    });
};

var wrapper = function(cb) {
    return function(err, rawData) {
         cb = cb || function() {};
         if(!!err) {
             return cb(err);
         }
         try {
             var data = rawData.toString(‘utf-8‘);
             data = JSON.parse(data);
         }
         catch(err) {
              return cb(err);
         }
         if(data && data.errcode) {
              err = new Error(data.errmsg);
              err.name = ‘WeChatAPIError‘;
              err.code = data.errcode;
              return cb(err, data);
         }
         cb(null, data);
    };
};

TokenManager.prototype.getAccessToken = function(cb) {
    var self = this;
    this.loadToken(‘accessToken‘, function(err, token) {
         if(err) {
            cb(err);
         }
         else if(isValid.call(token)) {
            cb(null, token.token);
         }
         else {
              var url = ‘https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential‘ +
                        this.opts.appid + this.opts.secret;
              request(url, wrapper(function(err, data) {
                  if(err) {
                      return cb(err);
                  }
                  console.assert(data && data.token);
                  var expireTime = (new Date().getTime()) + (data.expires_in - 10) * 1000;
                  var token = {
                      accessToken: {
                          ‘token‘: data.token,
                          ‘expireTime‘: expireTime
                      }
                  };
                  self.saveToken(token, function(err) {
                       if(err) {
                           return cb(err);
                       }
                       cb(null, data.token);
                  });
              });
         }
    });
};

TokenManager.prototype.getJsApiTicket = function(cb) {
    var self = this;
    this.loadToken(‘jsApiTicket‘, function(err, token) {
         if(err) {
            cb(err);
         }
         else if(isValid.call(token)) {
            cb(null, token.token);
         }
         else {
              self.getAccessToken(function(err, token) {
              if(err) {
                  return cb(err);
              }
              console.assert(token);
              var url = ‘https://api.weixin.qq.com/cgi-bin/ticket/getticket?
type=jsapi&access_token=‘ + token;
              request(url, wrapper(function(err, data) {
                  if(err) {
                      return cb(err);
                  }
                  console.assert(data && data.token);
                  var expireTime = (new Date().getTime()) + (data.expires_in - 10) * 1000;
                  var token = {
                     jsApiTicket: {
                          ‘token‘: data.ticket,
                          ‘expireTime‘: expireTime
                      }
                  };
                  self.saveToken(token, function(err) {
                       if(err) {
                           return cb(err);
                       }
                       cb(null, data.token);
                  });
              });
         }    
    });
};

var createNonceStr = function(length) {
    return Math.random().toString(36).substr(2, length || 15);
};

var createTimestamp = function() {
    return parseInt(new Date().getTime()/1000, 10) + ‘‘;
};

var crypto = require(‘crypto‘);

var genSignature = function() {
    var raw = function() {
        var keys = Object.keys(arguments);
        var newArgs = {};
        keys.sort().forEach(function(key) {
            newArgs[key.toLowerCase()] = arguments[key];
        });
        var str = ‘‘;
        for(var k in newArgs) {
            str += ‘&‘ + k + ‘=‘ + newArgs[k];
        }
        return str.substr(1);
    };
    var str = raw.apply(null, arguments);
    return crypto.createHash(‘sha1‘).update(str).digest(‘hex‘);
};

TokenManager.prototype.getJSSDKConfig = function(url, cb) {
    var self = this;

    this.getJsApiTicket(function(err, ticket) {
        if(err) {
            return cb(err);
        }
        console.assert(ticket);     
        var nonceStr = createNonceStr();
        var timestamp= createTimestamp();
        var signature= genSignature(nonceStr, timestamp, ticket, url);
        var ret = {
            appId: self.opts.appid,
            nonceStr: nonceStr,
            timestamp: timestamp,
            signature: signature,
            url: url,
            jsApiList: [
                 ‘checkJsApi‘, ‘chooseImage‘,
                 ‘previewImage‘, ‘uploadImage‘,
                 ‘onMenuShareTimeline‘, ‘onMenuShareAppMessage‘,
                 ‘onMenuShareQQ‘, ‘onMenuShareWeibo‘
            ]
        };
        cb(null, ret);
    });
};

module.exports.create = function(opts) {
    if(!this.inst) {
        this.inst = new TokenManager(opts);
    }
    return inst;
};

    代码比較长,将就看吧！假设看过微信开发文档中的关于授权的大致流程，以上代码就没有什么问题了。须要注意的是，默认token保存在本地文件，假设有其它cluster需求能够自行注入函数来处理。

phpserver端

<?php
class JSSDK {
  private $appId;
  private $appSecret;
  public function __construct($appId, $appSecret) {
    $this->appId = $appId;
    $this->appSecret = $appSecret;
  }
  public function getSignPackage($url) {
    $jsapiTicket = $this->getJsApiTicket();
    if(!$url) {
        $url = "http://$_SERVER[HTTP_HOST]" . ‘/weixin/demo/index.html‘;
    }
    $timestamp = time();
    $nonceStr = $this->createNonceStr();
    // 这里參数的顺序要依照 key 值 ASCII 码升序排序
    $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";
    $signature = sha1($string);
    $signPackage = array(
      "appId"     => $this->appId,
      "nonceStr"  => $nonceStr,
      "timestamp" => $timestamp,
      "url"       => $url,
      "signature" => $signature,
      "rawString" => $string
    );
    return $signPackage; 
  }
  private function createNonceStr($length = 16) {
    $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    $str = "";
    for ($i = 0; $i < $length; $i++) {
      $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
    }
    return $str;
  }

  private function getFileName($name) {
    //$fileName = sys_get_temp_dir() . "/weixin-" . $name;
    $fileName = dirname(__FILE__) . "/weixin-". $name;
    return $fileName;
  }

  private function saveData($name, $content) {
    $fileName = $this->getFileName($name);

    $fp = fopen($fileName, "wb+");
    if($fp) {
        fwrite($fp, $content);
        fclose($fp);
    }

    return;
  }

  private function loadData($name, $defaultContent) {
    $fileName = $this->getFileName($name);
    $content = file_get_contents($fileName);

    if($content) {
        return $content;
    }
    else {
        return $defaultContent;
    }

    return;
  }

  private function getJsApiTicket() {
    $data = json_decode($this->loadData("jsapi_ticket.json", ‘{"jsapi_ticket":"", "expire_time":0}‘));
    if ($data->expire_time < time()) {
      $accessToken = $this->getAccessToken();
      $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
      $res = json_decode($this->httpGet($url));
      $ticket = $res->ticket;
      if ($ticket) {
        $data->expire_time = time() + 3600;
        $data->jsapi_ticket = $ticket;
        $this->saveData("jsapi_ticket.json",  json_encode($data));
      }
    } else {
      $ticket = $data->jsapi_ticket;
    }
    return $ticket;
  }

  private function getAccessToken() {
    $data = json_decode($this->loadData("access_token.json", ‘{"access_token":"", "expire_time": 0}‘));
    if ($data->expire_time < time()) {
      $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";
      $res = json_decode($this->httpGet($url));
      if(!isset($res->access_token)) {
        print_r($res);
        exit;
      }

      $access_token = $res->access_token;
      if ($access_token) {
        $data->expire_time = time() + 3000;
        $data->access_token = $access_token;
        $this->saveData("access_token.json", json_encode($data));
      }
    } else {
      $access_token = $data->access_token;
    }
    return $access_token;
  }

  private function httpGet($url) {
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_TIMEOUT, 500);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
    curl_setopt($curl, CURLOPT_URL, $url);
    $res = curl_exec($curl);
    curl_close($curl);
    return $res;
  }
}

session_start();
if(!isset($_REQUEST[‘url‘])) {
    echo "invalid arguments";
    exit;
}

$appID = "你的公众号appid";
$appSecret = "你的公众号secret";

$url = $_REQUEST[‘url‘];
$url = base64_decode($url);

$jssdk = new JSSDK($appID, $appSecret);
$signPackage = $jssdk->getSignPackage($url); 
$signPackage[‘jsApiList‘] = array(‘checkJsApi‘, ‘chooseImage‘, 
            ‘onMenuShareTimeline‘, ‘onMenuShareAppMessage‘, 
            ‘onMenuShareQQ‘, ‘previewImage‘, ‘uploadImage‘, 
            ‘downloadImage‘, ‘getNetworkType‘);
echo json_encode($signPackage);
?
>

php版本号流程都是一样。仅仅是语言差异罢了。

6. 写个demo来验证一下

因为微信团队限制没有提供主动分享的接口，我们仅仅能准备好要分享的数据。等到用户点击右上角的分享button的时候，才把我们之前准备好的数据分享出去。

demo包括一个能够动态设置文本的input标签，你能够动态改动其内容，然后点击微信右上角的分享给朋友查看效果。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Content-Type" content="type=text/html; charset=utf-8"/>
    <title>wechat-jssdk demo</title>
    <style>
    body {
        text-align: center;
    }
    input {
        width: 200px;
        height: 80px;
    font-size:40px;
    }
    </style>
    <script type="text/javascript" src = "http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript">
        function get(uri) {
            return http(uri, ‘GET‘, null);  
        }
    function http(uri, method, data, headers) {
        alert(‘promise: ‘ + typeof Promise);
        return new Promise(function(resolve, reject) {
            var xhr = new XMLHttpRequest();
        xhr.open(method, uri, true);
        if(headers) {
        for(var p in headers) {
            xhr.setRequestHeader(p, headers[p]);
        }
        }
        xhr.addEventListener(‘readystatechange‘, function(e) {
        if(xhr.readyState === 4) {
            if(String(xhr.status).match(/^2\d\d$/)) {
            try {
                var data = JSON.parse(xhr.responseText);
                resolve(data);
            }
            catch(e) {
                reject(e);  
            }
            }
            else {
            reject(xhr);
            }
        }
        });
        xhr.send(data);
    }); 
    }

        function wechatShare(cfg) {
        var inter = setInterval(function() {
        try {
            wx.config(cfg);
            clearInterval(inter);
        }
        catch(e) {
            console.log(‘wait ready‘);  
        }
        }, 200);

        var titleItem = document.getElementById(‘shareTitle‘);
        titleItem.onchange = function() {
        var shareTitle = titleItem.value;
        alert(‘shareTitle: ‘ + shareTitle);
        wx.onMenuShareAppMessage({
            title: shareTitle, // 分享标题
            desc: ‘TangIDE test onMenuShareAppMessage‘, // 分享描写叙述
            link: window.location.href, // 分享链接
            imgUrl: ‘http://img1.bdstatic.com/static/common/widget/search_box_home/logo/home_white_logo_0ddf152.png‘,
            type: ‘link‘, // 分享类型,music、video或link，不填默觉得link
            success: function () { 
            // 用户确认分享后运行的回调函数
            },
            cancel: function () { 
            // 用户取消分享后运行的回调函数
            }
           });
        };

        wx.ready(function() {
        /*
            wx.onMenuShareAppMessage({
            title: ‘1234567‘, // 分享标题
            desc: ‘TangIDE test onMenuShareAppMessage‘, // 分享描写叙述
            link: window.location.href, // 分享链接
            imgUrl: ‘http://img1.bdstatic.com/static/common/widget/search_box_home/logo/home_white_logo_0ddf152.png‘,
            type: ‘link‘, // 分享类型,music、video或link，不填默觉得link
            success: function () { 
                // 用户确认分享后运行的回调函数
            },
            cancel: function () { 
                // 用户取消分享后运行的回调函数
            }
            });
        */
        });

        wx.error(function(res) {

        });
        }

    function regConfig() {
        var uri = ‘http://www.i5r.com.cn/weixin/php/json_config.php‘ +
                ‘?url=‘ + window.btoa(location.href);
        get(uri).then(function(data) {
            data.debug = true;
        wechatShare(data);
        }).catch(function(err) {
            alert(‘request error:‘ + err);  
        });
    }

    window.onload = function() {
        setTimeout(regConfig, 600);
    };
    </script>
</head>
<body>
    <p><input placeholder="分享标题" type="text" id="shareTitle" required="required"/></p>
</body>
</html>

????config信息验证后会运行ready方法。全部接口调用都必须在config接口获得结果之后，config是一个client的异步操作。所以假设须要在页面载入时就调用相关接口。则须把相关接口放在ready函数中调用来确保正确运行。对于用户触发时才调用的接口。则能够直接调用，不须要放在ready函数中。所以说假设须要分享的东西不变，就直接放在ready事件处理函数去做号了(如上面demo的ready事件处理函数)，假设要分享的东西一直在变，就像demo演示的那样动态的改动要分享的title。

demo演示(微信环境)

7. TangIDE与微信SDK的结合

    上面的这些代码看似有点多，只是幸好强大的tangIDE已经帮我们完毕非常多工作了：
- [1] 提供微信配置控件，自己主动完毕微信JSSDK环境搭建

        打开TangIDE在左側控件栏。SNS控件->微信设置直接拖入你须要调用jssdk接口的场景就可以。
- [2] 各种SNS组件支持
        打开TangIDE在左側控件栏。SNS控件选择想要的组件直接拖入你须要调用的场景就可以。

end

微信JSSDK使用指南

标签：iter   sso   异步   1.0   更新   tco   事件处理   tor   nop   

原文地址：http://www.cnblogs.com/gavanwanggw/p/7152086.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！