2017-02-14 17:35:29 linfanhehe 阅读数 1091
  • 微信公众平台模板消息开发-微信开发14(PHP)

    会员免费看,http://edu.csdn.net/lecturer/842 右侧可办理会员卡。微信公众平台模板消息开发是子恒老师《子恒说微信开发》视频教程的第14部。详细讲解了用php开发微信公众平台模板消息。内容包含设置模板所属行业,获取微信模板ID,用公众号发送微信模板消息等等。欢迎反馈,微信号:QQ68183131

    3655 人正在学习 去看看 秦子恒

文章来源http://www.vxzsk.com/115.html


章节给大家介绍通过微信jsapi获取用户的地理位置,微信官方文档关于地理位置给了两种接口,一种是通过微信内置地图查看用户的地理位置,第二种是直接获取当前用户的地理位置坐标信息。

使用微信内置地图查看位置接口


1
2
3
4
5
6
7
8
wx.openLocation({
    latitude: 0, // 纬度,浮点数,范围为90 ~ -90
    longitude: 0, // 经度,浮点数,范围为180 ~ -180。
    name: ''// 位置名
    address: ''// 地址详情说明
    scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
    infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
});

获取地理位置接口

1
2
3
4
5
6
7
8
9
wx.getLocation({
    type: 'wgs84'// 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
    success: function (res) {
        var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
        var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
        var speed = res.speed; // 速度,以米/每秒计
        var accuracy = res.accuracy; // 位置精度
    }
});

以上是微信官方文档给的接口使用说明,接下来我们介绍如何编写代码调用以上接口。

第一、jsp界面引入js库

1
2
 <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"> </script> 
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

第二、<body></body>之间的html代码

1
2
3
4
<span class="desc" style="color: red">地理位置接口-使用微信内置地图查看位置接口</span><br>
      <button class="btn btn_primary" id="openLocation">openLocation</button><br>
      <span class="desc" style="color: red">地理位置接口-获取地理位置接口</span><br>
      <button class="btn btn_primary" id="getLocation">getLocation</button><br>

第三、初始化微信jsapi库添加的上述两种接口openLocation接口和getLocation接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 wx.config({  
    debug: true// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。  
    appId: '${appId}'// 必填,公众号的唯一标识  
    timestamp: '${ timestamp}' // 必填,生成签名的时间戳  
    nonceStr: '${ nonceStr}'// 必填,生成签名的随机串  
    signature: '${ signature}',// 必填,签名,见附录1  
    jsApiList: ['checkJsApi',
                'chooseImage',
                'previewImage',
                 'uploadImage',
                 'downloadImage',
                  'getNetworkType',//网络状态接口
                  'openLocation',//使用微信内置地图查看地理位置接口
                  'getLocation' //获取地理位置接口
               // 必填,需要使用的JS接口列表,所有JS接口列表见附录2  
});

第四、调用openLocation接口和getLocation接口两种接口的js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 7 地理位置接口 开始
  // 7.1 查看地理位置
  document.querySelector('#openLocation').onclick = function () {
    wx.openLocation({
      latitude: 23.099994,
      longitude: 113.324520,
      name: 'TIT 创意园',
      address: '广州市海珠区新港中路 397 号',
      scale: 14,
      infoUrl: 'http://weixin.qq.com'
    });
  };
 
  // 7.2 获取当前地理位置
  document.querySelector('#getLocation').onclick = function () {
    wx.getLocation({
      success: function (res) {
        alert(JSON.stringify(res));
      },
      cancel: function (res) {
        alert('用户拒绝授权获取地理位置');
      }
    });
  };
  // 7 地理位置接口 结束

这两个js方法是在上述第二步中用户点击id分别为openLocation和getLocation按钮的时候触发。注意这两种方法要放在wx.ready(function(){ });之间。

第五、完整的jsp页面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <!-- www.vxzsk.com原创 -->
    <title>微信jsapi测试-V型知识库</title>
    <meta name="viewport" content="width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
   <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"> </script
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
     
  </head>
   
  <body>
  <center><h3>欢迎来到微信jsapi测试界面-V型知识库</h3></center>
     <p>基础接口之判断当前客户端是否支持指定的js接口</p>   
     <input type="button" value="checkJSAPI" id="checkJsApi"><br>
      
      <span class="desc" style="color: red">地理位置接口-使用微信内置地图查看位置接口</span><br>
      <button class="btn btn_primary" id="openLocation">openLocation</button><br>
      <span class="desc" style="color: red">地理位置接口-获取地理位置接口</span><br>
      <button class="btn btn_primary" id="getLocation">getLocation</button><br>
      
     <div style="display: none;"
     <span class="desc" style="color: red">获取网络状态接口</span><br>
      <button class="btn btn_primary" id="getNetworkType">getNetworkType</button><br>
      <h3 id="menu-image">图像接口</h3>
      <span class="desc">拍照或从手机相册中选图接口</span><br>
      <button class="btn btn_primary" id="chooseImage">chooseImage</button><br>
      <span class="desc">预览图片接口</span><br>
      <button class="btn btn_primary" id="previewImage">previewImage</button><br>
      <span class="desc">上传图片接口</span><br>
      <button class="btn btn_primary" id="uploadImage">uploadImage</button><br>
      <span class="desc">下载图片接口</span><br>
      <button class="btn btn_primary" id="downloadImage">downloadImage</button><br>
     
  <br>
  显示图片<img alt="" src="" id="faceImg">
  </div>
   
   
  <script type="text/javascript">
  wx.config({  
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。  
    appId: '${appId}', // 必填,公众号的唯一标识  
    timestamp: '${ timestamp}' , // 必填,生成签名的时间戳  
    nonceStr: '${ nonceStr}', // 必填,生成签名的随机串  
    signature: '${ signature}',// 必填,签名,见附录1  
    jsApiList: ['checkJsApi',
                'chooseImage',
                'previewImage',
                 'uploadImage',
                 'downloadImage',
                  'getNetworkType',//网络状态接口
                  'openLocation',//使用微信内置地图查看地理位置接口
                  'getLocation' //获取地理位置接口
               ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2  
});  
   
wx.ready(function(){  
    // 5 图片接口
  // 5.1 拍照、本地选图
  var images = {
    localId: [],
    serverId: []
  };
  document.querySelector('#chooseImage').onclick = function () {
    wx.chooseImage({
      success: function (res) {
        images.localId = res.localIds;
        alert('已选择 ' + res.localIds.length + ' 张图片');
         $("#faceImg").attr("src", res.localIds[0]);//显示图片到页面上
      }
    });
  };
 
  // 5.2 图片预览
  document.querySelector('#previewImage').onclick = function () {
    wx.previewImage({
      current: 'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg',
      urls: [
        'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg',
        'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg',
        'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg'
      ]
    });
  };
 
  // 5.3 上传图片
  document.querySelector('#uploadImage').onclick = function () {
    if (images.localId.length == 0) {
      alert('请先使用 chooseImage 接口选择图片');
      return;
    }
    var i = 0, length = images.localId.length;
    images.serverId = [];
    function upload() {
      wx.uploadImage({
        localId: images.localId[i],
        success: function (res) {
          i++;
          //alert('已上传:' + i + '/' + length);
          images.serverId.push(res.serverId);
          if (i < length) {
            upload();
          }
        },
        fail: function (res) {
          alert(JSON.stringify(res));
        }
      });
    }
    upload();
  };
 
  // 5.4 下载图片
  document.querySelector('#downloadImage').onclick = function () {
    if (images.serverId.length === 0) {
      alert('请先使用 uploadImage 上传图片');
      return;
    }
    var i = 0, length = images.serverId.length;
    images.localId = [];
    function download() {
      wx.downloadImage({
        serverId: images.serverId[i],
        success: function (res) {
          i++;
          alert('已下载:' + i + '/' + length);
          images.localId.push(res.localId);
          if (i < length) {
            download();
          }
        }
      });
    }
    download();
  };
   
  // 6 设备信息接口
  // 6.1 获取当前网络状态
  document.querySelector('#getNetworkType').onclick = function () {
    wx.getNetworkType({
      success: function (res) {
        alert(res.networkType);
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };
  //网络接口结束
   
  // 7 地理位置接口 开始
  // 7.1 查看地理位置
  document.querySelector('#openLocation').onclick = function () {
    wx.openLocation({
      latitude: 23.099994,
      longitude: 113.324520,
      name: 'TIT 创意园',
      address: '广州市海珠区新港中路 397 号',
      scale: 14,
      infoUrl: 'http://weixin.qq.com'
    });
  };
 
  // 7.2 获取当前地理位置
  document.querySelector('#getLocation').onclick = function () {
    wx.getLocation({
      success: function (res) {
        alert(JSON.stringify(res));
      },
      cancel: function (res) {
        alert('用户拒绝授权获取地理位置');
      }
    });
  };
  // 7 地理位置接口 结束 
   
});  
 //初始化jsapi接口 状态
wx.error(function (res) {
  alert("调用微信jsapi返回的状态:"+res.errMsg);
});
   
 </script>
    
  </body>
</html>

上述jsp代码中有四个参数,这四个参数是成功调用微信jsapi的凭证,分别为appId(必填,公众号的唯一标识),timestamp(必填,生成签名的时间戳), nonceStr(必填,生成签名的随机串) ,signature(必填,签名),关于如何生成这四个参数,如果不知道的读者,请查看本页面左上角的菜单,里面有详细介绍,在这里不在累述。 

第六、上述代码运行效果图如下:

 使用微信内置地图查看位置接口


获取地理位置接口效果

此文章本站原创,地址 http://www.vxzsk.com/115.html   转载请注明出处!谢谢!



2017-05-18 11:14:50 u010201484 阅读数 852
  • 微信公众平台模板消息开发-微信开发14(PHP)

    会员免费看,http://edu.csdn.net/lecturer/842 右侧可办理会员卡。微信公众平台模板消息开发是子恒老师《子恒说微信开发》视频教程的第14部。详细讲解了用php开发微信公众平台模板消息。内容包含设置模板所属行业,获取微信模板ID,用公众号发送微信模板消息等等。欢迎反馈,微信号:QQ68183131

    3655 人正在学习 去看看 秦子恒


生成带场景的二维码

相关文档

微信文档
easywechat 文档(php)

相关代码

这里选择生成永久链接

<?php
use EasyWeChat\Foundation\Application;
// ...
$app = new Application($options);
$qrcode = $app->qrcode;
$result = $qrcode->forever(56);// 或者 $qrcode->forever("foo");
$ticket = $result->ticket; // 或者 $result['ticket']
$url = $result->url; // 永久链接
// todo 生成相应的二维码

使用 scene_id 或 scene_str 来标识场景

其实这一步你只需要记录一下,scene_id 或 scene_str 表示的是什么场景就好了,建议创建一个表记录一下。
比如 “Email” 来自邮件推送什么鬼的
scene_str 和 scene_id 都有长度限制

接收微信推送

用户扫码:
1、未关注的:
微信会发送 关注 event 同时带上 event_key = qrscene_[scene_str|scene_id]

2、已关注的:
微信会发送 扫码 event 同时带上 event_key = qrscene_[scene_str|scene_id]

处理对应的 scene_id 或 scene_str

2016-05-01 17:29:16 tengdazhang770960436 阅读数 705
  • 微信公众平台模板消息开发-微信开发14(PHP)

    会员免费看,http://edu.csdn.net/lecturer/842 右侧可办理会员卡。微信公众平台模板消息开发是子恒老师《子恒说微信开发》视频教程的第14部。详细讲解了用php开发微信公众平台模板消息。内容包含设置模板所属行业,获取微信模板ID,用公众号发送微信模板消息等等。欢迎反馈,微信号:QQ68183131

    3655 人正在学习 去看看 秦子恒

1.信息来源
1.1.公众号里面发送交互信息
公众号发送消息
用户直接在公众号里面发送的信息会首先发送到微信的服务器,然后服务器把信息转发到开发者服务器的接口上。

1.2.公众号里面直接打开网页
网页交互
这个时候可以 通过网页鉴权,来获取用户信息,存入到自己的 session 中去,之后用户如果访问的是网页,那么用户和服务器之间的交互就是普通的 B/S 交互模式

2.网页鉴权配置
这个需要在打开网页的时候,手机用户的信息,所以需要保证当前 redirect_url 的 url 跟 开发中心里面 网页帐号-> 网页授权获取用户基本信息 里面设置的域名保持一致,比如那个里面设置的是 www.baidu.com
那么如果你跳转的页面是 http://baidu.com/test/aa 这是不行的,因为这个里面没有加上 www,所以在用户跳转的时候肯定会报错的。

2019-03-29 10:14:56 ab601026460 阅读数 141
  • 微信公众平台模板消息开发-微信开发14(PHP)

    会员免费看,http://edu.csdn.net/lecturer/842 右侧可办理会员卡。微信公众平台模板消息开发是子恒老师《子恒说微信开发》视频教程的第14部。详细讲解了用php开发微信公众平台模板消息。内容包含设置模板所属行业,获取微信模板ID,用公众号发送微信模板消息等等。欢迎反馈,微信号:QQ68183131

    3655 人正在学习 去看看 秦子恒

微信公众号相关

微信公众号相关,来源微信公众号开发
AccessToken这个东西,是各种请求的钥匙,不管是公众号项目还是小程序项目,后台接口必须要穿这个发起,一般有效期是7300s两个小时.

获取AccessToken

  • accesstoken问题,【小程序 和 微信公众号是同一个接口】详情可参考微信公众平台文档 《获取access_token》, 两个平台的接口是一样的

公众号项目jsapi_ticket

  • jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket 。
    • jsapi_ticket 的获取路径,微信公众号微信网页开发微信JS-SDK说明文档,具体地址见微信JS-SDK、之后全局搜索获得jsapi_ticket就可以找到

公众号分享等获取 wx.config

2017-11-23 10:06:50 qq_32737755 阅读数 2114
  • 微信公众平台模板消息开发-微信开发14(PHP)

    会员免费看,http://edu.csdn.net/lecturer/842 右侧可办理会员卡。微信公众平台模板消息开发是子恒老师《子恒说微信开发》视频教程的第14部。详细讲解了用php开发微信公众平台模板消息。内容包含设置模板所属行业,获取微信模板ID,用公众号发送微信模板消息等等。欢迎反馈,微信号:QQ68183131

    3655 人正在学习 去看看 秦子恒

这篇是上一篇的前序,10万用户信息来源于公众号,为方便大家调用微信api,(方便我自己以后用到的时候能随时拿代码。。。hhhhhhhhh…)特发此文。

获取用户数据,说白点就是获取微信用户的昵称啊,头像呐… 就这些数据,通过微信接口来拿取。

获取openID列表的接口调用请求说明

http请求方式: GET(请使用https协议)

https://api.weixin.qq.com/cgi-bin/user/get?access_token=ACCESS_TOKEN&next_openid=NEXT_OPENID

next_openid(第一个拉取的OPENID) :官方文档写的是必填,第一次请求可以空着,不需要它。不填默认从头开始拉取。ACCESS_TOKEN就不说啦,这个都不知道的话,再看看微信文档去。

返回的json数据:

{"total":2,"count":2,"data":{"openid":["","OPENID1","OPENID2"]},"next_openid":"NEXT_OPENID"}
参数                          说明
total               关注该公众账号的总用户数
count               拉取的OPENID个数,最大值为10000
data                列表数据,OPENID的列表
next_openid         拉取列表的最后一个用户的OPENID

贴出代码:

$access_token = "ACCESS_TOKEN";//获取的ACCESS_TOKEN
$url = "https://api.weixin.qq.com/cgi-bin/user/get?access_token={$access_token}";
$res = https_request($url);
$res = json_decode($res,true);
var_dump($res);
//http请求函数 支持get、post
function https_request($url,$data=null){
        $curl = curl_init();
        curl_setopt($curl,CURLOPT_URL,$url);
        curl_setopt($curl,CURLOPT_SSL_VERIFYPEER,FALSE);
        curl_setopt($curl,CURLOPT_SSL_VERIFYHOST,FALSE);
        if(!empty($data)){
            curl_setopt($curl,CURLOPT_POST,1);
            curl_setopt($curl,CURLOPT_POSTFIELDS,$data);
        }
        curl_setopt($curl,CURLOPT_RETURNTRANSFER,1);
        $output = curl_exec($curl);
        curl_close($curl);
        return $output;
    }

打印出来的结果

array(4) { 
    ["total"]=> int(381) ["count"]=> int(381) 
    ["data"]=> array(1) { 
            ["openid"]=> array(381) { 
                    [0]=> string(28) "openid1111111111111111111111" 
                    [1]=> string(28) "openid2222222222222222222222"
                     ...
                    [380]=> string(28) "openid**********************" 
                                    } 
                        } 
    ["next_openid"]=> string(28) "openid**********************" 
        }

一次拉取调用最多拉取10000个关注者的OpenID,可以通过多次拉取的方式来满足需求,如果关注量超过1万,继续请求就行啦,别忘了在请求参数中 加上next_openid!!!

没有更多推荐了,返回首页