欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信公眾號獲取用戶地理位置并列出附近的門店的示例代碼

 更新時間:2019年07月25日 10:43:16   作者:若水無華  
這篇文章主要介紹了微信公眾號獲取用戶地理位置并列出附近的門店的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

思路分析:

1、在微信公眾號內(nèi)獲取用戶地理位置

需要js-sdk簽名包(關(guān)于如何獲取文檔有介紹)

2、根據(jù)獲取的地理位置ajax去后臺請求,通過sql語句,查詢中距離最近的門店(sql語句在網(wǎng)上搜的,位置是通過后臺添加的)

3、根據(jù)城市查詢門店列表,使用通過表單提交事件,ajax請求后臺獲取列表

4、百度地圖導(dǎo)航頁面要注意引入地址

一、開始開發(fā)

1、該功能的實現(xiàn)需要調(diào)用微信公眾號的js-sdk接口實現(xiàn)

簡介:

微信JS-SDK是微信公眾平臺面向網(wǎng)頁開發(fā)者提供的基于微信內(nèi)的網(wǎng)頁開發(fā)工具包。

通過使用微信JS-SDK,網(wǎng)頁開發(fā)者可借助微信高效地使用拍照、選圖、語音、位置等手機系統(tǒng)的能力,同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力,為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁體驗。

2、調(diào)用微信js-sdk的步驟:官方的網(wǎng)址:https://mp.weixin.qq.com/wiki

步驟一:綁定域名

先登錄微信公眾平臺進入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。

步驟二:引入JS文件

 在需要調(diào)用JS接口的頁面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js

備注:支持使用 AMD/CMD 標準模塊加載方法加載

步驟三:通過config接口注入權(quán)限驗證配置

所有需要使用JS-SDK的頁面必須先注入配置信息,否則將無法調(diào)用(同一個url僅需調(diào)用一次,對于變化url的SPA的web app可在每次url變化時進行調(diào)用,目前Android微信客戶端不支持pushState的H5新特性,所以使用pushState來實現(xiàn)web app的頁面會導(dǎo)致簽名失敗,此問題會在Android6.2中修復(fù))

具體的使用可以查看官方的文檔

wx.config({

  debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數(shù),可以在pc端打開,參數(shù)信息會通過log打出,僅在pc端時才會打印。

  appId: '', // 必填,公眾號的唯一標識

  timestamp: , // 必填,生成簽名的時間戳

  nonceStr: '', // 必填,生成簽名的隨機串

  signature: '',// 必填,簽名,見附錄1

  jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表見附錄2

});

步驟四:通過ready接口處理成功驗證

wx.ready(function(){

  // config信息驗證后會執(zhí)行ready方法,所有接口調(diào)用都必須在config接口獲得結(jié)果之后,config是一個客戶端的異步操作,所以如果需要在頁面加載時就調(diào)用相關(guān)接口,則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時才調(diào)用的接口,則可以直接調(diào)用,不需要放在ready函數(shù)中。

});

步驟五:通過error接口處理失敗驗證

wx.error(function(res){

  // config信息驗證失敗會執(zhí)行error函數(shù),如簽名過期導(dǎo)致驗證失敗,具體錯誤信息可以打開config的debug模式查看,也可以在返回的res參數(shù)中查看,對于SPA可以在這里更新簽名。

})

自己的程序代碼附上(我做的是獲取用戶的地理位置,就是出現(xiàn)一個獲取地理位置的彈窗):

html頁面:

//引入微信js文件

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
//配置信息驗證接口
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 都要加到這個列表中
    'checkJsApi',
    'openLocation',
    'getLocation'
   ]
      });
//驗證之后進入該函數(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接口,請升級到最新的微信版本!');
      return;
    }
  }
});
         //微信獲取地理位置并拉取用戶列表(用戶允許獲取用戶的經(jīng)緯度)
wx.getLocation({
  success: function (res) {
    var latitude = res.latitude; // 緯度,浮點數(shù),范圍為90 ~ -90
    var longitude = res.longitude; // 經(jīng)度,浮點數(shù),范圍為180 ~ -180。

        //去數(shù)據(jù)庫查詢獲取附近的門店
            $.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>&#xe66c;</i> 一鍵導(dǎo)航 <span> '+el.distance/1000+'km </span> </a> </li> </ul> </div> </div>');
                })            
             }
            });
  },
  cancel: function (res) {
  $(".city").triggerHandler("focus");
  }
        });
      });
</script>

控制器中獲取門店通過sql語句獲取距離一定距離的門店的列表:

if(IS_AJAX){
  $post = I('post.');
  //緯度小,經(jīng)度大
  // 5公里范圍是5000
  $longitude = $post['longitude'];//經(jīng)度信息
  $latitude = $post['latitude'];//緯度信息

        //通過sql語句查詢距離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();
        }
      }
  }

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • JS實現(xiàn)audio音頻剪裁剪切復(fù)制播放與上傳(步驟詳解)

    JS實現(xiàn)audio音頻剪裁剪切復(fù)制播放與上傳(步驟詳解)

    這篇文章主要介紹了JS實現(xiàn)audio音頻剪裁剪切復(fù)制播放與上傳,本文分步驟通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-07-07
  • TypeScript學(xué)習(xí)之強制類型的轉(zhuǎn)換

    TypeScript學(xué)習(xí)之強制類型的轉(zhuǎn)換

    眾所周知TypeScript是一種由微軟開發(fā)的自由和開源的編程語言。它是JavaScript的一個超集,而且本質(zhì)上向這個語言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊?,下面這篇文章主要介紹了TypeScript中強制類型的轉(zhuǎn)換,需要的朋友可以參考借鑒下。
    2016-12-12
  • 前端項目部署后如何提示用戶版本更新詳解

    前端項目部署后如何提示用戶版本更新詳解

    這篇文章主要給大家介紹了關(guān)于前端項目部署后如何提示用戶版本更新的相關(guān)資料,文中通過代碼介紹的非常詳細,對大家的工作或者學(xué)習(xí)具有一定的參考借鑒價值,需要的朋友可以參考下
    2024-03-03
  • js中encode、decode的應(yīng)用說明

    js中encode、decode的應(yīng)用說明

    這里簡單介紹下js中的encode、decode的字符
    2012-10-10
  • TypeScript?Typeof運算符的5個實用技巧詳解

    TypeScript?Typeof運算符的5個實用技巧詳解

    這篇文章主要為大家介紹了TypeScript?Typeof運算符的5個實用技巧詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-10-10
  • javascript 10進制和62進制的相互轉(zhuǎn)換

    javascript 10進制和62進制的相互轉(zhuǎn)換

    本節(jié)主要介紹了javascript 10進制和62進制的相互轉(zhuǎn)換,需要的朋友可以參考下
    2014-07-07
  • Bootstrap的Refresh Icon也spin起來

    Bootstrap的Refresh Icon也spin起來

    本文通過實例給大家介紹Bootstrap的Refresh Icon相關(guān)知識,非常不錯,具有參考借鑒價值,感興趣的朋友一起學(xué)習(xí)吧
    2016-07-07
  • 微信小程序?qū)崿F(xiàn)日歷打卡

    微信小程序?qū)崿F(xiàn)日歷打卡

    這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)日歷打卡,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • 摘自啟點的main.js

    摘自啟點的main.js

    來自啟點的js,主要包括字符串的trim,cookies設(shè)置等
    2008-04-04
  • js攔截alert對話框另類應(yīng)用

    js攔截alert對話框另類應(yīng)用

    alert對話框的使用給用戶帶來了很多的方便,而有些時候不希望讓它存在,接下來介紹如何使用js攔截alert對話框,感興趣的朋友可以了解下
    2013-01-01

最新評論