搜尋
首頁微信小程式微信開發微信公眾平台開發網頁取得使用者地理位置

微信公眾平台開發網頁取得使用者地理位置

高洛峰
高洛峰
Feb 28, 2017 am 10:11 AM

在這篇微信公眾平台開發教學中，我們將介紹如何在網頁中取得使用者的地理位置資訊。

本文分為以下二部分：

  1. 產生JS-SDK權限驗證簽章

  2. 使用地理位置介面取得座標

 

一、微信JS-SDK

1. 獲得Access Token

access token的取得方法前面有介紹，詳情請見 微信公眾平台開發(26) ACCESS TOKEN

2. 取得jsapi_ticket

產生簽章之前必須先了解jsapi_ticket，jsapi_ticket是公眾號碼用於呼叫微信JS介面的臨時票據。正常情況下，jsapi_ticket的有效期限為7,200秒，透過access_token來取得。由於取得jsapi_ticket的api呼叫次數非常有限，頻繁刷新jsapi_ticket會導致api呼叫受限，影響自身業務，開發者必須在自己的服務全域快取jsapi_ticket 。

參考以下文件取得access_token（有效期7200秒，開發者必須在自己的服務全域快取access_token）：
用第一步拿到的access_token 採用http GET方式請求取得jsapi_ticket（有效期限7200秒，開發者必須在自己的服務全域快取jsapi_ticket），介面位址如下

#
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

成功傳回如下JSON：

#
{
    "errcode":0,
    "errmsg":"ok",
    "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
    "expires_in":7200
}

取得jsapi_ticket之後，就可以產生JS-SDK權限驗證的簽章了。

3. 簽章演算法實作

簽章產生規則如下：參與簽章的欄位包含noncestr（隨機字串）​​, 有效的jsapi_ticket, timestamp（時間戳記）, url（目前網頁的URL ，不包含#及其後面部分） 。所有待簽章參數依照欄位名稱的ASCII 碼從小到大排序（字典序）後，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字串string1。這裡要注意的是所有參數名稱都是小寫字元。對string1作sha1加密，欄位名稱和欄位值都採用原始值，不進行URL 轉義。

即signature=sha1(string1)。 範例：

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457url=http://mp.weixin.qq.com?params=value

步驟1. 對所有待簽章參數依照欄位名稱的ASCII 尺寸從小到大排序（字典序）後，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字串string1：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

步驟2.對string1進行sha1簽名，得到signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed

#完整程式碼如下

##

<?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 expire_time 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;
        $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 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;
        $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;
  }
}

微信公眾平台開發網頁取得使用者地理位置

# # 

二、網頁取得地理位置座標

1. 綁定網域名稱

先登入微信公眾平台進入「公眾號設定」的「功能設定」內填寫「 JS介面安全域名」。

2. 取得簽章套件

<?php require_once "jssdk.php";
$jssdk = new JSSDK("yourAppID", "yourAppSecret");
$signPackage = $jssdk->GetSignPackage();
?>

3. 引入JS檔案

在需要呼叫JS介面的頁面引入如下JS文件，（支援https）：

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

4.透過config介面注入權限驗證設定

所有需要使用JS-SDK的頁面必須先註入配置訊息，否則將無法呼叫。 

 wx.config({
    debug: false,
    appId: '<?php  echo $signPackage["appId"];?>',
    timestamp: <?php  echo $signPackage["timestamp"];?>,
    nonceStr: '<?php  echo $signPackage["nonceStr"];?>',
    signature: '<?php  echo $signPackage["signature"];?>',
    jsApiList: [        // 所有要调用的 API 都要加到这个列表中
        'checkJsApi',        'openLocation',        'getLocation'
      ]
});

5. 透過ready介面處理成功驗證

地理位置需要在頁面載入時就調用，需要把相關介面放在ready函數中呼叫來確保正確執行

wx.ready(function () {
});

#5.1 透過checkJsApi判斷目前客戶端版本是否支援指定取得地理位置

#

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;
        }
    }
});

微信公眾平台開發網頁取得使用者地理位置

5.2. 使用getLocation介面取得地理位置座標

微信公眾平台開發網頁取得使用者地理位置

wx.getLocation({
    success: function (res) {
        var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
        var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
        var speed = res.speed; // 速度，以米/每秒计
        var accuracy = res.accuracy; // 位置精度
    },
    cancel: function (res) {
        alert('用户拒绝授权获取地理位置');
    }
});

## 

三、實作效果

彈出要求取得頁面

##########JS成功取得地理位置參數########## ##############更多微信公眾平台開發網頁取得使用者地理位置相關文章請關注PHP中文網！ ###### ###
陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

刺客信條陰影：貝殼謎語解決方案
4 週前ByDDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前ByDDD
在哪裡可以找到原子中的起重機控制鑰匙卡
4 週前ByDDD
<🎜>：死鐵路 - 如何完成所有挑戰
1 個月前ByDDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前ByDDD
顯示更多

熱工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7723
15
Java教學
1643
14
CakePHP 教程
1396
52
Laravel 教程
1290
25
PHP教程
1233
29
顯示更多