微信网页授权之地理位置获取----微信js-sdk

我们通过微信浏览器打开页面时,有时会提示要获取地理位置信息.点击同意后,自己的地理位置信息就会相应的显示在页面,同时通过数据库的查询,以实现以地理位置分类的逻辑业务.

本例通过thinkphp5来完成,下面介绍实现详细步骤!

首先我们引入一个类:

下载地址如下: https://pan.baidu.com/s/1mhLkHF6 密码: vgq5

需要注意的,类中获取的api_ticket和jsapi_ticket有效期是7200秒.通过access_token来获取。由于获取jsapi_ticket和api_ticket的api调用次数非常有限，频繁刷新他们会导致api调用受限，影响自身业务，必须在自己的服务全局缓存他们.

所以以下利用了tp5的cache缓存机制来存储他们.

我这里为了省事,直接将微信的appid和appsecret存在了配置文件中,并在类中直接常量定义

下载好类Wxjssdk.php,我把它放在了extends的wxweb目录下,并且命名空间为wxweb

<?phpnamespace wxweb;/*    方倍工作室 http://www.fangbei.org/    CopyRight 2014 All Rights Reserved*/define('APPID',         config('appid')); define('APPSECRET',     config('appsecret'));class Wxjssdk{    public $appid = APPID;    public $appsecret = APPSECRET;    //构造函数，获取Access Token    public function __construct($appid = NULL, $appsecret = NULL)    {        if($appid && $appsecret){            $this->appid = $appid;            $this->appsecret = $appsecret;        }        // $res = file_get_contents(EXTEND_PATH.'/wxweb/access_token.json');        // $result = json_decode($res, true);        // $this->expires_time = $result["expires_time"];        // $this->access_token = $result["access_token"];        $this->access_token = cache('access_token');                if(!cache('expires_time')){            $this->expires_time = 0;        }else{            $this->expires_time = cache('expires_time');        }        if (time() > ($this->expires_time + 3600)){            $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$this->appid."&secret=".$this->appsecret;            $res = $this->http_request($url);            $result = json_decode($res, true);            $this->access_token = $result["access_token"];            $this->expires_time = time();            // file_put_contents(EXTEND_PATH.'/wxweb/access_token.json', '{"access_token": "'.$this->access_token.'", "expires_time": '.$this->expires_time.'}');            cache('access_token',$this->access_token);            cache('expires_time',$this->expires_time);        }    }    //生成长度16的随机字符串    public 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;    }        //获得微信卡券api_ticket    public function getCardApiTicket()    {        // $res = file_get_contents(EXTEND_PATH.'/wxweb/cardapi_ticket.json');        // $result = json_decode($res, true);        // $this->cardapi_ticket = $result["cardapi_ticket"];        // $this->cardapi_expire = $result["cardapi_expire"];        $this->cardapi_ticket = cache('cardapi_ticket');                if(!cache('cardapi_expire')){            $this->cardapi_expire = 0;        }else{            $this->cardapi_expire = cache('cardapi_expire');        }        if (time() > ($this->cardapi_expire + 3600)){            $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=wx_card&access_token=".$this->access_token;            $res = $this->http_request($url);            $result = json_decode($res, true);            $this->cardapi_ticket = $result["ticket"];            $this->cardapi_expire = time();            // file_put_contents(EXTEND_PATH.'/wxweb/cardapi_ticket.json', '{"cardapi_ticket": "'.$this->cardapi_ticket.'", "cardapi_expire": '.$this->cardapi_expire.'}');            cache('cardapi_ticket',$this->cardapi_ticket);            cache('cardapi_expire',$this->cardapi_expire);        }        return $this->cardapi_ticket;    }        //cardSign卡券签名    public function get_cardsign($bizObj)    {        //字典序排序        asort($bizObj);        //URL键值对拼成字符串        $buff = "";        foreach ($bizObj as $k => $v){            $buff .= $v;        }        //sha1签名        return sha1($buff);    }        //获得JS API的ticket    private function getJsApiTicket()     {        // $res = file_get_contents(EXTEND_PATH.'/wxweb/jsapi_ticket.json');        // $result = json_decode($res, true);        // $this->jsapi_ticket = $result["jsapi_ticket"];        // $this->jsapi_expire = $result["jsapi_expire"];                $this->jsapi_ticket = cache('jsapi_ticket');                if(!cache('jsapi_expire')){            $this->jsapi_expire = 0;        }else{            $this->jsapi_expire = cache('jsapi_expire');        }                if (time() > ($this->jsapi_expire + 3600)){            $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=".$this->access_token;            $res = $this->http_request($url);            $result = json_decode($res, true);            $this->jsapi_ticket = $result["ticket"];            $this->jsapi_expire = time();            // file_put_contents(EXTEND_PATH.'/wxweb/jsapi_ticket.json', '{"jsapi_ticket": "'.$this->jsapi_ticket.'", "jsapi_expire": '.$this->jsapi_expire.'}');            cache('jsapi_ticket',$this->jsapi_ticket);            cache('jsapi_expire',$this->jsapi_expire);        }        return $this->jsapi_ticket;    }    //获得签名包    public function getSignPackage() {        $jsapiTicket = $this->getJsApiTicket();        $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();        $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;    }        //HTTP请求（支持HTTP/HTTPS，支持GET/POST）    protected function http_request($url, $data = null)    {        $curl = curl_init();        curl_setopt($curl, CURLOPT_URL, $url);        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);        if (!empty($data)){            curl_setopt($curl, CURLOPT_POST, 1);            curl_setopt($curl, CURLOPT_POSTFIELDS, $data);        }        curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);        $output = curl_exec($curl);        curl_close($curl);        return $output;    }}

然后在控制器如下:

<?phpnamespace app\index\controller;use app\index\model\User;use wxweb\Wxjssdk;class Index{    public function index()    {        $wxjssdk = new Wxjssdk();        $signPackage = $wxjssdk->GetSignPackage();        return view('',['res'=>$signPackage]);    }}

$signPackage就是微信js-sdk的config接口注入权限验证配信息

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

然后在视图页面,首先引入微信js,必须项

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

然后写js文件如下:

<script>  //微信config配置信息注入    wx.config({    debug: false,    appId: '{$res.appId}',    timestamp: '{$res.timestamp}',    nonceStr: '{$res.nonceStr}',    signature: '{$res.signature}',    jsApiList: [    'checkJsApi',    'openLocation',    'getLocation',    ]    });    wx.checkJsApi({    jsApiList: [        'getLocation'    ],    success: function (res) {        // alert(JSON.stringify(res));        // alert(JSON.stringify(res.checkResult.getLocation));        if (res.checkResult.getLocation == false) {            alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');            return;        }    }});    wx.ready(function () {        //自动执行的        wx.checkJsApi({            jsApiList: [                'getLocation',            ],            success: function (res) {            }        });        //如果不支持则不会执行        wx.getLocation({            success: function (res) {                // 用户同意后,将获取的位置基础信息(经度和纬度信息)请求到控制器                               //控制器中利用百度的api请求返回地理位置信息数据                $.get("/index/user/map",{ 'res':res },function(data){                    if(data.status == 0){                    $('#wx_location').html(data.result.addressComponent.city);                    }else{                        $('#wx_location').html('未知城市');                    }                });            },            cancel: function (res) {                alert('用户拒绝授权获取地理位置');            }        });    });    wx.error(function (res) {        alert(res.errMsg);    });</script>

ajax请求的控制中如下:

//获取用户地理位置信息        public function map()        {            $ak = '8gcWsC7GGjpiGsAN7hfEyXNPHr7wDz27';            $data = input('get.res/a');            $lat = $data['latitude'];            $lng = $data['longitude'];            $url = "http://api.map.baidu.com/geocoder/v2/?ak={$ak}&location={$lat},{$lng}&output=json&coordtype=gcj02ll";            $res = file_get_contents($url);            //百度地图返回的并不是json,而是字符串,需要自己在做一个处理            $res = json_decode($res,true);            return json($res);        }