微信公眾號項(xiàng)目

測試號管理

項(xiàng)目進(jìn)行階段中，需要進(jìn)行調(diào)試，可以申請微信的測試號功能（測試號）

申請之后會有appID以及appsecret

配置js接口安全域名

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

掃碼關(guān)注測試公眾號

在體驗(yàn)接口權(quán)限表中：網(wǎng)頁服務(wù)->網(wǎng)頁賬號->網(wǎng)頁授權(quán)獲取用戶基本信息點(diǎn)擊修改
image-20210318152103144.png)]

首頁獲取用戶信息

第一步：用戶同意授權(quán)，獲取code

• 設(shè)置回調(diào)頁面：(用戶同意授權(quán)后會跳轉(zhuǎn)的頁面) 需要對url進(jìn)行編碼

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

• 設(shè)置appId，state可選，重定向后會帶上state參數(shù)

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換取網(wǎng)頁授權(quán)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數(shù)據(jù)包

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

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

• 由于access_token擁有較短的有效期，當(dāng)access_token超時(shí)后，可以使用refresh_token進(jìn)行刷新，refresh_token有效期為30天，當(dāng)refresh_token失效之后，需要用戶重新授權(quán)

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

• 返回JSON數(shù)據(jù)包

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

第四步：拉取用戶信息(如果網(wǎng)頁授權(quán)作用域?yàn)閟nsapi_userinfo，則此時(shí)開發(fā)者可以通過access_token和openid拉取用戶信息了)

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

• 返回JSON數(shù)據(jù)包

{ "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" }

調(diào)取微信地圖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調(diào)用形式的jsapi會有問題debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時(shí)才會打印。appId: this.appid, // 必填，企業(yè)微信的corpIDtimestamp: this.timestamp, // 必填，生成簽名的時(shí)間戳nonceStr: this.nonceStr, // 必填，生成簽名的隨機(jī)串signature: this.signature, // 必填，簽名，見 附錄-JS-SDK使用權(quán)限簽名算法jsApiList: ['openLocation'] // 必填，需要使用的JS接口列表，凡是要調(diào)用的接口都需要傳進(jìn)來，調(diào)用地圖接口 })

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

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

生成時(shí)間戳、隨機(jī)字符串

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

獲取jsapi_ticket: 說明文檔

獲取token：說明文檔

生成簽名：說明文檔

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

校驗(yàn)簽名：網(wǎng)址

在jsApiList 中填入需要調(diào)用的api，需要的都填入

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

校驗(yàn)成功后調(diào)用openLocation 方法跳轉(zhuǎn)到騰訊地圖

跳轉(zhuǎn)樣式只在手機(jī)上生效，開發(fā)者工具中只會有調(diào)用成功提示輸出

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

完整代碼

async mounted() {this.init()await this.getJsapi()// 微信jdk配置this.$wx.config({beta: true, // 必須這么寫，否則wx.invoke調(diào)用形式的jsapi會有問題debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時(shí)才會打印。appId: this.appid, // 必填，企業(yè)微信的corpIDtimestamp: this.timestamp, // 必填，生成簽名的時(shí)間戳nonceStr: this.nonceStr, // 必填，生成簽名的隨機(jī)串signature: this.signature, // 必填，簽名，見 附錄-JS-SDK使用權(quán)限簽名算法jsApiList: ['openLocation'] // 必填，需要使用的JS接口列表，凡是要調(diào)用的接口都需要傳進(jìn)來，調(diào)用地圖接口})// wx.config成功后會走wx.ready,失敗會走wx.errorthis.$wx.ready(() => {console.log('進(jìn)入ready函數(shù)')// this.$wx.openLocation({// latitude: 23.132006, // 緯度，浮點(diǎn)數(shù)，范圍為90 ~ -90// longitude: 113.377785, // 經(jīng)度，浮點(diǎn)數(shù)，范圍為180 ~ -180。// name: '測試', // 位置名// address: '這是一個(gè)測試', // 地址詳情說明// scale: 1, // 地圖縮放級別,整形值,范圍從1~28。默認(rèn)為最大// infoUrl: 'http://www.baidu.com', // 在查看位置界面底部顯示的超鏈接,可點(diǎn)擊跳轉(zhuǎn)// })})this.$wx.error(res => {alert('錯(cuò)誤信息' + 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('導(dǎo)航')this.$wx.openLocation({latitude: 29.744899, // 緯度，浮點(diǎn)數(shù)，范圍為90 ~ -90longitude: 106.55495, // 經(jīng)度，浮點(diǎn)數(shù)，范圍為180 ~ -180。name: '測試', // 位置名address: '這是一個(gè)測試', // 地址詳情說明scale: 13, // 地圖縮放級別,整形值,范圍從1~28。默認(rèn)為最大infoUrl: 'http://www.baidu.com' // 在查看位置界面底部顯示的超鏈接,可點(diǎn)擊跳轉(zhuǎn)})},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)}}

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。