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


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 相关文章推荐
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
js函数的延迟加载实现代码
Oct 11 Javascript
JavaScript中switch语句的用法详解
Jun 03 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
React Native react-navigation 导航使用详解
Dec 01 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
你准备好迎接vue3.0了吗
Apr 28 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
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
php 数组元素快速去重
2017/05/05 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
Js基础学习资料
2010/11/23 Javascript
jquery 笔记 事件
2011/11/02 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
ajax异步请求详解
2017/01/06 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
Python程序员开发中常犯的10个错误
2014/07/07 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
详解Python pygame安装过程笔记
2017/06/05 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
python调试神器PySnooper的使用
2019/07/03 Python
python for循环remove同一个list过程解析
2019/08/14 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
详解Python yaml模块
2020/09/23 Python
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
英语文学专业学生的自我评价
2013/10/31 职场文书
应用英语专业自荐信
2014/01/26 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
2014年纪检工作总结
2014/11/12 职场文书
学校节水倡议书
2015/04/29 职场文书
奠基仪式致辞
2015/07/30 职场文书