配置并学习微信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

demo地址 http://www.qq210.com/shoutu/android

配置公众号：微信后台-公众号设置-功能设置-JS接口安全域名

引入JS文件：

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

配置js接口接入的配置（根据附录1获取签名）：

wx.config({
          debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。上线需设置false
          appId: 'wx693f4c6207512348b33', // 必填，公众号的唯一标识 微信后台-开发者中心
          timestamp: , // 必填，生成签名的时间戳
          nonceStr: '', // 必填，生成签名的随机串
          signature: '',// 必填，签名，见附录1
          jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      });

access_token ,需要后台缓存jsapi_ticket,有效期7200秒
根据access_token获取jsapi_ticket ,需要后台缓存jsapi_ticket,有效期7200秒

根据sha1(jsapi_ticket+url+timestamp+自定义随机串)求出配置中的signature

$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");

        //3.签名算法 
 
        // 3.1.构造拼接串
        $view_data['timestamp'] = $timestamp = time();
        $view_data['noncestr'] = $noncestr = md5($timestamp);
        $url = base_url();
        $string = "jsapi_ticket={$jsapi_ticket}&noncestr={$noncestr}&timestamp={$timestamp}&url={$url}";
        log_message('error', "构造拼接串string=$string");
 
        // 3.2.sha1拼接串
        $view_data['signature'] = sha1($string);
        $this->load->view('index.html', $view_data);

总结下上面求取签名问题
1. sae上的curl不支持https，换成SaeFetchurl去获取:封装成方法sae_fetchurl（$url, $post_data）
2. json_decode的结果是对象，折腾很久：传人第二个参数true就可以返回数组形式
3. SAE版的CI缓存类数据缓存获取用get() 而不是demo里面的get_metadata()，这个是获取包括缓存时间数据

订阅号的可以调用的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'
          ] 
      });

测试是否验证成功

// 微信
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));
      }
    });
  };
});

在微信浏览器测试，调用结果功能成功！

测试demo http://www.qq210.com/shoutu/android

因为漏了copy签名算法上来，补充上如蓝色部分谢谢陆先生的提示

posted @ 2015-01-10 22:33 yo胡yo 阅读(3650) 评论(5) 编辑收藏举报

刷新页面返回顶部

yo胡yo

配置并学习微信JS-SDK（1）

公告