微信公眾號JS-SDK獲取當前經緯度以及地址信息的方法

Posted on by

前言

這篇文章帶大傢掌握 從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獲取經緯度及地址內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：