主页> 常见问题> 【微信公众平台开发】微信JS-SDK开发

【微信公众平台开发】微信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
});


注:appId从公众号里面获取,timestamp、nonceStr、signature临时通过按微信规定的规则发送url获取

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

wx.ready(function(){

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


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

wx.error(function(res){

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

});

JS-SDK网页所有接口代码如下:

GetSignPackage();
?>




  
  微信JS-SDK Demo
  
   	


基础接口

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

分享接口

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

图像接口

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

音频接口

开始录音接口 停止录音接口 播放语音接口 暂停播放接口 停止播放接口 上传语音接口 下载语音接口

智能接口

识别音频并返回识别结果接口

设备信息接口

获取网络状态接口

地理位置接口

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

界面操作接口

隐藏右上角菜单接口 显示右上角菜单接口 关闭当前网页窗口接口 批量隐藏功能按钮接口 批量显示功能按钮接口 隐藏所有非基础按钮接口 显示所有功能按钮接口

微信扫一扫

调起微信扫一扫接口

微信小店接口

跳转微信商品页接口

微信卡券接口

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

微信支付接口

发起一个微信支付请求


JSSDK类
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下,要不然会出错。

【温馨提示】倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至55506560@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于本站观点。用户与作者的任何交易与本站无关,请知悉。

客服
套餐咨询,操作答疑等
在线客服