微信公眾號JS-SDK獲取當(dāng)前經(jīng)緯度以及地址信息的方法
前言
這篇文章帶大家掌握 從0到1掌握微信公眾平臺js-sdk調(diào)用
- 微信公眾平臺js-sdk調(diào)用到底哪幾步
- 安全域名怎么配置
- 代碼怎么寫
- 出了問題怎么查找
例如:隨著微信生態(tài)的不斷發(fā)展,基于微信平臺的網(wǎng)頁開發(fā)業(yè)務(wù)場景也越來越多,很多人都開啟了學(xué)習(xí)微信網(wǎng)頁開發(fā),本文就介紹了微信網(wǎng)頁開發(fā)的基礎(chǔ)內(nèi)容。
一、微信 JS-SDK是什么?
微信 JS-SDK 是微信公眾平臺 面向網(wǎng)頁開發(fā)者提供的基于微信內(nèi)的網(wǎng)頁開發(fā)工具包。
通過使用微信JS-SDK,網(wǎng)頁開發(fā)者可借助微信高效地使用拍照、選圖、語音、位置等手機系統(tǒng)的能力,同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力,為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁體驗。
二、使用步驟
1.綁定域名
先登錄微信公眾平臺進(jìn)入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。
備注:登錄后可在“開發(fā)者中心”查看對應(yīng)的接口權(quán)限
測試號設(shè)置:
正式賬號設(shè)置:
測試賬號和正式賬號區(qū)別:
測試賬戶可以設(shè)置本機ip方便調(diào)試,正式賬戶設(shè)置時需要填寫備案過的域名地址,開發(fā)調(diào)試時候可以先用測試號,開發(fā)完成后再切換成正式環(huán)境
2.引入 JS 文件
在需要調(diào)用 JS 接口的頁面引入如下 JS 文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.6.0.js
如需進(jìn)一步提升服務(wù)穩(wěn)定性,當(dāng)上述資源不可訪問時,可改訪問:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)。
3.通過 config 接口注入權(quán)限驗證配置
此處只需要把當(dāng)前域名傳給后臺,后臺去調(diào)用JS-SDK使用權(quán)限簽名算法,校驗通過后,將timestamp、 nonceStr、signature和當(dāng)前微信公眾號的appId返回給前端,前端在wx.config里面驗證成功后在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)緯度,再通過騰訊地圖的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、在這過程中我遇到的問題及解決方法(提示錯誤invalid signature)
(1)在web 開發(fā)者工具 中進(jìn)行調(diào)試,獲取錯誤的提示信息(因為做的是h5移動端網(wǎng)頁,開始在瀏覽器調(diào)試的時候沒能獲取到具體的報錯信息,后面才知道有web開發(fā)者工具)
(2)根據(jù)官網(wǎng)上的JSSDK文檔的附件5 進(jìn)行錯誤排查(這部分我是讓后端同事排查的,因為config信息是后端同事給的),發(fā)現(xiàn)我的失敗是因為用來獲取簽名的URL不對,導(dǎo)致的invalid signature,因為我的在公眾上訪問時后端會在地址欄傳參數(shù)給前端,但是后端在獲取簽名的時候沒有把參數(shù)部分一起加上去,所以導(dǎo)致了這個錯,我們解決這個問題的方法就是前端截取當(dāng)前訪問的URL(去掉hash部分),傳給后端,后端再根據(jù)這個URL獲取簽名。
附錄1:
概述 | 微信開放文檔微信開發(fā)者平臺文檔
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
附錄2 官方DEMO頁面和示例代碼
總結(jié)
到此這篇關(guān)于微信公眾號JS-SDK獲取當(dāng)前經(jīng)緯度以及地址信息的文章就介紹到這了,更多相關(guān)JS-SDK獲取經(jīng)緯度及地址內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
通過設(shè)置CSS中的position屬性來固定層的位置
position 屬性規(guī)定元素的定位類型,這個屬性定義建立元素布局所用的定位機制,本文給大家介紹通過設(shè)置CSS中的position屬性來固定層的位置,感興趣的朋友一起學(xué)習(xí)吧2015-12-12js 實現(xiàn)無干擾陰影效果 簡單好用(附文件下載)
js實現(xiàn)無干擾陰影效果,簡單好用,需要的朋友可以參考下。2009-12-12微信小程序-圖片、錄音、音頻播放、音樂播放、視頻、文件代碼實例
本篇文章主要介紹了微信小程序-圖片、錄音、音頻播放、音樂播放、視屏、文件代碼實例,有興趣的可以了解一下。2016-11-11javascript setTimeout和setInterval計時的區(qū)別詳解
window對象有兩個主要的定時方法,分別是setTimeout 和 setInteval 他們的語法基本上相同,但是完成的功能取有區(qū)別。2013-06-06javascript實例--教你實現(xiàn)撲克牌洗牌功能
我們一般都會按照順序把隨機摸過來的牌從小到大的順序在手上理整齊(記得小時候打牌兩副牌手都抓不過來),這篇隨筆就是想通過實現(xiàn)這個功能來熟悉下js中排序數(shù)組等相關(guān)知識。2014-05-05