微信网页授权之地理位置获取----微信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

<?php

namespace wxweb;

/*
方倍工作室 htt
4000
p://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;
}
}

然后在控制器如下:

<?php
namespace 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);
}