微信小程序webview中如何使用微信JS接口

一侧但、我的問題

在小程序中有一個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)在遇到的問題就是前端如何生成簽名葱淳?

  1. 【公眾號平臺 => 設置與開發(fā) => 開發(fā) => 基本配置】獲取開發(fā)者ID(AppID)和開發(fā)者密碼(AppSecret)

  2. 通過微信公眾平臺接口調(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白名單 => 配置】

  1. 獲取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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末沟绪,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子空猜,更是在濱河造成了極大的恐慌绽慈,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件辈毯,死亡現(xiàn)場離奇詭異坝疼,居然都是意外死亡,警方通過查閱死者的電腦和手機谆沃,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進店門钝凶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人唁影,你說我怎么就攤上這事耕陷。” “怎么了夭咬?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵啃炸,是天一觀的道長。 經(jīng)常有香客問我卓舵,道長南用,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任掏湾,我火速辦了婚禮裹虫,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘融击。我一直安慰自己筑公,他們只是感情好,可當我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布尊浪。 她就那樣靜靜地躺著匣屡,像睡著了一般封救。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上捣作,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天誉结,我揣著相機與錄音,去河邊找鬼券躁。 笑死惩坑,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的也拜。 我是一名探鬼主播以舒,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼慢哈!你這毒婦竟也來了蔓钟?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤卵贱,失蹤者是張志新(化名)和其女友劉穎奋刽,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體艰赞,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年肚吏,在試婚紗的時候發(fā)現(xiàn)自己被綠了方妖。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡罚攀,死狀恐怖党觅,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情斋泄,我是刑警寧澤杯瞻,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站炫掐,受9級特大地震影響魁莉,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜募胃,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一旗唁、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧痹束,春花似錦检疫、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽夺溢。三九已至,卻和暖如春烛谊,著一層夾襖步出監(jiān)牢的瞬間风响,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工晒来, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留钞诡,地道東北人。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓湃崩,卻偏偏與公主長得像荧降,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子攒读,可洞房花燭夜當晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內(nèi)容