配置并学习微信JS-SDK(1)

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
微信JS-SDK demo http://demo.open.weixin.qq.com/jssdk/#menu-device

微信JS-SDK 说明文档:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

  1. 配置公众号:微信后台-公众号设置-功能设置-JS接口安全域名
  2. 引入JS文件:
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  3. 配置js接口接入的配置(根据附录1获取签名):
    wx.config({
              debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。上线需设置false
              appId: ‘wx693f4c6207512348b33‘, // 必填,公众号的唯一标识 微信后台-开发者中心
              timestamp: , // 必填,生成签名的时间戳
              nonceStr: ‘‘, // 必填,生成签名的随机串
              signature: ‘‘,// 必填,签名,见附录1
              jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
          });
    1. access_token ,需要后台缓存jsapi_ticket,有效期7200秒
    2. 根据access_token获取jsapi_ticket ,需要后台缓存jsapi_ticket,有效期7200秒
    3. 根据sha1(jsapi_ticket+url+timestamp+自定义随机串)求出配置中的signature
    4. $this->load->driver( ‘cache‘ );
      
              //获取access_token,jsapi_ticket缓存
              $access_token = $this->cache->kvdb->get( ‘access_token‘ );
              $jsapi_ticket = $this->cache->kvdb->get( ‘jsapi_ticket‘ );
              log_message(‘error‘, "获取access_token={$access_token},jsapi_ticket={$access_token}缓存");
      
              //如果不存在access_token缓存
              if ( ! $access_token AND ! $jsapi_ticket ) {
                  log_message(‘error‘, ‘如果不存在access_token缓存‘);
      
                  $this->load->library(‘MyFetchurl‘);
      
                  //1.获取access_token
                  $access_token_json = $this->myfetchurl->https_get( "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".APPID."&secret=".APPSECRET );
      
                  //把 json_decode() 后的对象当作数组使用,需要加第二个参数才是数组返回
                  $access_token_decode = json_decode( $access_token_json, true );
      
                  $access_token = isset( $access_token_decode[‘access_token‘] ) ? $access_token_decode[‘access_token‘] : ‘‘;
                  log_message(‘error‘, "获取access_token={$access_token}");
      
                  //设置access_token缓存
                  $result = $this->cache->kvdb->save( ‘access_token‘, $access_token, EXPIRE_TIME );
                  log_message(‘error‘, "设置access_token缓存$result");
      
                  //2.获取jsapi_ticket
                  $jsapi_ticket_json = $this->myfetchurl->https_get( "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$access_token}&type=jsapi" );
                  $jsapi_ticket_decode = json_decode( $jsapi_ticket_json, true );
                  $jsapi_ticket = isset( $jsapi_ticket_decode[‘ticket‘] ) ? $jsapi_ticket_decode[‘ticket‘] : ‘‘;        
                  log_message(‘error‘, "获取jsapi_ticket=$jsapi_ticket");
      
                  //设置jsapi_ticket缓存
                  $result = $this->cache->kvdb->save( ‘jsapi_ticket‘, $jsapi_ticket, EXPIRE_TIME );    
                  log_message(‘error‘, "设置jsapi_ticket缓存=$jsapi_ticket");
    5.   总结下上面求取签名问题
      1. sae上的curl不支持https,换成SaeFetchurl去获取
      2. json_decode的结果是对象,折腾很久:传人第二个参数true就可以返回数组形式
      3. SAE版的CI缓存类数据缓存获取用get() 而不是demo里面的get_metadata(),这个是获取包括缓存时间数据
    6. 订阅号的可以调用的js接口以及最后配置文件如下
      wx.config({
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                appId: ‘wx693f4c620712348b‘, // 必填,公众号的唯一标识
                timestamp: ‘<?=$timestamp?>‘, // 必填,生成签名的时间戳
                nonceStr: ‘<?=$noncestr?>‘, // 必填,生成签名的随机串
                signature: ‘<?=$signature?>‘,// 必填,签名,见附录1
                jsApiList: [// 必填,需要使用的JS接口列表,所有JS接口列表见附录2
                  ‘checkJsApi‘,
                  ‘hideMenuItems‘,
                  ‘showMenuItems‘,
                  ‘hideAllNonBaseMenuItem‘,
                  ‘showAllNonBaseMenuItem‘,
                  ‘translateVoice‘,
                  ‘startRecord‘,
                  ‘stopRecord‘,
                  ‘onRecordEnd‘,
                  ‘playVoice‘,
                  ‘pauseVoice‘,
                  ‘stopVoice‘,
                  ‘uploadVoice‘,
                  ‘downloadVoice‘,
                  ‘chooseImage‘,
                  ‘previewImage‘,
                  ‘uploadImage‘,
                  ‘downloadImage‘,
                  ‘getNetworkType‘,
                  ‘openLocation‘,
                  ‘getLocation‘,
                  ‘hideOptionMenu‘,
                  ‘showOptionMenu‘,
                  ‘closeWindow‘,
                  ‘scanQRCode‘
                ] 
            });
  4. 测试是否验证成功
    // 微信
    wx.error(function(res){
      console.log(‘验证失败‘);
    });
    
    wx.ready(function(){
      document.querySelector(‘#checkJsApi‘).onclick = function() {
        wx.checkJsApi({
          jsApiList:[
            ‘getNetworkType‘,
            ‘previewImage‘
          ],
          success:function(res){
            alert(JSON.string)
          }
        });
      }
    
      // 6 设备信息接口
      // 6.1 获取当前网络状态
      document.querySelector(‘#getNetworkType‘).onclick = function () {
        wx.getNetworkType({
          success: function (res) {
            alert(res.networkType);
          },
          fail: function (res) {
            alert(JSON.stringify(res));
          }
        });
      };
    });

在微信浏览器测试,调用结果功能成功! 配置并学习微信JS-SDK(1)

测试demo http://jdhu.sinaapp.com

配置并学习微信JS-SDK(1)

上一篇:微信公众平台开放JS-SDK(微信内网页开发工具包)


下一篇:微信JS SDK PHP Demo