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

思路分析:

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();
        }
      }
  }

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

(0)

相关推荐

  • 微信js-sdk地理位置接口用法示例

    本文实例讲述了微信js-sdk地理位置接口用法.分享给大家供大家参考,具体如下: 前提,已经在wx.config()中权限验证通过,官方文档地址 官方api 使用微信内置地图查看位置接口 wx.openLocation({ latitude: 0, // 纬度,浮点数,范围为90 ~ -90 longitude: 0, // 经度,浮点数,范围为180 ~ -180. name: '', // 位置名 address: '', // 地址详情说明 scale: 1, // 地图缩放级别,整形值,

  • 微信获取用户地理位置信息的原理与步骤

    在微信公众服务号开发需求中经常有获取用户位置信息的功能,通过用户的位置信息,可以做一些地图导航,以及基于LBS的营销活动. 下面通过给大家介绍微信服务号获取用户位置信息的原理与步骤. 原理 1. 位置信息获取流程 2. 位置信息报文 <xml><ToUserName><![CDATA[gh_public_member_account]]></ToUserName> <FromUserName><![CDATA[oNEGGwGfl8f5xME

  • 微信公众平台开发之地理位置.Net代码解析

    微信公共平台中涉及到地理位置的有两种情况:         第一.我发送一个自选的地理位置给微信,然后微信可以自动反馈响应的信息.         第二.让微信获取我们GPS定位地址位置,反馈响应的信息.         首先我们先来看第一种,在微信中除了可以发文本,图片,语音等还有一个信息就是地理位置,按照微信接受地理信息的XML信息,我们需要改造一下之前的wxmessage类加上几个属性: class wxmessage { public string FromUserName { get;

  • 微信小程序 获取当前地理位置和经纬度实例代码

    微信小程序实例-获取当前的地理位置.经纬度 微信小程序官方文档 https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html JS代码 //index.js //获取应用实例 var app = getApp() Page({ data: { motto: '示例小程序-获取当前地理位.速度', userInfo: {}, hasLocation:false, location:{} }, //事件处理函数 bindViewTap: fu

  • 微信小程序--获取用户地理位置名称(无须用户授权)的方法

    在本文 微信小程序--获取用户地理位置名称(无须用户授权) 之前需要先看看 微信小程序-获取用户session_key,openid,unionid - 后端为nodejs 代码封装是在上文添加的. 准备 1.在http://lbs.qq.com/网站申请key 2.在微信小程序后台把apis.map.qq.com添加进request合法域名 效果 添加封装 /** * 发起网络请求 * @param {string} url * @param {object} params * @return

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

    思路分析: 1.在微信公众号内获取用户地理位置 需要js-sdk签名包(关于如何获取文档有介绍) 2.根据获取的地理位置ajax去后台请求,通过sql语句,查询中距离最近的门店(sql语句在网上搜的,位置是通过后台添加的) 3.根据城市查询门店列表,使用通过表单提交事件,ajax请求后台获取列表 4.百度地图导航页面要注意引入地址 一.开始开发 1.该功能的实现需要调用微信公众号的js-sdk接口实现 简介: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使

  • 微信公众号-获取用户信息(网页授权获取)实现步骤

    根据微信公众号开发官方文档: 获取用户信息步骤如下: 1 第一步:用户同意授权,获取code 2 第二步:通过code换取网页授权access_token 3 第三步:刷新access_token(如果需要) 4 第四步:拉取用户信息(需scope为 snsapi_userinfo) 1 获取code 在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下(服务号获得高级接口后,默认拥有scope参数中的snsapi_base和snsapi_userinfo),引导关注者打开如下页面:

  • Java微信公众号开发之通过微信公众号获取用户信息

    最近由于公司业务,就开始研究微信开发的流程,说实话,这东西刚开始看到时候和看天书的一样,总算,看了一天的文档,测试代码终于出来了. 1.首先需要到微信网站去设置一下,我是直接用的微信测试号. 接口配置信息必须要填写的,所以说必须能将自己的服务发布出去 到此微信配置完毕,接下来就是直接上代码了 2.获取用户信息的方式一共是两种,前提都是用户关注微信公众号,一种是静默获取(snsapi_base,这种方式只能获取openid),另一种是授权获取(snsapi_userinfo,可以获取用户的详细信息

  • Java实现的微信公众号获取微信用户信息示例

    本文实例讲述了Java实现的微信公众号获取微信用户信息.分享给大家供大家参考,具体如下: 注:  这里获取用户信息方式和网页授权获取用户信息方式不同.两个access_token不同,返回的结果也不同. 我们很多场景可能需要用户信息 微信公众号获取微信用户信息需要的条件: 1.获取用户openId.可以在用户绑定APP的时候用code换取,也可以在用户关注公众号的时候获取,或者小程序授权时获取.微信公众号code换取openId(详见附录) 2.获取该微信公众号 access_token.方法可

  • 微信公众号获取access_token的方法实例分析

    本文实例讲述了微信公众号获取access_token的方法.分享给大家供大家参考,具体如下: 上一版需求做了微信公众号开发,秀了一波操作,也遇到了很多坑.现在把微信公众号一些基本的操作记录一下. 微信公众号获取access_token  官方文档地址 access_token是公众号的全局唯一接口调用凭据,我们和微信服务器进行交互,服务器通过access_token判断我们是谁(哪个公众号服务的请求).所以 我们在开发过程中服务端拿到的access_token是一定不能显式暴露给外部,否则将导致

  • Java实现微信公众号获取临时二维码功能示例

    本文实例讲述了Java实现微信公众号获取临时二维码功能.分享给大家供大家参考,具体如下: 我们做微信公众号开发时为了推广,可能需要服务端去生成公众号的临时二维码,然后再进行一定的图片合成操作,制作一张漂亮的推广海报.别人扫一下二维码进入关注公众号界面,点击关注我们可以拿到二维码里面的信息官网地址 记录一下获取临时二维码操作过程. 1.获取access_token 上一篇文章写了 就不赘述了: 2.根据access_token获取二维码ticket,获取到了二维码ticket就基本山是成功了: 3

  • ASP.NET Core2静默获取微信公众号的用户OpenId实例代码

    前言 最近在做个微信公众号的项目,需要将入口放置在公众号二级菜单内,通过点击该菜单链接后进入到该项目中去,进入到项目后程序会自动通过微信公众号的API完成用户的OpenId获取.需求很简单,实现起来也不复杂,于是在一番折腾后需求实现了.为此,写下此文仅为初次接触的朋友提供个小小的帮助. 准备 老规矩,在开始动手前,咱们先简单介绍下实现的组成部分,如下: 微信公众号静默获取用户OpenId:要实现该功能,可以通过微信公众号提供的"网页授权"接口完成(官网描述:以snsapi_base为s

  • .NET微信公众号获取OpenID和用户信息

    本文实例为大家分享了微信公众平台实现获取用户OpenID的方法,供大家参考,具体内容如下 Index.aspx.cs代码: public partial class Index : System.Web.UI.Page { //用户id public string openid = ""; //公众号信息部分 public string appid = ConfigurationManager.AppSettings["AppId"]; public string

  • 微信公众号判断用户是否已关注php代码解析

    现在的活动,很多都引导用户关注公众号,才能参与到活动当中,那如何才能判断用户关注了公众号呢? 本文就为大家提供php代码,解决问题. 官方接口说明 获取用户基本信息(包括UnionID机制) http://mp.weixin.qq.com/wiki/14/bb5031008f1494a59c6f71fa0f319c66.html 1.只要有基础的access_token和用户openid就可以判断用户是否关注该公众号 2.利用的接口url为:https://api.weixin.qq.com/c

随机推荐