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


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 相关文章推荐
告诉大家什么是JSON
Jun 10 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
May 22 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
判断javascript的数据类型(示例代码)
Dec 11 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
原生JavaScript实现购物车
Jan 10 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
详解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
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
JavaScript类和继承 prototype属性
2010/09/03 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
Python的词法分析与语法分析
2013/05/18 Python
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
2014年质检工作总结
2014/11/26 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
学校清洁工岗位职责
2015/04/15 职场文书