微信公眾號項目

測試號管理

項目進行階段中，需要進行調試，可以申請微信的測試號功能（測試號）

申請之后會有appID以及appsecret

配置js接口安全域名

可以設置本地域名（可以使用ip地址，上線項目只能使用域名不能使用ip地址（不需要前面http部分：192.168.3.196:9020））

掃碼關注測試公眾號

在體驗接口權限表中：網頁服務->網頁賬號->網頁授權獲取用戶基本信息點擊修改
image-20210318152103144.png)]

首頁獲取用戶信息

第一步：用戶同意授權，獲取code

• 設置回調頁面：(用戶同意授權后會跳轉的頁面) 需要對url進行編碼

const callbackURL = encodeURIComponent(`http://192.168.3.196:9020/#/binding`

• 設置appId，state可選，重定向后會帶上state參數

const redirectURI = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${callbackURL}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`

• 從url中獲取code

http://192.168.3.196:9020/?code=0517rjll242IG64UC9nl25adxX17rjlV&state=1#/eventDetails

第二步：通過code換取網頁授權access_token（最好后臺處理）

• 通過url獲取access_token

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

• 返回JSON數據包

{"access_token":"ACCESS_TOKEN","expires_in":7200,"refresh_token":"REFRESH_TOKEN","openid":"OPENID","scope":"SCOPE" }

第三部：刷新access_token(如果需要)

• 由于access_token擁有較短的有效期，當access_token超時后，可以使用refresh_token進行刷新，refresh_token有效期為30天，當refresh_token失效之后，需要用戶重新授權

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

• 返回JSON數據包

{ "access_token":"ACCESS_TOKEN","expires_in":7200,"refresh_token":"REFRESH_TOKEN","openid":"OPENID","scope":"SCOPE" }

第四步：拉取用戶信息(如果網頁授權作用域為snsapi_userinfo，則此時開發者可以通過access_token和openid拉取用戶信息了)

http：GET（請使用https協議） https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

• 返回JSON數據包

{ "openid": "OPENID","nickname": NICKNAME,"sex": 1,"province":"PROVINCE","city":"CITY","country":"COUNTRY", "headimgurl":"https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46","privilege":[ "PRIVILEGE1" "PRIVILEGE2" ],"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL" }

調取微信地圖API

第一步：引入jssdk

npm i weixin-js-sdk

第二步：main.js中使用jssdk

//引入微信jssdk import wx from 'weixin-js-sdk' Vue.prototype.$wx = wx

第三步：配置config

配置config，所有需要使用JS-SDK的頁面必須先注入配置信息

// 微信jdk配置 this.$wx.config({beta: true, // 必須這么寫，否則wx.invoke調用形式的jsapi會有問題debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。appId: this.appid, // 必填，企業微信的corpIDtimestamp: this.timestamp, // 必填，生成簽名的時間戳nonceStr: this.nonceStr, // 必填，生成簽名的隨機串signature: this.signature, // 必填，簽名，見 附錄-JS-SDK使用權限簽名算法jsApiList: ['openLocation'] // 必填，需要使用的JS接口列表，凡是要調用的接口都需要傳進來，調用地圖接口 })

通過ready接口處理成功驗證（config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對于用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。）

this.$wx.ready(() => { console.log('進入ready函數') // this.$wx.openLocation({ // latitude: 23.132006, // 緯度，浮點數，范圍為90 ~ -90 // longitude: 113.377785, // 經度，浮點數，范圍為180 ~ -180。 // name: '測試', // 位置名 // address: '這是一個測試', // 地址詳情說明 // scale: 1, // 地圖縮放級別,整形值,范圍從1~28。默認為最大 // infoUrl: 'http://www.baidu.com', // 在查看位置界面底部顯示的超鏈接,可點擊跳轉 // }) })

生成時間戳、隨機字符串

timestamp: +new Date(), //簽名時間戳 nonceStr: Math.random().toString(16).substr(2), //生成簽名的隨機串

獲取jsapi_ticket: 說明文檔

獲取token：說明文檔

生成簽名：說明文檔

將timestamp、nonceStr、jsapi_ticket、token按照要求排列通過sha1簽名算法生成簽名，簽名正確才可調用微信api

校驗簽名：網址

在jsApiList 中填入需要調用的api，需要的都填入

// 微信jdk配置 this.$wx.config({beta: true, // 必須這么寫，否則wx.invoke調用形式的jsapi會有問題debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。appId: this.appid, // 必填，企業微信的corpIDtimestamp: this.timestamp, // 必填，生成簽名的時間戳nonceStr: this.nonceStr, // 必填，生成簽名的隨機串signature: this.signature, // 必填，簽名，見 附錄-JS-SDK使用權限簽名算法jsApiList: ['openLocation'] // 必填，需要使用的JS接口列表，凡是要調用的接口都需要傳進來，調用地圖接口 })

校驗成功后調用openLocation 方法跳轉到騰訊地圖

跳轉樣式只在手機上生效，開發者工具中只會有調用成功提示輸出

this.$wx.openLocation({latitude: 29.744899, // 緯度，浮點數，范圍為90 ~ -90longitude: 106.55495, // 經度，浮點數，范圍為180 ~ -180。name: '測試', // 位置名address: '這是一個測試', // 地址詳情說明scale: 13, // 地圖縮放級別,整形值,范圍從1~28。默認為最大infoUrl: 'http://www.baidu.com' // 在查看位置界面底部顯示的超鏈接,可點擊跳轉 })

完整代碼

async mounted() {this.init()await this.getJsapi()// 微信jdk配置this.$wx.config({beta: true, // 必須這么寫，否則wx.invoke調用形式的jsapi會有問題debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。appId: this.appid, // 必填，企業微信的corpIDtimestamp: this.timestamp, // 必填，生成簽名的時間戳nonceStr: this.nonceStr, // 必填，生成簽名的隨機串signature: this.signature, // 必填，簽名，見 附錄-JS-SDK使用權限簽名算法jsApiList: ['openLocation'] // 必填，需要使用的JS接口列表，凡是要調用的接口都需要傳進來，調用地圖接口})// wx.config成功后會走wx.ready,失敗會走wx.errorthis.$wx.ready(() => {console.log('進入ready函數')// this.$wx.openLocation({// latitude: 23.132006, // 緯度，浮點數，范圍為90 ~ -90// longitude: 113.377785, // 經度，浮點數，范圍為180 ~ -180。// name: '測試', // 位置名// address: '這是一個測試', // 地址詳情說明// scale: 1, // 地圖縮放級別,整形值,范圍從1~28。默認為最大// infoUrl: 'http://www.baidu.com', // 在查看位置界面底部顯示的超鏈接,可點擊跳轉// })})this.$wx.error(res => {alert('錯誤信息' + JSON.stringify(res))}) },methods: {init() {// console.log(AMap, '123')const map = new AMap.Map('container', {center: [116.397428, 39.90923],resizeEnable: true,zoom: 10})},navigation() {console.log('導航')this.$wx.openLocation({latitude: 29.744899, // 緯度，浮點數，范圍為90 ~ -90longitude: 106.55495, // 經度，浮點數，范圍為180 ~ -180。name: '測試', // 位置名address: '這是一個測試', // 地址詳情說明scale: 13, // 地圖縮放級別,整形值,范圍從1~28。默認為最大infoUrl: 'http://www.baidu.com' // 在查看位置界面底部顯示的超鏈接,可點擊跳轉})},getUrl() {let url = window.location.hrefthis.url = url.split('#')[0]},async getJsapi() {//獲取ticketconst res = await getJsapiTicket()this.getUrl()this.jsapi_ticket = res.dataconst params = {jsapiTicket: this.jsapi_ticket,timestamp: this.timestamp,noncestr: this.nonceStr,url: this.url}//獲取簽名this.signature = await getSignature(params)console.log('nonceStr:' + this.nonceStr)console.log('jsapi_ticket:' + this.jsapi_ticket)console.log('timestamp:' + this.timestamp)console.log('url:' + this.url)console.log('signature:' + this.signature)}}

總結

以上是生活随笔為你收集整理的微信公众号调用腾讯地图api的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。