微信开发生成测试签名--signature，并使用微信jssdk获取位置

因项目需要，需在微信浏览器中获取实时位置。使用微信jweixin-1.2.0.js初始化时（wx.config）需要签名、appID,URL等参数，本文将讲解测试环境下，初始化各项测试数据的生成。如：公众号的测试appID,appSecret,域名的配置，签名生成等。进而使用微信获取位置接口获取位置。本方案适用后台服务没开发出之前测试使用，后台服务完成后即可通过后台接口获取签名。对于微信开发测试域名及页面配置可做统一参考。

详细步骤如下：

1、登录微信公众号平台-》开发者工具-》公众平台测试帐号

通过绑定测试者微信号，成功后在公众号测试账号页面下会有测试的appID,appSecret。在页面下配置域名，测试环境下可使用内网ip，如下：

2、获取token：通过微信验证接口页面获取token。token有过期时间2小时，所以一般会在后台处理，鉴于本次为本地调试，先用临时的token。微信端获取token如下（https://mp.weixin.qq.com/debug），根据页面中需要的参数填写，在下面的返回结果中拿到token。如取到的token为${access_token}。

3、获取ticket:拿到token后还需要获取ticket。浏览器中直接调用微信接口，传入步骤2中拿到的access_token,获取ticket,如果成功，浏览器返回${ticket}

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi

4.生成签名：根据第3步的ticket，

在使用时间戳工具生成时间戳（http://tool.chinaz.com/Tools/unixtime.aspx），
生成随机字符串字母+数字，如为：Wm3WZYTPz0wzccnN。
url，配置微信页面访问的系统首页地址，如：http://192.168.1.236/demo.html。
在使用微信提供的生成签名的测试页面即可生成签名（https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign）

5.页面中调用，

1）引用weixin sdk,

2）调用微信接口如下：

wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: 'wxa167eea6f229d66a', // 必填，公众号的唯一标识timestamp: '1531224610', // 必填，生成签名的时间戳nonceStr: 'Wm3WZYTPz0wzccnN', // 必填，生成签名的随机串signature: 'e694e9fef46acac77c5647940314bb4cd094d5af',// 必填，签名jsApiList: ['getLocation',   //获取地理位置'onMenuShareAppMessage',  //分享给朋友'onMenuShareTimeline'  //分享到朋友圈] // 必填，需要使用的JS接口列表});wx.ready(function(){// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。console.log('请求成功');setInterval(function(){//请求位置wx.getLocation({type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'success: function (res) {console.log(res);// var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90// var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。// var speed = res.speed; // 速度，以米/每秒计// var accuracy = res.accuracy; // 位置精度//调用当前位置初始化方法// fmp.GPSlocation.initLocateInfo(res);}});},3000);
});
wx.error(function(error){console.log('请求失败');
});

6.发布该测试页面，地址为：

http://192.168.1.236/demo.html

7.微信中访问该页面，正常返回GPS经纬度坐标。如下图所示：

至此，即可在微信中根据位置接口对接地图导航啦，基于之前有开发微信经验，这次配置起来比较顺利，存档一下。

微信开发生成测试签名--signature，并使用微信jssdk获取位置相关推荐

记录微信开发生成测试签名--signature，并使用微信jssdk屏蔽分享
背景:因项目需要,需在公众号跳转h5页面屏蔽分享功能,没有后端配合,需签名.appID,URL等参数,本文将讲解测试环境下,初始化个性测试数据生成和调用jssdk屏蔽分享等: 详细步骤如下: 1.登录 ...
【微信开发第四章】SpringBoot实现微信H5支付
前言在进行微信公众号业务开发的时候,微信支付可以说是非常重要的一环.该篇文章每一步都有记录,力争理解的同时各位小伙伴也能够实现功能文章目录前言 1.公众号配置 2.微信支付实现代码总结 1.公 ...
android studio密钥库口令,Android应用开发Android Studio签名打包及根据keystore密钥获取SHA1安全码...
本文将带你了解Android应用开发Android Studio签名打包及根据keystore密钥获取SHA1安全码,希望本文对大家学Android有所帮助. " 一.签名打包两种方式 1. ...
微信开发——本地测试环境搭建
版权声明:欢迎转载,请注明沉默王二原创. https://blog.csdn.net/qing_gee/article/details/52858939 微信开发的本地测试环境搭建起来颇为繁琐(对微信 ...
微信开发平台应用签名修改多久之后才可以使用
修改微信开发平台的应用签名后,本以为会立即生效,但是等了一段时间还是没有生效,一个比较好的方法就是微信重新登录下就可以了
连小白都能看懂的微信开发之测试账号申请
微信测试账号申请由于用户体验和安全性方面的考虑,微信公众号的注册有一定门槛,某些高级接口的权限需要微信认证后才可以获取. 所以,为了帮助开发者快速了解和上手微信公众号开发,熟悉各个接口的调用,我们推 ...
java web 分享功能实现_微信开发（一）基于Wx-java的微信分享功能
最近在做微信服务号开发,简单总结一下,便于自己学习积累和分享给大家: 环境介绍: Spring+ Spring MVC +Mybatis 开发语言: JAVA 微信公众平台的开发中,微信只公布了一个基 ...
java初始化微信分享_微信开发（一）基于Wx-java的微信分享功能
最近在做微信服务号开发,简单总结一下,便于自己学习积累和分享给大家: 环境介绍: Spring+ Spring MVC +Mybatis 开发语言: JAVA 微信公众平台的开发中,微信只公布了一个基 ...
微信开发系列（六）_js调用微信扫码
项目里面需要用到用户通过网址来进行授权需要用到微信的扫码(请用微信打开看效果 http://lg.kezir.com/testSaoMa/jsDemo.html?a=1 ) 微信JS-SDK说明文 ...
asp php微信支付,Asp微信支付接口代码微信中生成订单后可以直接调出微信钱包直接付款_随便下源码网...
Asp微信支付接口代码微信中生成订单后,可以直接调出微信钱包直接付款软件介绍: 众所周到,目前微信支付已经十分普及,无论是商场.超市.网站上,微信支付的发展十分迅速,而ASP版微信支付在微信公众平 ...

微信开发生成测试签名--signature，并使用微信jssdk获取位置

详细步骤如下：

微信开发生成测试签名--signature，并使用微信jssdk获取位置相关推荐

最新文章

热门文章