微信公众号JS-SDK获取当前经纬度以及地址信息的方法

目录
  • 前言
  • 一、微信 JS-SDK是什么?
  • 二、使用步骤
    • 1.绑定域名
    • 2.引入 JS 文件
    • 3.通过 config 接口注入权限验证配置
    • 4、在这过程中我遇到的问题及解决方法(提示错误invalid signature)
  • 总结

前言

这篇文章带大家掌握 从0到1掌握微信公众平台js-sdk调用

  • 微信公众平台js-sdk调用到底哪几步
  • 安全域名怎么配置
  • 代码怎么写
  • 出了问题怎么查找

例如:随着微信生态的不断发展,基于微信平台的网页开发业务场景也越来越多,很多人都开启了学习微信网页开发,本文就介绍了微信网页开发的基础内容。

一、微信 JS-SDK是什么?

微信 JS-SDK 是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

二、使用步骤

1.绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注:登录后可在“开发者中心”查看对应的接口权限

测试号设置:

微信公众平台

正式账号设置:

测试账号和正式账号区别:

测试账户可以设置本机ip方便调试,正式账户设置时需要填写备案过的域名地址,开发调试时候可以先用测试号,开发完成后再切换成正式环境

2.引入 JS 文件

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

如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)。

3.通过 config 接口注入权限验证配置

此处只需要把当前域名传给后台,后台去调用JS-SDK使用权限签名算法校验通过后,将timestamp、 nonceStr、signature和当前微信公众号的appId返回给前端,前端在wx.config里面验证成功后在ready方法调用微信的wx.getLocation方法即可,其他api同理,这里以获取经纬度为例:

代码如下(示例):

			getWxSign() {
				let scope = this;
				var surl = encodeURIComponent(window.location.href.split("#")[0]);
				wxSign(surl).then((res) => {
					if (res.success) {
						wx.config({
							debug: false,
							appId: res.data.appId,
							timestamp: res.data.timestamp,
							nonceStr: res.data.nonceStr,
							signature: res.data.signature,
							jsApiList: ["getLocation"],
						});
						wx.ready(() => {
							wx.getLocation({
								success: function(res) {
									let param = {
										latitude: res.latitude,
										longitude: res.longitude,
									};
									getAddress(param).then((response) => {
										if (response) {
											let obj = {
												latitude: res.latitude,
												longitude: res.longitude,
												address: response.result
													.formatted_address,
											};
											scope.addressName = obj.address;
											scope.formInfo.lat = obj.latitude;
											scope.formInfo.lng = obj.longitude;
											scope.formInfo.dz = JSON.stringify(obj);
										}
									});
								},
								cancel: function(res) {
									alert("用户拒绝授权获取地理位置");
								},
							});
						});
					}
				});
			},

这是我们获取的经纬度,再通过腾讯地图的API接口或者天地图的api接口,将经纬度信息转为具体的地址信息即可

{latitude: 00.00000, longitude: 000.00000, errMsg: "getLocation:ok"}
	errMsg: "getLocation:ok"	//接口成功
	latitude: 00.00000			//纬度
	longitude: 000.00000		//经度
__proto__: Object
//编码逆解析
const getAddress=(opt)=>{
	return http.get(`http://api.tianditu.gov.cn/geocoder?postStr={'lon':${opt.longitude},'lat':${opt.latitude},'ver':1}&type=geocode&tk=${indexConfig.tdtMapKey}`)
}

4、在这过程中我遇到的问题及解决方法(提示错误invalid signature)

(1)在web 开发者工具 中进行调试,获取错误的提示信息(因为做的是h5移动端网页,开始在浏览器调试的时候没能获取到具体的报错信息,后面才知道有web开发者工具)

(2)根据官网上的JSSDK文档的附件5 进行错误排查(这部分我是让后端同事排查的,因为config信息是后端同事给的),发现我的失败是因为用来获取签名的URL不对,导致的invalid signature,因为我的在公众上访问时后端会在地址栏传参数给前端,但是后端在获取签名的时候没有把参数部分一起加上去,所以导致了这个错,我们解决这个问题的方法就是前端截取当前访问的URL(去掉hash部分),传给后端,后端再根据这个URL获取签名。

附录1:

概述 | 微信开放文档微信开发者平台文档
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

附录2 官方DEMO页面和示例代码

微信JS-SDK Demo

总结

到此这篇关于微信公众号JS-SDK获取当前经纬度以及地址信息的文章就介绍到这了,更多相关JS-SDK获取经纬度及地址内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue中使用微信公众号js-sdk踩坑记录

    最近又在vue中捣鼓了下微信公众号api的接入,不得不说这里边水是真的深啊,上次分享了微信授权登录和js-sdk签名的部分,其中很多朋友私信我表示了疑惑,今天我就再次尝试理顺一下这里边的坑吧: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. 分享页面到朋友圈 上文是从官方文档

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

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

  • 微信JS-SDK坐标位置如何转换为百度地图坐标

    微信JS-SDK开发过程中,使用getLocation获取坐标位置,如何将微信获取的坐标直接应用到百度地图中,显示以下效果: 说明:红色图标是从微信转换过来的位置,蓝色图标是周边位置.首先从微信开发流程讲解. 1.微信JS-SDK开发文档 首先进入官网的帮助文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN 可对文档进行详细的研读,要获取位置信息,分以下步骤:

  • 微信jssdk用法汇总

    本文针对微信jssdk用法进行了详细汇总,分享给大家,供大家参考,具体内容如下 1.绑定域名 2.引入js文件 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js 请注意,如果你的页面启用了https,务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ,否则将无法在iOS9.0以上系统中成功使用JSSDK 3.通过config接口注入权限验证

  • 微信JS SDK接入的几点注意事项(必看篇)

    微信JS SDK接入,主要可以先参考官网说明文档,总结起来有几个步骤: 1.绑定域名: 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 备注:登录后可在"开发者中心"查看对应的接口权限. 2.引入JS文件:在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js, 备注:支持使用 AMD/CMD 标准

  • 详解vue项目接入微信JSSDK的坑

    用于记录接入微信JS-SDK的坑,以后方便查询 第一次接入公众号微信支付.分享.定位等等的坑的时候,心里是迷茫而又恐惧.因为,听说坑特别多,后来发现自己的亲身体验到了这一点. 支付的坑 1.当前URL未注册 问题: 微信公众号H5调起支付时,点击支付按钮出现"当前页面的URL未注册"的提示. 解决办法:由于2017年8月1日微信官方把关于支付的信息转移到了商户平台:公众平台微信支付公众号支付授权目录.扫码支付回调URL配置入口已于8月1日迁移至商户平台(pay.weixin.qq.co

  • 微信公众号JS-SDK获取当前经纬度以及地址信息的方法

    目录 前言 一.微信 JS-SDK是什么? 二.使用步骤 1.绑定域名 2.引入 JS 文件 3.通过 config 接口注入权限验证配置 4.在这过程中我遇到的问题及解决方法(提示错误invalid signature) 总结 前言 这篇文章带大家掌握 从0到1掌握微信公众平台js-sdk调用 微信公众平台js-sdk调用到底哪几步 安全域名怎么配置 代码怎么写 出了问题怎么查找 例如:随着微信生态的不断发展,基于微信平台的网页开发业务场景也越来越多,很多人都开启了学习微信网页开发,本文就介绍

  • 微信公众号开发之获取位置信息php代码

    本文实例为大家分享了php微信公众号获取位置信息的具体代码,供大家参考,具体内容如下 <?php /** * wechat php test */ //define your token define("TOKEN", "weixin"); $wechatObj = new wechatCallbackapiTest(); //$wechatObj->valid(); $wechatObj->responseMsg(); class wechatC

  • 微信公众平台开发教程①获取用户Openid及个人信息图文详解

    本文实例讲述了微信公众平台开发获取用户Openid及个人信息.分享给大家供大家参考,具体如下: 前言: 初次尝试微信公众号的开发,对于学习方法的探索都是来源于网上的博客.问答,对于参差不齐的信息,自己也是有苦说不出,抽出一点时间写点文章,既是对自己的学习总结,也希望给予同是菜鸟的学渣一点帮助 背景介绍: 我需要用户接收微信分享的链接后,点击进入给参加活动的用户[点赞],然后需要后台获取该微信用户的 openid 作为唯一的标记信息,以便保证该用户下次进入后进行数据库的比对,直接提取其对应的操作信

  • PHP cURL获取微信公众号access_token的实例

    1.开发微信公众号首先要获取access_token,在运行代码前现在开发者设置中把本服务器IP添加到白名单中 public function index(){ $appId = 'wxd0e50fe967dccccc'; $appSecret = 'd7f6be12ce41b60ss0f45054';//虚拟的,不要用 $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=&

  • Python 抓取微信公众号账号信息的方法

    搜狗微信搜索提供两种类型的关键词搜索,一种是搜索公众号文章内容,另一种是直接搜索微信公众号.通过微信公众号搜索可以获取公众号的基本信息及最近发布的10条文章,今天来抓取一下微信公众号的账号信息 爬虫 首先通过首页进入,可以按照类别抓取,通过"查看更多"可以找出页面链接规则: import requests as req import re reTypes = r'id="pc_\d*" uigs="(pc_\d*)">([\s\S]*?)&

  • Spring Security实现微信公众号网页授权功能

    微信公众号提供了微信支付.微信优惠券.微信H5红包.微信红包封面等等促销工具来帮助我们的应用拉新保活.但是这些福利要想正确地发放到用户的手里就必须拿到用户特定的(微信应用)微信标识openid甚至是用户的微信用户信息.如果用户在微信客户端中访问我们第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑.今天就结合Spring Security来实现一下微信公众号网页授权. 环境准备 在开始之前我们需要准备好微信网页开发的环境. 微信公众号服务号 请注意,一定是微信公众号

  • C#微信公众号开发之服务器配置

    前言: 如果让大家说出一款国内比较热门的社交软件,那无疑就是QQ和微信了,说到微信,无不例外的会想到微信公众号和小程序,所以现在它们已经是很多企业流量及品牌推广的主要途径, 而作为一个开发者而言呢,如果想要开发打造一款属于自己或企业的公众号,就是需要对微信公众号平台API文档的熟悉. 你可以花上半天的时间大致阅读一下文档微信公众号开发文档 资源: 当你大致了解了微信公众号开发文档之后,就可以开始入手了 1.需要登录微信公众号平台https://mp.weixin.qq.com/ 2.注册公众号账

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

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

  • 巧用Vue.js+Vuex制作专门收藏微信公众号的app

    本文一步一步教大家如何利用Vue.js + Vuex制作专门收藏微信公众号的app 项目地址: https://github.com/jrainlau/wechat-subscriptor 下载&运行 git clone git@github.com:jrainlau/wechat-subscriptor.git cd wechat-subscriptor && npm install npm run dev   // run in dev mode cd backend-serv

  • 详细Java批量获取微信公众号方法

    最近需要爬取微信公众号的文章信息.在网上找了找发现微信公众号爬取的难点在于公众号文章链接在pc端是打不开的,要用微信的自带浏览器(拿到微信客户端补充的参数,才可以在其它平台打开),这就给爬虫程序造成很大困扰.后来在知乎上看到了一位大牛用php写的微信公众号爬取程序,就直接按大佬的思路整了整搞成java的了.改造途中遇到蛮多细节问题,拿出来分享一下. 系统的基本思路是在安卓模拟器上运行微信,模拟器设置代理,通过代理服务器拦截微信数据,将得到的数据发送给自己的程序进行处理. 需要准备的环境:node

随机推荐