2019-01-22 10:21:06 cl11992 阅读数 795
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

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

一、介绍

微信不支持服务端定位,只有JS接口进行实现定位,在这里面记录一下

二、注意

  1. 微信定位使用access_token是普通access_token
  2. 下图的标红的位置记住必须要写这两个

二、微信定位代码实例

服务端代码

下方需要的类cardSignature:https://blog.csdn.net/cl11992/article/details/86589656

/**
 * 定位
 */
@ProductException
@RequestMapping(value = "location")
public ModelAndView location(HttpServletRequest request, HttpServletResponse response) throws Exception {
	ModelAndView mv = new ModelAndView("wx/location");// 微信定位页面
	// 定位
	String appid = "XXXXXXXXX";//公众号appid

	mv.addObject("config", cardSignature.getSignature(request, appid));
	return mv;
}

location.html

进入页面自动调用微信定位,查看控制台可以看到微信经度和微信纬度

<body>
	<script type="text/javascript" src="${ctx}/js/common/jquery-1.11.3.min.js"></script> 
	<script type="text/javascript" src="${ctx}/js/JS-SDK.js"></script>
	<script>
		wxobj.getLocation(function(longitude, latitude) {
		    console.log("微信经度:"+longitude);
		    console.log("微信纬度:"+latitude);
	    });
	</script>
</body>

JS-SDK.js

##  微信接口
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
	var wxobj = {
		//位置服务
		getLocation : function(callback){
			//判断当前客户端版本是否支持指定JS接口
			wx.ready(function(){
			    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
				wx.checkJsApi({
					jsApiList: ['getLocation'],
					success: function(res) {
						// 以键值对的形式返回,可用的api值true,不可用为false
						//如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
						if (res.checkResult.scanQRCode == false) {
							alert('你的微信版本太低,不支持微信JS接口,请升级到最新的微信版本!');
				            return;
						}
						if (res.checkResult.getLocation == false) {
				            alert('你的微信版本太低,不支持微信JS接口,请升级到最新的微信版本!');
				            return;
						}
						wx.getLocation({
							type: 'wgs84',						// 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
						    success: function (res) {
								try{
							    	console.log("微信data"+res);
									var latitude = res.latitude; 	// 纬度,浮点数,范围为90 ~ -90
									var speed = res.speed; 			// 速度,以米/每秒计
									var accuracy = res.accuracy; 	// 位置精度
									var longitude = res.longitude;  // 经度,浮点数,范围为180 ~ -180。
									
									console.log("微信经度:"+longitude);
									console.log("微信纬度:"+latitude);
									
									callback(longitude, latitude);
						   		}catch(error){
						   			alert('解析地理位置错误');
						   		}
							},
							cancel: function (res) {
						       	alert('用户拒绝授权获取地理位置');
							},
							fail:function(res) {
							    //alert(JSON.stringify(res));
							    alert("未能获取地理位置,首先检查手机是否启用微信定位");
							}
						});
				       
				   }
				});
			});
		}
	};
	jQuery(function(){ 
		wx.config({
		  //  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
		    appId: '$config.appId', // 必填,公众号的唯一标识
		    timestamp: '$config.timestamp', // 必填,生成签名的时间戳
		    nonceStr: '$config.nonceStr', // 必填,生成签名的随机串
		    signature: '$config.signature',// 必填,签名,见附录1
		    jsApiList: ['openLocation','getLocation'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
		});
		//wx.ready(function(){
		    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
		//});
		//wx.error(function(res){
		    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
		//});
		//判断当前客户端版本是否支持指定JS接口
		//wx.checkJsApi({
		//    jsApiList: ['chooseImage'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
		 //   success: function(res) {
		        // 以键值对的形式返回,可用的api值true,不可用为false
		        // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
		  //  }
		//});
		
	});
</script>

 

2019-01-04 11:14:10 th_1101 阅读数 3695
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

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

这个其实在18年都不是问题,因为微信定位的不准,我们可以选择直接用地图的获取当前经纬度的方法,还是很准的,但是微信更新后我发现在微信浏览器中都不能使用其他地图的定位功能了,这里我自己是测试了百度和腾讯地图的,我之前是用的百度的更新前没问题,更新后就不能定位了,而在手机普通浏览器中是可以使用的,所以这肯定就是微信那边的问题了。在网上找了一会说其实不是微信的定位不准确,而是在我国,出于国家安全考虑,国内所有导航电子地图必须使用国家测绘局制定的加密坐标系统,所以微信给我们的经纬度是故意偏离的加密了的,所以要在百度地图上显示微信获取的经纬度的位置还需要转换成百度的坐标。我们转换的时候直接http://api.map.baidu.com/ag/coord/convert?from=0&to=4&x=longitude&y=latitude这里我们只需要改x和y分别是经度和纬度,我们可以先用微信的定位获取经纬度然后将经纬度传到这个链接中,可以得到{"error":0,"x":"MTEyLjU5ODMxODEzMzk=","y":"MjguMTU2NDI5MTk3MTc4"}一个这样的json串,其中的error代表状态0是正常,x和y代表的是转换后的经纬度,是通过Base64加密后的,所以我们用的时候将它们解密就可以了;

2019-10-29 22:08:23 weixin_42054155 阅读数 397
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

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

项目中需要使用到定位功能,定位用户所在的省市,并自动填充到省市的选择列表中,微信开发中,定位功能直接使用微信提供的接口,方便并且简单,兼容性相对好处理

因为微信定位或者百度地图的定位都是先通过定位获取到用户的经纬度,然后需要再通过经纬度获取用户的详细地理位置信息。

一、在vue中需要安装jssdk

  1. 配置安全域名(参考官方文档

  2. 引入微信的js文件,vue中可以直接npm安装也可以
    npm install weixin-js-sdk --save

  3. 并在main.js中引入js:
    import wx from ‘weixin-js-sdk’

  4. 并且将wx绑定到vue原型上,那么其他的所有组件都可以使用:
    Vue.prototype.$wx = wx

  5. 通过config接口注入权限验证配置
    在main.js中配置微信获取地理位置的权限接口

    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: '', // 必填,公众号的唯一标识
        timestamp: , // 必填,生成签名的时间戳
        nonceStr: '', // 必填,生成签名的随机串
        signature: '',// 必填,签名,见附录1
        // 必填,需要使用的JS接口列表,所有JS接口列表见官方js接口
        // 这里配置获取地理位置所需要的接口权限
        jsApiList: [
        	'openLocation',
        	'getLocation'
        ]
    });
    
    wx.ready(function(){
     
        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
    });
     
    wx.error(function(res){
     
        // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
    
    });
    
    
    

二、进行定位

直接在需要获取用户定位的组件中通过下面的代码就可以进行定位,获取用户的经纬度


// 最好是在ready函数中执行微信的接口
this.$wx.ready((res) => {
        this.$wx.getLocation({
          type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
          success: function (res) {
            this.latitude = res.latitude // 纬度,浮点数,范围为90 ~ -90
            this.longitude = res.longitude // 经度,浮点数,范围为180 ~ -180。
            var speed = res.speed // 速度,以米/每秒计
            var accuracy = res.accuracy // 位置精度
            console.log('纬度:' + this.latitude + '经度:' + this.longitude + 'accuracy:' + accuracy)

          },
          fail: function(res) {
            console.log(JSON.stringify(res))
          }
        })
      })


三、通过经纬度获取详细位置信息

这里通过百度地图的api来逆序,通过经纬度获取定位的详细信息,也可以通过腾讯地图,高德地图等,参考各自官方的开发文档即可

  1. 引入百度地图的js(去官方申请免费的key即可)
    在vue项目的index.html中引入即可:
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=<申请的key>"></script>

  2. 通过百度地图转换经纬度为地理信息

 	let point = new BMap.Point(this.longitude, this.latitude)
    let gc = new BMap.Geocoder()
    gc.getLocation(point, function(rs){
      const addComp = rs.addressComponents
      // 可以通过addComp对象获取到省、市、县、区、街道多少号等信息
      const province = addComp.province
   
      console.log('addComp json: ' + JSON.stringify(addComp))
      console.log('province' + addComp.province)
    })
  1. 所以,将微信定位和百度地图的代码整理,获取地理位置:

在浏览器控制台和IDE中,可能会报BMap未定位警告,没有关系,可以正常使用


const _this = this
this.$wx.ready((res) => {
        this.$wx.getLocation({
          type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
          success: function (res) {
            _this.latitude = res.latitude // 纬度,浮点数,范围为90 ~ -90
            _this.longitude = res.longitude // 经度,浮点数,范围为180 ~ -180。
            var speed = res.speed // 速度,以米/每秒计
            var accuracy = res.accuracy // 位置精度
            console.log('纬度:' + _this.latitude + '经度:' + _this.longitude + 'accuracy:' + accuracy)

            let point = new BMap.Point(res.longitude, res.latitude)
            let gc = new BMap.Geocoder()
            gc.getLocation(point, function(rs){
              console.log(rs)
              const addComp = rs.addressComponents
              // 获取省份
              const province = addComp.province
              if(province) {
              	// 如果这里需要操作this,那么需要在外部重新绑定一下this
                // _this.provinceName = province
              }

              alert('addComp json: ' + JSON.stringify(addComp))
              console.log('province' + addComp.province)
            })
          },
          fail: function(res) {
            console.log(JSON.stringify(res))
          }
        })
      })

      
2019-05-07 09:03:36 weixin_38361347 阅读数 287
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

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

今日按照以往日常惯例 打开ngrok和本地服务,进行微信开发。

微信服务端 也配置了域名和token , 结果一访问 微信 直接推送302错误,微信推送信息无法进入到controller中。

在这里插入图片描述

思来复去,再三检查配置域名和token地方,反复检查确认无误,最后将问题定位到本地controller中!

http 302 错误原因如下:

在这里插入图片描述

检查项目中的代码 发现代码中采用了security , 拦截器开启,将微信的请求进行拦截,故此无法进入controller中,ngrok中出现302错误。

解决办法:

在spring security 拦截器白名单中添加微信的controller url (用于接收微信推送消息的路径),重启服务搞定。

2019-08-19 10:33:44 l284969634 阅读数 205
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

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

微信公众号开发文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

高德文档:https://lbs.amap.com/api/javascript-api/reference-amap-ui/other/positionpicker

需求:如果是浏览器打开项目的话就是用高德获取定位,如果是微信打开的话就是用微信定位获取经纬度

1.高德地图: 

1-1.获取当前定位信息

 AMap.plugin(['AMap.Geolocation'],  ()=> {     
        const geolocation =  new AMap.Geolocation({timeout: 10000});
        map.addControl(geolocation);
        geolocation.getCurrentPosition( (status, result) =>{
            if (status == 'complete') {
                onComplete(result)
            } else {
                onError(result)
            }
        });
    })

1-2. 根据经纬度获取定位信息

function getWGSLocation(locationarg){ // 传入经纬度,格式:`${longitude},${latitude}`
    return new Promise(function(resolve, reject){
        AMap.convertFrom(locationarg,
          "gps",
          (status, result) => { // WGS84 转高德
            if (status.toLowerCase() === 'complete' && result.info.toLowerCase() === 'ok') {
              const lon = result.locations[0].getLng();
              const lat = result.locations[0].getLat();
              geocoder.getAddress([lon, lat],
                (s, r) => {
                  if (s.toLowerCase() === 'complete' && r.info.toLowerCase() === 'ok') {
                    resolve(r)
                  } else {
                    console.log('error');                    
                  }
                });
            } else {
              console.log('error');
            }
          });

    })
}

2.微信公众号获取定位:

2-1.配置wx.config(为了安全,所有信息要从服务端获取)

import wx from 'weixin-jsapi'; //npm安装weixin-jsapi 或者直接页面引用

// 通过后端的接口拿到appid,签名...等信息,注:当前页面的href不可以有#,否去取不到
axios.post('/Home/GetWxJsSdkParam', {url:location.href.split('#')[0]}).then((response) => {
    const c = res;
    wx.config({
        beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题
        // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: c.AppId, // 必填,企业号的唯一标识,此处填写企业号corpid
        timestamp: c.TimeStamp, // 必填,生成签名的时间戳
        nonceStr: c.NonceStr, // 必填,生成签名的随机串
        signature: c.Sign,// 必填,签名,见附录1
        jsApiList: ['getLocation'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
    });
})

2-2.获取当前位置的经纬度,然后根据微信返回的经纬度,调用上面高德地图的1-2的getWGSLocation方法

      const that = this;
      wx.getLocation({
        type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
        success: function (res) {
          console.log(res)
          const latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
          const longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。 

          // `${longitude},${latitude}`
          getWGSLocation(longitude+','+latitude).then((r)=>{
              console.log(r);// 获取的具体位置信息;
          })
        },
        fail:function(err){
          console.log('微信调用失败哦');
          console.log(err); 
        }
      });

3.企业微信(同微信公众号)

 

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