微信公眾號(hào)獲取用戶地理位置并列出附近的門店的示例代碼
思路分析:
1、在微信公眾號(hào)內(nèi)獲取用戶地理位置
需要js-sdk簽名包(關(guān)于如何獲取文檔有介紹)
2、根據(jù)獲取的地理位置ajax去后臺(tái)請(qǐng)求,通過(guò)sql語(yǔ)句,查詢中距離最近的門店(sql語(yǔ)句在網(wǎng)上搜的,位置是通過(guò)后臺(tái)添加的)
3、根據(jù)城市查詢門店列表,使用通過(guò)表單提交事件,ajax請(qǐng)求后臺(tái)獲取列表
4、百度地圖導(dǎo)航頁(yè)面要注意引入地址
一、開(kāi)始開(kāi)發(fā)
1、該功能的實(shí)現(xiàn)需要調(diào)用微信公眾號(hào)的js-sdk接口實(shí)現(xiàn)
簡(jiǎn)介:
微信JS-SDK是微信公眾平臺(tái)面向網(wǎng)頁(yè)開(kāi)發(fā)者提供的基于微信內(nèi)的網(wǎng)頁(yè)開(kāi)發(fā)工具包。
通過(guò)使用微信JS-SDK,網(wǎng)頁(yè)開(kāi)發(fā)者可借助微信高效地使用拍照、選圖、語(yǔ)音、位置等手機(jī)系統(tǒng)的能力,同時(shí)可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力,為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁(yè)體驗(yàn)。
2、調(diào)用微信js-sdk的步驟:官方的網(wǎng)址:https://mp.weixin.qq.com/wiki
步驟一:綁定域名
先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。
步驟二:引入JS文件
在需要調(diào)用JS接口的頁(yè)面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js
備注:支持使用 AMD/CMD 標(biāo)準(zhǔn)模塊加載方法加載
步驟三:通過(guò)config接口注入權(quán)限驗(yàn)證配置
所有需要使用JS-SDK的頁(yè)面必須先注入配置信息,否則將無(wú)法調(diào)用(同一個(gè)url僅需調(diào)用一次,對(duì)于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用,目前Android微信客戶端不支持pushState的H5新特性,所以使用pushState來(lái)實(shí)現(xiàn)web app的頁(yè)面會(huì)導(dǎo)致簽名失敗,此問(wèn)題會(huì)在Android6.2中修復(fù))
具體的使用可以查看官方的文檔
wx.config({ debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái),若要查看傳入的參數(shù),可以在pc端打開(kāi),參數(shù)信息會(huì)通過(guò)log打出,僅在pc端時(shí)才會(huì)打印。 appId: '', // 必填,公眾號(hào)的唯一標(biāo)識(shí) timestamp: , // 必填,生成簽名的時(shí)間戳 nonceStr: '', // 必填,生成簽名的隨機(jī)串 signature: '',// 必填,簽名,見(jiàn)附錄1 jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表見(jiàn)附錄2 });
步驟四:通過(guò)ready接口處理成功驗(yàn)證
wx.ready(function(){ // config信息驗(yàn)證后會(huì)執(zhí)行ready方法,所有接口調(diào)用都必須在config接口獲得結(jié)果之后,config是一個(gè)客戶端的異步操作,所以如果需要在頁(yè)面加載時(shí)就調(diào)用相關(guān)接口,則須把相關(guān)接口放在ready函數(shù)中調(diào)用來(lái)確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口,則可以直接調(diào)用,不需要放在ready函數(shù)中。 });
步驟五:通過(guò)error接口處理失敗驗(yàn)證
wx.error(function(res){ // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù),如簽名過(guò)期導(dǎo)致驗(yàn)證失敗,具體錯(cuò)誤信息可以打開(kāi)config的debug模式查看,也可以在返回的res參數(shù)中查看,對(duì)于SPA可以在這里更新簽名。 })
自己的程序代碼附上(我做的是獲取用戶的地理位置,就是出現(xiàn)一個(gè)獲取地理位置的彈窗):
html頁(yè)面:
//引入微信js文件 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script type="text/javascript"> //配置信息驗(yàn)證接口 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: [ // 所有要調(diào)用的 API 都要加到這個(gè)列表中 'checkJsApi', 'openLocation', 'getLocation' ] }); //驗(yàn)證之后進(jìn)入該函數(shù),所有需要加載頁(yè)面時(shí)調(diào)用的接口都必須寫在該里面 wx.ready(function () { //基礎(chǔ)接口判斷當(dāng)前客戶端版本是否支持指定JS接口 wx.checkJsApi({ jsApiList: [ 'getLocation' ], success: function (res) { // alert(JSON.stringify(res)); // alert(JSON.stringify(res.checkResult.getLocation)); if (res.checkResult.getLocation == false) { alert('你的微信版本太低,不支持微信JS接口,請(qǐng)升級(jí)到最新的微信版本!'); return; } } }); //微信獲取地理位置并拉取用戶列表(用戶允許獲取用戶的經(jīng)緯度) wx.getLocation({ success: function (res) { var latitude = res.latitude; // 緯度,浮點(diǎn)數(shù),范圍為90 ~ -90 var longitude = res.longitude; // 經(jīng)度,浮點(diǎn)數(shù),范圍為180 ~ -180。 //去數(shù)據(jù)庫(kù)查詢獲取附近的門店 $.ajax({ type: 'post', url: '__CONTROLLER__/shopList', dataType: 'json', data: {"latitude": latitude,"longitude":longitude}, success:function(shopInfo){ //index是下表,el是值 $(shopInfo).each(function(index,el){ $("#list").append('<div> <a href="__CONTROLLER__/shopDetail/shop_id/'+el.shop_id+'" rel="external nofollow" > <img src="'+el.shop_logo.substring(1)+'"/> <div> <h4>'+el.shop_name+'</h4> <div>'+el.shop_position+'</div> </div> </a> <div> <ul> <li> <a href="__CONTROLLER__/daohang/shop_id/'+el.shop_id+'" rel="external nofollow" > <i></i> 一鍵導(dǎo)航 <span> '+el.distance/1000+'km </span> </a> </li> </ul> </div> </div>'); }) } }); }, cancel: function (res) { $(".city").triggerHandler("focus"); } }); }); </script>
控制器中獲取門店通過(guò)sql語(yǔ)句獲取距離一定距離的門店的列表:
if(IS_AJAX){ $post = I('post.'); //緯度小,經(jīng)度大 // 5公里范圍是5000 $longitude = $post['longitude'];//經(jīng)度信息 $latitude = $post['latitude'];//緯度信息 //通過(guò)sql語(yǔ)句查詢距離5公里之內(nèi)的門店 $sql = "select * from (select shop_id,shop_name,shop_tel,shop_position,shop_logo, ROUND(6378.138*2*ASIN(SQRT(POW(SIN(($latitude*PI()/180-`shop_wei`*PI()/180)/2),2)+COS($latitude*PI()/180)*COS(`shop_wei`*PI()/180)*POW(SIN(($longitude*PI()/180-`shop_jing`*PI()/180)/2),2)))*1000) AS distance from sp_shop order by distance ) as a where a.distance<=5000"; // $sql = "select * from (select shop_id,shop_name,shop_tel,shop_position,shop_logo, ROUND(6378.138*2*ASIN(SQRT(POW(SIN((36.09297*PI()/180-`shop_wei`*PI()/180)/2),2)+COS(36.09297*PI()/180)*COS(`shop_wei`*PI()/180)*POW(SIN((120.3743*PI()/180-`shop_jing`*PI()/180)/2),2)))*1000) AS distance from sp_shop order by distance ) as a where a.distance<=5000"; $shopInfo = M()->query($sql); echo json_encode($shopInfo);exit; }else{ if(session('openid')){ //獲取微信簽名包信息(用戶地理位置的獲?。┨顚懙呐渲眯畔⒅?,需要寫入的東西(調(diào)用簽名包封裝的類:http://blog.csdn.net/bj123467/article/details/72910160) $jssdk = new \Home\Model\WechatModel(); $signPackage = $jssdk->GetSignPackage(); $this->assign('signPackage', $signPackage); $this->display(); }else{ //判斷該用戶是否存在 $model = new \Home\Model\WechatModel(); $openid_accesstoken = $model->openId(); $rst = M('user')->where(array('user_openid' => $openid_accesstoken['openid']))->find(); if($rst){ session('openid',$openid_accesstoken['openid']); session('user_id', $rst['user_id']); $jssdk = new \Home\Model\WechatModel(); $signPackage = $jssdk->GetSignPackage(); $this->assign('signPackage', $signPackage); $this->display();exit; }else{ //如果不存在獲取微信用戶的基本信息 $userInfo = $model->getOpenId($openid_accesstoken['openid'],$openid_accesstoken['access_token']); $data = array( 'user_img' => $userInfo['headimgurl'], 'user_openid' => $userInfo['openid'], 'user_name' => filter($userInfo['nickname']), 'user_register_time' => time(), 'city' => $userInfo['province'].'-'.$userInfo['city'], ); $id = M('user')->add($data); session('openid', $userInfo['openid']); session('user_id',$id); $jssdk = new \Home\Model\WechatModel(); $signPackage = $jssdk->GetSignPackage(); $this->assign('signPackage', $signPackage); $this->display(); } } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)audio音頻剪裁剪切復(fù)制播放與上傳(步驟詳解)
這篇文章主要介紹了JS實(shí)現(xiàn)audio音頻剪裁剪切復(fù)制播放與上傳,本文分步驟通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07TypeScript學(xué)習(xí)之強(qiáng)制類型的轉(zhuǎn)換
眾所周知TypeScript是一種由微軟開(kāi)發(fā)的自由和開(kāi)源的編程語(yǔ)言。它是JavaScript的一個(gè)超集,而且本質(zhì)上向這個(gè)語(yǔ)言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊蹋旅孢@篇文章主要介紹了TypeScript中強(qiáng)制類型的轉(zhuǎn)換,需要的朋友可以參考借鑒下。2016-12-12js中encode、decode的應(yīng)用說(shuō)明
這里簡(jiǎn)單介紹下js中的encode、decode的字符2012-10-10TypeScript?Typeof運(yùn)算符的5個(gè)實(shí)用技巧詳解
這篇文章主要為大家介紹了TypeScript?Typeof運(yùn)算符的5個(gè)實(shí)用技巧詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10javascript 10進(jìn)制和62進(jìn)制的相互轉(zhuǎn)換
本節(jié)主要介紹了javascript 10進(jìn)制和62進(jìn)制的相互轉(zhuǎn)換,需要的朋友可以參考下2014-07-07Bootstrap的Refresh Icon也spin起來(lái)
本文通過(guò)實(shí)例給大家介紹Bootstrap的Refresh Icon相關(guān)知識(shí),非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-07-07