微信公众号获取用户地理位置并列出附近的门店的示例代码


Posted in Javascript onJuly 25, 2019

思路分析:

1、在微信公众号内获取用户地理位置

需要js-sdk签名包(关于如何获取文档有介绍)

2、根据获取的地理位置ajax去后台请求,通过sql语句,查询中距离最近的门店(sql语句在网上搜的,位置是通过后台添加的)

3、根据城市查询门店列表,使用通过表单提交事件,ajax请求后台获取列表

4、百度地图导航页面要注意引入地址

一、开始开发

1、该功能的实现需要调用微信公众号的js-sdk接口实现

简介:

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

2、调用微信js-sdk的步骤:官方的网址:https://mp.weixin.qq.com/wiki

步骤一:绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

步骤二:引入JS文件

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

备注:支持使用 AMD/CMD 标准模块加载方法加载

步骤三:通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)

具体的使用可以查看官方的文档

wx.config({

  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

  appId: '', // 必填,公众号的唯一标识

  timestamp: , // 必填,生成签名的时间戳

  nonceStr: '', // 必填,生成签名的随机串

  signature: '',// 必填,签名,见附录1

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

});

步骤四:通过ready接口处理成功验证

wx.ready(function(){

  // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。

});

步骤五:通过error接口处理失败验证

wx.error(function(res){

  // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。

})

自己的程序代码附上(我做的是获取用户的地理位置,就是出现一个获取地理位置的弹窗):

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: [
    // 所有要调用的 API 都要加到这个列表中
    'checkJsApi',
    'openLocation',
    'getLocation'
   ]
      });
//验证之后进入该函数,所有需要加载页面时调用的接口都必须写在该里面
wx.ready(function () {
//基础接口判断当前客户端版本是否支持指定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;
    }
  }
});
         //微信获取地理位置并拉取用户列表(用户允许获取用户的经纬度)
wx.getLocation({
  success: function (res) {
    var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
    var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。

        //去数据库查询获取附近的门店
            $.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> 一键导航 <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.');
  //纬度小,经度大
  // 5公里范围是5000
  $longitude = $post['longitude'];//经度信息
  $latitude = $post['latitude'];//纬度信息

        //通过sql语句查询距离5公里之内的门店
  $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')){
        //获取微信签名包信息(用户地理位置的获取)填写的配置信息中,需要写入的东西(调用签名包封装的类: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();
        }
      }
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
jQuery focus和blur事件的应用详解
Jan 26 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 Javascript
JavaScript数组迭代方法
Mar 03 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 #Javascript
turn.js异步加载实现翻书效果
Jul 25 #Javascript
js 实现ajax发送步骤过程详解
Jul 25 #Javascript
MockJs结合json-server模拟后台数据
Aug 26 #Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 #Javascript
mock.js模拟前后台交互
Jul 25 #Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 #Javascript
You might like
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
python标准日志模块logging的使用方法
2013/11/01 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
工作中个人的自我评价
2013/12/31 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
暑期培训班招生方案
2014/08/26 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
学生个人总结范文
2015/02/15 职场文书
团委副书记工作总结
2015/08/14 职场文书
Python 用户输入和while循环的操作
2021/05/23 Python