实战模拟│微信 JSSDK 实现自定义分享、手机选图拍照、图片音频处理、地理位置、摇一摇等功能

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

<?php
class JSSDK{    private $appId;    private $appSecret;
    public function __construct($appId, $appSecret)    {        $this->appId = $appId;        $this->appSecret = $appSecret;    }
    public function getSignPackage()    {        $jsapiTicket = $this->getJsApiTicket();
        // 注意 URL 一定要动态获取，不能 hardcode.        $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";        $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
        $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 getJsApiTicket()    {        // jsapi_ticket 应该全局存储与更新，以下代码以写入到文件中做示例        $data = json_decode($this->get_php_file("jsapi_ticket.php"));        if ($data->expire_time < time()) {            $accessToken = $this->getAccessToken();            // 如果是企业号用以下 URL 获取 ticket            // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";            $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() + 7000;                $data->jsapi_ticket = $ticket;                $this->set_php_file("jsapi_ticket.php", json_encode($data));            }        } else {            $ticket = $data->jsapi_ticket;        }
        return $ticket;    }
    private function getAccessToken()    {        // access_token 应该全局存储与更新，以下代码以写入到文件中做示例        $data = json_decode($this->get_php_file("access_token.php"));        if ($data->expire_time < time()) {            // 如果是企业号用以下URL获取access_token            // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";            $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));            $access_token = $res->access_token;            if ($access_token) {                $data->expire_time = time() + 7000;                $data->access_token = $access_token;                $this->set_php_file("access_token.php", 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);        // 为保证第三方服务器与微信服务器之间数据传输的安全性，所有微信接口采用https方式调用，必须使用下面2行代码打开ssl安全校验。        // 如果在部署过程中代码在此处验证失败，请到 http://curl.haxx.se/ca/cacert.pem 下载新的证书判别文件。        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true);        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true);        curl_setopt($curl, CURLOPT_URL, $url);
        $res = curl_exec($curl);        curl_close($curl);
        return $res;    }
    private function get_php_file($filename)    {        return trim(substr(file_get_contents($filename), 15));    }
    private function set_php_file($filename, $content)    {        $fp = fopen($filename, "w");        fwrite($fp, "<?php exit();?>" . $content);        fclose($fp);    }}

<?phprequire_once "jssdk.php";$jssdk = new JSSDK("yourAppID", "yourAppSecret");$signPackage = $jssdk->GetSignPackage();?><!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body>
</body><script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script><script>    /*     * 注意：     * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。     * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。     * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html     *     * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：     * 邮箱地址：weixin-open@qq.com     * 邮件主题：【微信JS-SDK反馈】具体问题     * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。     */    wx.config({        debug: true,        appId: '<?php echo $signPackage["appId"];?>',        timestamp: <?php echo $signPackage["timestamp"];?>,        nonceStr: '<?php echo $signPackage["nonceStr"];?>',        signature: '<?php echo $signPackage["signature"];?>',        jsApiList: [            // 所有要调用的 API 都要加到这个列表中        ]    });    wx.ready(function () {        // 在这里调用 API    });</script></html>

wx.config({    debug: true,    appId: '<?php echo $signPackage["appId"];?>',    timestamp: <?php echo $signPackage["timestamp"];?>,    nonceStr: '<?php echo $signPackage["nonceStr"];?>',    signature: '<?php echo $signPackage["signature"];?>',    jsApiList: [        'checkJsApi',        'onMenuShareTimeline',        'onMenuShareAppMessage',        'onMenuShareQQ',        'onMenuShareWeibo',    ]});
wx.ready(function () {    // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口    wx.onMenuShareTimeline({    title: '', // 分享标题    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致    imgUrl: '', // 分享图标    success: function () {        // 用户点击了分享后执行的回调函数    }  }),    // 获取“分享给朋友”按钮点击状态及自定义分享内容接口  wx.onMenuShareAppMessage({    title: '', // 分享标题    desc: '', // 分享描述    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致    imgUrl: '', // 分享图标    type: '', // 分享类型,music、video或link，不填默认为link    dataUrl: '', // 如果 type 是music或video，则要提供数据链接，默认为空    success: function () {        // 用户点击了分享后执行的回调函数    }  });    wx.onMenuShareWeibo({    title: '', // 分享标题    desc: '', // 分享描述    link: '', // 分享链接    imgUrl: '', // 分享图标    success: function () {      // 用户确认分享后执行的回调函数    },    cancel: function () {      // 用户取消分享后执行的回调函数    }  });});

wx.config({    debug: true,    appId: '<?php echo $signPackage["appId"];?>',    timestamp: <?php echo $signPackage["timestamp"];?>,    nonceStr: '<?php echo $signPackage["nonceStr"];?>',    signature: '<?php echo $signPackage["signature"];?>',    jsApiList: [        'checkJsApi',        'chooseImage',        'previewImage',        'downloadImage',        'getLocalImgData',    ]});
// 拍照或从手机相册中选图接口wx.chooseImage({  count: 1, // 默认9  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  success: function (res) {  var localIds = res.localIds; // 返回选定照片的本地 ID 列表，localId可以作为 img 标签的 src 属性显示图片  }});
// 预览图片接口wx.previewImage({  current: '', // 当前显示图片的 http 链接  urls: [] // 需要预览的图片 http 链接列表});
// 上传图片接口wx.uploadImage({  localId: '', // 需要上传的图片的本地ID，由 chooseImage 接口获得  isShowProgressTips: 1, // 默认为1，显示进度提示  success: function (res) {    var serverId = res.serverId; // 返回图片的服务器端ID  }});
// 下载图片接口wx.downloadImage({  serverId: '', // 需要下载的图片的服务器端ID，由 uploadImage 接口获得  isShowProgressTips: 1, // 默认为1，显示进度提示  success: function (res) {    var localId = res.localId; // 返回图片下载后的本地ID  }});

wx.config({    debug: true,    appId: '<?php echo $signPackage["appId"];?>',    timestamp: <?php echo $signPackage["timestamp"];?>,    nonceStr: '<?php echo $signPackage["nonceStr"];?>',    signature: '<?php echo $signPackage["signature"];?>',    jsApiList: [        'checkJsApi',        'startRecord',        'stopRecord',        'onVoiceRecordEnd',        'playVoice',        'pauseVoice',        'stopVoice',        'onVoicePlayEnd',        'uploadVoice',        'downloadVoice'    ]});
// 开始录音接口，可以放在点击事件中触发wx.startRecord();
// 停止录音接口wx.stopRecord({  success: function (res) {    var localId = res.localId;  }});
// 监听录音自动停止接口wx.onVoiceRecordEnd({  // 录音时间超过一分钟没有停止的时候会执行 complete 回调  complete: function (res) {    var localId = res.localId;  }});
// 播放语音接口wx.playVoice({  localId: '' // 需要播放的音频的本地ID，由 stopRecord 接口获得});
// 暂停播放接口wx.pauseVoice({  localId: '' // 需要暂停的音频的本地ID，由 stopRecord 接口获得});
// 上传语音接口wx.uploadVoice({  localId: '', // 需要上传的音频的本地ID，由 stopRecord 接口获得  isShowProgressTips: 1, // 默认为1，显示进度提示  success: function (res) {    var serverId = res.serverId; // 返回音频的服务器端ID  }});

// 使用微信内置地图查看位置接口wx.openLocation({  latitude: 0, // 纬度，浮点数，范围为90 ~ -90  longitude: 0, // 经度，浮点数，范围为180 ~ -180。  name: '', // 位置名  address: '', // 地址详情说明  scale: 1, // 地图缩放级别,整型值,范围从1~28。默认为最大  infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转});
// 获取地理位置接口wx.getLocation({  type: 'wgs84', // 默认为wgs84的 gps 坐标，如果要返回直接给 openLocation 用的火星坐标，可传入'gcj02'  success: function (res) {    var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90    var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。    var speed = res.speed; // 速度，以米/每秒计    var accuracy = res.accuracy; // 位置精度  }});

// 开启查找周边 ibeacon 设备接口wx.startSearchBeacons({  ticket:"",  //摇周边的业务 ticket , 系统自动添加在摇出来的页面链接后面  complete:function(argv){    //开启查找完成后的回调函数  }});
// 关闭查找周边 ibeacon 设备接口wx.stopSearchBeacons({  complete:function(res){    //关闭查找完成后的回调函数  }});
// 监听周边 ibeacon 设备接口wx.onSearchBeacons({  complete:function(argv){    //回调函数，可以数组形式取得该商家注册的在周边的相关设备列表  }});

// 调起微信扫一扫接口wx.scanQRCode({  needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，  scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有  success: function (res) {    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果  }});