【微信公众平台开发】微信JS-SDK开发

根据微信开发文档步骤如下：

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

JS接口安全域名设置 mi.com（前面不用带www/http,域名必须备案过）

2.引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持http）：/uploads/allimg/180404/1526233J2-0.jpg

3.通过config接口注入权限验证配置

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

4.通过ready接口处理成功验证

wx.ready(function(){

    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

5.通过error接口处理失败验证，测试时可以先不用这个

wx.error(function(res){

    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

});

GetSignPackage();
?>




  
  
  
   	



    

      

        
基础接口
        
分享接口
        
图像接口
        
音频接口
        
智能接口
        
设备信息接口
        
地理位置接口
        
界面操作接口
        
微信扫一扫接口
        
微信小店接口
        
微信卡券接口
        
微信支付接口
      
    
    

      
基础接口
      判断当前客户端是否支持指定JS接口
      checkJsApi

      
分享接口
      获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
      onMenuShareTimeline
      获取“分享给朋友”按钮点击状态及自定义分享内容接口
      onMenuShareAppMessage
      获取“分享到QQ”按钮点击状态及自定义分享内容接口
      onMenuShareQQ
      获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
      onMenuShareWeibo

      
图像接口
      拍照或从手机相册中选图接口
      chooseImage
      预览图片接口
      previewImage
      上传图片接口
      uploadImage
      下载图片接口
      downloadImage

      
音频接口
      开始录音接口
      startRecord
      停止录音接口
      stopRecord
      播放语音接口
      playVoice
      暂停播放接口
      pauseVoice
      停止播放接口
      stopVoice
      上传语音接口
      uploadVoice
      下载语音接口
      downloadVoice

      
智能接口
      识别音频并返回识别结果接口
      translateVoice

      
设备信息接口
      获取网络状态接口
      getNetworkType

      
地理位置接口
      使用微信内置地图查看位置接口
      openLocation
      获取地理位置接口
      getLocation

      
界面操作接口
      隐藏右上角菜单接口
      hideOptionMenu
      显示右上角菜单接口
      showOptionMenu
      关闭当前网页窗口接口
      closeWindow
      批量隐藏功能按钮接口
      hideMenuItems
      批量显示功能按钮接口
      showMenuItems
      隐藏所有非基础按钮接口
      hideAllNonBaseMenuItem
      显示所有功能按钮接口
      showAllNonBaseMenuItem

      
微信扫一扫
      调起微信扫一扫接口
      scanQRCode(微信处理结果)
      scanQRCode(直接返回结果)

      
微信小店接口
      跳转微信商品页接口
      openProductSpecificView

      
微信卡券接口
      批量添加卡券接口
      addCard
      调起适用于门店的卡券列表并获取用户选择列表
      chooseCard
      查看微信卡包中的卡券接口
      openCard

      
微信支付接口
      发起一个微信支付请求
      chooseWXPay
    
  

appId = $appId;
    $this->appSecret = $appSecret;
  }

  public function getSignPackage() {
    $jsapiTicket = $this->getJsApiTicket();

    // 注意 URL 一定要动态获取，不能 hardcode.
    $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "http://" : "http://";
    $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

    $timestamp = time();
    $nonceStr = $this->createNonceStr();

    // 这里参数的顺序要按照 key 值 ASCII 码升序排序
    $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$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 getJsApiTicket() {
    // jsapi_ticket 应该全局存储与更新，以下代码以写入到文件中做示例
    $data = json_decode(file_get_contents("jsapi_ticket.json"));
    if ($data->expire_time < time()) {
      $accessToken = $this->getAccessToken();
      // 如果是企业号用以下 URL 获取 ticket
      // $url = "http://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";
      $url = "http://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() + 7000;
        $data->jsapi_ticket = $ticket;
        $fp = fopen("jsapi_ticket.json", "w");
        fwrite($fp, json_encode($data));
        fclose($fp);
      }
    } else {
      $ticket = $data->jsapi_ticket;
    }

    return $ticket;
  }

  private function getAccessToken() {
    // access_token 应该全局存储与更新，以下代码以写入到文件中做示例
    $data = json_decode(file_get_contents("access_token.json"));
    if ($data->expire_time < time()) {
      // 如果是企业号用以下URL获取access_token
      // $url = "http://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
      $url = "http://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";
      $res = json_decode($this->httpGet($url));
      $access_token = $res->access_token;
      if ($access_token) {
        $data->expire_time = time() + 7000;
        $data->access_token = $access_token;
        $fp = fopen("access_token.json", "w");
        fwrite($fp, json_encode($data));
        fclose($fp);
      }
    } 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;
  }
}

注：上面的url变量一定得在前面微信公众平台设置的mi.com下的网址，即这个有JS-SDK功能的网页要放在mi.com下，要不然会出错。