前言

這篇文章帶大家掌握 從0到1掌握微信公眾平臺(tái)js-sdk調(diào)用

• 微信公眾平臺(tái)js-sdk調(diào)用到底哪幾步
• 安全域名怎么配置
• 代碼怎么寫
• 出了問(wèn)題怎么查找

例如：隨著微信生態(tài)的不斷發(fā)展，基于微信平臺(tái)的網(wǎng)頁(yè)開發(fā)業(yè)務(wù)場(chǎng)景也越來(lái)越多，很多人都開啟了學(xué)習(xí)微信網(wǎng)頁(yè)開發(fā)，本文就介紹了微信網(wǎng)頁(yè)開發(fā)的基礎(chǔ)內(nèi)容。

一、微信 JS-SDK是什么？

微信 JS-SDK 是微信公眾平臺(tái) 面向網(wǎng)頁(yè)開發(fā)者提供的基于微信內(nèi)的網(wǎng)頁(yè)開發(fā)工具包。

通過(guò)使用微信JS-SDK，網(wǎng)頁(yè)開發(fā)者可借助微信高效地使用拍照、選圖、語(yǔ)音、位置等手機(jī)系統(tǒng)的能力，同時(shí)可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁(yè)體驗(yàn)。

二、使用步驟

1.綁定域名

先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。

備注：登錄后可在“開發(fā)者中心”查看對(duì)應(yīng)的接口權(quán)限

測(cè)試號(hào)設(shè)置：

微信公眾平臺(tái)

正式賬號(hào)設(shè)置：

 測(cè)試賬號(hào)和正式賬號(hào)區(qū)別：

測(cè)試賬戶可以設(shè)置本機(jī)ip方便調(diào)試，正式賬戶設(shè)置時(shí)需要填寫備案過(guò)的域名地址，開發(fā)調(diào)試時(shí)候可以先用測(cè)試號(hào)，開發(fā)完成后再切換成正式環(huán)境

2.引入 JS 文件

在需要調(diào)用 JS 接口的頁(yè)面引入如下 JS 文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需進(jìn)一步提升服務(wù)穩(wěn)定性，當(dāng)上述資源不可訪問(wèn)時(shí)，可改訪問(wèn)：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。

3.通過(guò) config 接口注入權(quán)限驗(yàn)證配置

此處只需要把當(dāng)前域名傳給后臺(tái)，后臺(tái)去調(diào)用JS-SDK使用權(quán)限簽名算法，校驗(yàn)通過(guò)后，將timestamp、 nonceStr、signature和當(dāng)前微信公眾號(hào)的appId返回給前端，前端在wx.config里面驗(yàn)證成功后在ready方法調(diào)用微信的wx.getLocation方法即可，其他api同理，這里以獲取經(jīng)緯度為例：

代碼如下（示例）：

			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("用戶拒絕授權(quán)獲取地理位置");
								},
							});
						});
					}
				});
			},

這是我們獲取的經(jīng)緯度，再通過(guò)騰訊地圖的API接口或者天地圖的api接口，將經(jīng)緯度信息轉(zhuǎn)為具體的地址信息即可

{latitude: 00.00000, longitude: 000.00000, errMsg: "getLocation:ok"}
	errMsg: "getLocation:ok"	//接口成功
	latitude: 00.00000			//緯度
	longitude: 000.00000		//經(jīng)度
__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、在這過(guò)程中我遇到的問(wèn)題及解決方法（提示錯(cuò)誤invalid signature）

（1）在web 開發(fā)者工具 中進(jìn)行調(diào)試，獲取錯(cuò)誤的提示信息（因?yàn)樽龅氖莌5移動(dòng)端網(wǎng)頁(yè)，開始在瀏覽器調(diào)試的時(shí)候沒(méi)能獲取到具體的報(bào)錯(cuò)信息，后面才知道有web開發(fā)者工具）

 （2）根據(jù)官網(wǎng)上的JSSDK文檔的附件5 進(jìn)行錯(cuò)誤排查（這部分我是讓后端同事排查的，因?yàn)閏onfig信息是后端同事給的），發(fā)現(xiàn)我的失敗是因?yàn)橛脕?lái)獲取簽名的URL不對(duì)，導(dǎo)致的invalid signature，因?yàn)槲业脑诠娚显L問(wèn)時(shí)后端會(huì)在地址欄傳參數(shù)給前端，但是后端在獲取簽名的時(shí)候沒(méi)有把參數(shù)部分一起加上去，所以導(dǎo)致了這個(gè)錯(cuò)，我們解決這個(gè)問(wèn)題的方法就是前端截取當(dāng)前訪問(wèn)的URL（去掉hash部分），傳給后端，后端再根據(jù)這個(gè)URL獲取簽名。

附錄1：

概述 | 微信開放文檔微信開發(fā)者平臺(tái)文檔
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

附錄2 官方DEMO頁(yè)面和示例代碼

 微信JS-SDK Demo

總結(jié)

到此這篇關(guān)于微信公眾號(hào)JS-SDK獲取當(dāng)前經(jīng)緯度以及地址信息的文章就介紹到這了,更多相關(guān)JS-SDK獲取經(jīng)緯度及地址內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論