一侧但、我的問題
在小程序中有一個webview頁面內(nèi)嵌了h5纹烹,在h5頁面中,我想要通過wx.getLocation如何獲取位置信息网棍?
一開始我以為它跟抖音和百度小程序一樣缭嫡,只需要引入一個sdk地址轨蛤,就可以直接使用webview中可支持的方法了铁孵。然而微信并不是>盗谩!會直接報錯getLocation:fail, the permission value is offline verifying
二舒裤、解決辦法
官方給出了答案如下:
但是我一個新手,每句話都能認識觉吭,卻不知道怎么操作腾供!
而且我有一個疑惑,這是微信公眾號中的文檔鲜滩,是否小程序也應該如此操作伴鳖?帶著這個疑惑,我開始嘗試一番徙硅!
接下來直接描述步驟吧:
1榜聂、引入js sdk文件
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js" ></script>
2、配置wx.config
wx.config({
debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來嗓蘑,若要查看傳入的參數(shù)须肆,可以在pc端打開,參數(shù)信息會通過log打出桩皿,僅在pc端時才會打印豌汇。
appId: 'wx45xx44xx9a3af6e0', // 必填,公眾號的唯一標識
timestamp: '1720057075', // 必填泄隔,生成簽名的時間戳
nonceStr: 'Wm3WZYTPz0wzccnW', // 必填拒贱,生成簽名的隨機串
signature: 'b723697febbc7b0286b0d740b6b16dbea6b44e1f',// 必填,簽名
jsApiList: ["getLocation"] // 必填佛嬉,需要使用的JS接口列表
});
①. 需要公眾號安全域名配置
【公眾號平臺 => 設置與開發(fā) => 公眾號設置 => 功能設置 => JS接口安全域名】
②. 獲取wx.config所需參數(shù)
appId逻澳,timestamp ,nonceStr暖呕,signature這幾個參數(shù)斜做,其實都需要通過后端給我們,但是目前我不確定這種方案是否可行缰揪,所以我需要自己先驗證一下陨享。
簽名算法官方文檔參考:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#%E9%99%84%E5%BD%951-JS-SDK%E4%BD%BF%E7%94%A8%E6%9D%83%E9%99%90%E7%AD%BE%E5%90%8D%E7%AE%97%E6%B3%95
那我現(xiàn)在遇到的問題就是前端如何生成簽名葱淳?
【公眾號平臺 => 設置與開發(fā) => 開發(fā) => 基本配置】獲取開發(fā)者ID(AppID)和開發(fā)者密碼(AppSecret)
通過微信公眾平臺接口調(diào)試工具(https://mp.weixin.qq.com/debug/cgi-bin/apiinfo)獲取access_token(有效期2小時)
{
"grant_type": "client_credential",
"appid": "wx59xxxxxxxxaf6e0", // 注意一定是公眾號id
"secret": "b892exxxxxxxxxxxxxxxxcd444500046e3"
}
注意:獲取access_token過程應該會遇到一個ip不在白名單的報錯,可以按如下路徑去公眾號添加白名單:
【公眾號平臺 => 設置與開發(fā) => 基本配置 => 公眾號開發(fā)信息 => IP白名單 => 配置】
- 獲取jsapi_ticket(https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi)
4.使用微信 JS 接口簽名校驗工具(https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign)計算簽名
最后生成的簽名和其他參數(shù)在wx.config()中調(diào)試即可抛姑。
3赞厕、在wx.ready調(diào)用方法
wx.ready(() => {
wx.getLocation({
type: "gcj02",
success: async res => {
console.log("getLocation調(diào)用成功", res);
},
fail: err => {
console.log(`getLocation調(diào)用失敗`, err);
}
});
});
這個時候差不多大功告成,終于能獲取到位置信息啦定硝。
tips: 文中提到的appid和AppSecret都是公眾號的(個人就在這被坑了很長時間)皿桑,所以小程序中webview內(nèi)要用到這些方法,還必須要有一個公眾號的可以使用蔬啡,我這里是自己個人注冊了一個訂閱號去嘗試的
wx.config打通了之后诲侮,不只是能調(diào)用getLocation的方法,比如常用到的分享接口都是需要先進行這一步的箱蟆。
支持的方法可以看文檔https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#63