2018-07-04 14:10:10 BThinker 阅读数 2901
  • 微信公众号开发7-用户管理-微信开发php

    微信公众平台开发之微信用户开发管理是子恒老师《微信公众平台开发》视频教程的第7部。详细讲解了用php开发微信,对微信公众平台中的粉丝用户管理开发。内容包含微信公众平台用户分组,获取微信用户列表,查询用户详情等等。欢迎反馈,微信/QQ:68183131

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

微信公众号开发之获取用户地理位置微信公众号需要设置JS安全访问域名

域名设置请不要加上https:

如果你的域名是https://mp.csdn.net/postedit

请设置为:mp.csdn.net/postedit

1、后台获取验证签名信息

信息获取:可以看我上一篇文章:https://blog.csdn.net/bthinker/article/details/80910593

 <input type="hidden" id="appId" name="appId" value="${jssdkMap.appId}"/>
 <input type="hidden" id="timestamp" name="timestamp" value="${jssdkMap.timestamp}"/>
 <input type="hidden" id="nonceStr" name="nonceStr" value="${jssdkMap.nonceStr}"/>
 <input type="hidden" id="signature" name="signature" value="${jssdkMap.signature}"/>

2、调用方法

$(function() { 
    jsSdk();
});

3、地理位置信息保存

  <input type="hidden" id="latitude" name="latitude" value=""/>
  <input type="hidden" id="longitude" name="longitude" value=""/>

3、获取信息

function jsSdk(){
	wx.config({  
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。  
        appId: $("#appId").val(), // 必填,公众号的唯一标识  
        timestamp:$("#timestamp").val(),// 必填,生成签名的时间戳  
        nonceStr: $("#nonceStr").val(),// 必填,生成签名的随机串  
        signature: $("#signature").val(),// 必填,签名,见附录1  
        jsApiList: [ 'checkJsApi', 'openLocation', 'getLocation'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2  
    });  
      
    wx.checkJsApi({  
        jsApiList: ['getLocation'], // 需要检测的JS接口列表,所有JS接口列表见附录2,  
        success: function(res) {  
            if (res.checkResult.getLocation == false) {    
                alert("你的微信版本太低,不支持微信JS接口,请升级到最新的微信版本!");    
                return;    
         }  
        }  
    });  
    var latitude;    
    var longitude;    
    var speed;    
    var accuracy;   
    wx.ready(function(){  
        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。  
        wx.getLocation({    
            success : function(res) {    
                latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90    
                longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。    
                /* speed = res.speed; // 速度,以米/每秒计     */
                accuracy = res.accuracy; // 位置精度    
                $("#latitude").val(latitude);
                $("#longitude").val(longitude);
                console.log(latitude);
                console.log(longitude);
            },    
            cancel : function(res) {    
                alert("未能获取地理位置");    
            }  
        });    
    });  
    wx.error(function(res){  
        // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。  
        alert("验证出错");    
    });  
}

 

 

 

2017-12-22 13:55:29 zhengyinling 阅读数 8566
  • 微信公众号开发7-用户管理-微信开发php

    微信公众平台开发之微信用户开发管理是子恒老师《微信公众平台开发》视频教程的第7部。详细讲解了用php开发微信,对微信公众平台中的粉丝用户管理开发。内容包含微信公众平台用户分组,获取微信用户列表,查询用户详情等等。欢迎反馈,微信/QQ:68183131

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

在进行微信运营的时候,用户地理位置是我们进行营销策划、广告活动投放、用户精准营销的重要依据,今天我们就来分析一下微信开发中如何获取获取用户地理位置。

获取用户地理位置,你需要在微信公众平台开发者中心开启上报地理位置接口功能,开启之后会在用户首次进入公众号时,弹出是否允许上报地理位置选项,如果选择允许则在用户每次进入公众号会话的时候微信会以xml形式将用户的地理位置上报到你开发者中心填写的url上。

注意:用户地理位置是被动获取的,需用户同意后才会上报,微信公众平台开发不能主动获取用户地理位置。

先看看官方给出的xml示例及解析。

推送XML数据包示例:

<xml>
<ToUserName><![CDATA[toUser]]></ToUserName>
<FromUserName><![CDATA[fromUser]]></FromUserName>
<CreateTime>123456789</CreateTime>
<MsgType><![CDATA[event]]></MsgType>
<Event><![CDATA[LOCATION]]></Event>
<Latitude>23.137466</Latitude>
<Longitude>113.352425</Longitude>
<Precision>119.385040</Precision>
</xml>
参数说明:


下面来记录用户的地理位置信息到数据库.

首先引用Wechat SDK,

若对Wechat SDK不了解的,请点击查博客中对Wechat SDK详情。

use  Com\Wechat;

将数据插入数据库

public function index(){
    	$agent = $_SERVER['HTTP_USER_AGENT']; 
	if(!strpos($agent,"MicroMessenger")) {
		echo '只能在微信浏览器中使用';
		exit;
	}

        $token = '7894578953485348944qwe'; //微信后台填写的TOKEN         
	/* 加载微信SDK */
	$wechat = new Wechat($token);
	/* 获取请求信息 */
	$data = $wechat->request();		 
	if($data && is_array($data)){
		M('wxuser_location')->add($data); 
                //此处为写入数据库操作,至于数据库结构,数据定入操作根据你的系统决定
	}
}
保存到数据库中结果如下,

这就把用户的地理位置数据记录下来了,以后如果需要根据用户地理位置推送某些消息(如附近的门店),就可以在数据库中查询用户的最近的一次地理位置信息来推送了,如你的微信菜单上有一个按钮叫做“附近门店”,就可以把这个地理位置再匹配你门店地理位置选择性的向用户推送,这个留在下一节来讲,敬请关注。


转载地址:http://www.360doc.com/content/15/0818/16/10227105_493229885.shtml

详细参考:http://blog.csdn.net/fanhu6816/article/details/52123394

2017-12-06 17:41:04 qq_37936542 阅读数 9215
  • 微信公众号开发7-用户管理-微信开发php

    微信公众平台开发之微信用户开发管理是子恒老师《微信公众平台开发》视频教程的第7部。详细讲解了用php开发微信,对微信公众平台中的粉丝用户管理开发。内容包含微信公众平台用户分组,获取微信用户列表,查询用户详情等等。欢迎反馈,微信/QQ:68183131

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

 

步骤一:绑定域名   注意不要加http://

 

 

步骤二:引入js文件

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

 

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>


步骤三:通过ajax获取参数,完成config接口注入权限验证配置

 

 

--ajax请求

 

$(function() {
	
	// 获取本页面的url
	var url = location.href.split('#')[0];
	$.ajax({
		type : "GET",
		url : "signature.action?url=" + url,
		dataType:"json",
		success : function(data) {
			wx.config({
				debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
				appId: data.appid, // 必填,公众号的唯一标识
      	                        timestamp: data.timestamp,  // 必填,生成签名的时间戳
      	                        nonceStr: data.nonceStr,  // 必填,生成签名的随机串
      	                        signature: data.signature,   // 必填,签名,见附录1
				jsApiList : [ 
				                'checkJsApi',
						'openLocation',// 使用微信内置地图查看地理位置接口
						'getLocation' // 获取地理位置接口
				]  // 必填,需要使用的JS接口列表
			});
		}
	});
	
	});

 

--后台代码

 

 

 

注:jsapi-ticket的获取在前一节中讲过,这里就带过

 

@RequestMapping(value = "signature", method = RequestMethod.GET)
	@ResponseBody 
	public Map<String, String> createSignature(@RequestParam String url) 
	{
	  System.out.println("RestFul of createSignature parameters url:"+url);
	  
	  return SignatureUtil.sign(tokenService.getJsapi_ticket(), url);
	}

 

 

 

public static Map<String, String> sign(String jsapi_ticket, String url) {
	        Map<String, String> ret = new HashMap<String, String>();
	        String nonce_str = create_nonce_str();
	        String timestamp = create_timestamp();
	        String str;
	        String signature = "";
	 
	        //注意这里参数名必须全部小写,且必须有序
	        str = "jsapi_ticket=" + jsapi_ticket +
	                  "&noncestr=" + nonce_str +
	                  "×tamp=" + timestamp +
	                  "&url=" + url;
	 
	        try
	        {
	            MessageDigest crypt = MessageDigest.getInstance("SHA-1");
	            crypt.reset();
	            crypt.update(str.getBytes("UTF-8"));
	            signature = byteToHex(crypt.digest());
	        }
	        catch (NoSuchAlgorithmException e)
	        {
	            e.printStackTrace();
	        }
	        catch (UnsupportedEncodingException e)
	        {
	            e.printStackTrace();
	        }
	 
	        ret.put("url", url);
	        ret.put("jsapi_ticket", jsapi_ticket);
	        ret.put("nonceStr", nonce_str);
	        ret.put("timestamp", timestamp);
	        ret.put("signature", signature);
	        ret.put("appid", WeChatInfo.WX_APPID);
	 
	        return ret;
	    }
	    
	    private static String byteToHex(final byte[] hash) {
	        Formatter formatter = new Formatter();
	        for (byte b : hash)
	        {
	            formatter.format("%02x", b);
	        }
	        String result = formatter.toString();
	        formatter.close();
	        return result;
	    }
	 
	    private static String create_nonce_str() {
	        return UUID.randomUUID().toString();
	    }
	 
	    private static String create_timestamp() {
	        return Long.toString(System.currentTimeMillis() / 1000);
	    }
	     
	    //获取当前系统时间 用来判断access_token是否过期
	    public static String getTime(){
	        Date dt=new Date();
	        SimpleDateFormat sdf =new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
	        return sdf.format(dt);
	    }

 

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

 

 

wx.ready(function() {
		// 获取用户位置
		wx.getLocation({
			success : function(res) {
				var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
                            var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
                            var speed = res.speed; // 速度,以米/每秒计
                            var accuracy = res.accuracy; // 位置精度
			},
			fail : function(res) {
				alert("获取位置失败");
			}
		});
	});


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

 

	wx.error(function(res) {
		alert("获取凭据失败");
	}); 

 

 

 

2019-07-06 18:30:56 weixin_42906405 阅读数 21
  • 微信公众号开发7-用户管理-微信开发php

    微信公众平台开发之微信用户开发管理是子恒老师《微信公众平台开发》视频教程的第7部。详细讲解了用php开发微信,对微信公众平台中的粉丝用户管理开发。内容包含微信公众平台用户分组,获取微信用户列表,查询用户详情等等。欢迎反馈,微信/QQ:68183131

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


对于一个不咋懂微信开发的偶,前两天总监给个需求过来,没错啦,就是微信地理位置。
不得不说,一开始很谎,以为很难,其实很简单的。
很多人都找不到微信公众号测试号登陆页面,我就提供一下了啊各位大锅们
https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

HTML代码

<!DOCTYPE html>
<html>
<head>
    <title>微信获取地理位置</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!--	这行代码不能少,用微信的接口都会用到这引入	-->
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script>
        // 配置
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: '{$wx.appId}', // 必填,公众号的唯一标识
            timestamp: '{$wx.timestamp}', // 必填,生成签名的时间戳
            nonceStr: '{$wx.nonceStr}', // 必填,生成签名的随机串
            signature: '{$wx.signature}',// 必填,签名
            jsApiList: ['openLocation'] // 必填,需要使用的JS接口列表
        });
    </script>
</head>
<body>
    <img src="./1.png" onclick="addrss(x,y,name,address)">
</body>
<script type="text/javascript">
    // 需要获取的时候 执行方法即可
    // 注意经纬度必须是 浮点数类型
    function addrss(x,y,name,address) {
        wx.openLocation({
            latitude: y, // 纬度,浮点数,范围为90 ~ -90
            longitude: x, // 经度,浮点数,范围为180 ~ -180。
            name: name, // 位置名
            address: address, // 地址详情说明
            scale: 15, // 地图缩放级别,整形值,范围从1~28。默认为最大
            infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
        });
    }

</script>
</html>

PHP代码不用做什么,只需要获取wx.config{}里面的参数值,一一对应上到前端页面即可,是不是觉得很简单呢,如果有帮助到你留个赞或者留个评论再走呗!

实现效果如下

在这里插入图片描述

2017-02-14 17:35:29 linfanhehe 阅读数 1095
  • 微信公众号开发7-用户管理-微信开发php

    微信公众平台开发之微信用户开发管理是子恒老师《微信公众平台开发》视频教程的第7部。详细讲解了用php开发微信,对微信公众平台中的粉丝用户管理开发。内容包含微信公众平台用户分组,获取微信用户列表,查询用户详情等等。欢迎反馈,微信/QQ:68183131

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

文章来源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   转载请注明出处!谢谢!



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