建站
咨詢
售后
建站咨詢
新聞中心
數(shù)據(jù)和文件是小程序開(kāi)發(fā)非常重要的元素，在前面的章節(jié)里，數(shù)據(jù)和文件等的存儲(chǔ)都是在小程序的頁(yè)面進(jìn)行渲染、或是頁(yè)面間傳遞或與本地手機(jī)交互。這一節(jié)我們會(huì)來(lái)介紹數(shù)據(jù)、文件如何與網(wǎng)絡(luò) HTTP 進(jìn)行數(shù)據(jù)、文件的對(duì)話，如何獲取并上傳網(wǎng)絡(luò)數(shù)據(jù)和文件。
創(chuàng)新互聯(lián)建站專注于定興企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站建設(shè)。定興網(wǎng)站建設(shè)公司,為定興等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站開(kāi)發(fā)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)
數(shù)據(jù)API
小程序以及很多程序的 API 是預(yù)先就已經(jīng)寫(xiě)好的函數(shù)，使我們不需要對(duì)底層有太多了解，只需要按照技術(shù)文檔進(jìn)行傳遞參數(shù)就能調(diào)用出非常復(fù)雜的功能。而還有一類 API 則側(cè)重于把數(shù)據(jù)資源給開(kāi)放出來(lái)，我們可以通過(guò) HTTP 的方式來(lái)使用這些數(shù)據(jù)。
了解網(wǎng)絡(luò)數(shù)據(jù)API
復(fù)制以下鏈接地址，用瀏覽器打開(kāi)，看看會(huì)返回什么結(jié)果：
//知乎日?qǐng)?bào)的最新話題
https://news-at.zhihu.com/api/4/news/latest
//知乎日?qǐng)?bào)某一個(gè)話題的內(nèi)容
https://news-at.zhihu.com/api/4/news/9714883
//v2ex論壇的最新主題
https://www.v2ex.com/api/topics/latest.json
//CNode論壇的最新話題
https://cnodejs.org/api/v1/topics以上所返回的數(shù)據(jù)類型都是 json 格式，相信大家應(yīng)該比較熟悉了。那我們?nèi)绾伟岩陨蠑?shù)據(jù)渲染到我們的小程序頁(yè)面上呢？
數(shù)據(jù)是一種資源，比如新聞資訊、電商商品、公眾號(hào)文章、股市行情、空氣質(zhì)量和天氣、地圖、詞典翻譯、快遞信息、書(shū)籍信息、音樂(lè)視頻、財(cái)務(wù)公司信息等等這些都是數(shù)據(jù)，數(shù)據(jù)也是一種商品，一種服務(wù)，通常它的使用對(duì)象是開(kāi)發(fā)者，有些免費(fèi)，有些也會(huì)收取一定的費(fèi)用，大家可以通過(guò)綜合性API服務(wù)平臺(tái)聚合API來(lái)對(duì)API服務(wù)有一個(gè)基礎(chǔ)的了解。
練手API資源推薦
這里推薦幾個(gè)程序員經(jīng)常會(huì)拿來(lái)練手的 API 資源，你可以使用這些 API 來(lái)做網(wǎng)站、小程序、移動(dòng)端（iOS、安卓）、桌面端，也可以用于各種框架比如 Vue、React、Flutter 等等，數(shù)據(jù)沒(méi)變，只是解決方案不同。
- 聚合API ：一個(gè)比較全面的綜合性API服務(wù)平臺(tái)
- 即速API ：也是提供一些綜合性的API服務(wù)
- V2EX API ：v2ex論壇是很多程序員經(jīng)常會(huì)光顧的綜合性技術(shù)論壇
- 和風(fēng)天氣 ：含天氣預(yù)報(bào)、空氣質(zhì)量、實(shí)況天氣等數(shù)據(jù)
- Github API ：Github 是所有程序員都（必須）會(huì)使用的網(wǎng)站
- 知乎日?qǐng)?bào)API ：知乎日?qǐng)?bào)的 API
各大公司的開(kāi)發(fā)平臺(tái)：比如微信開(kāi)放平臺(tái) 提供了微信賬號(hào)體系的接入，騰訊云API中心 則提供了調(diào)用云資源的能力（包含服務(wù)器、物聯(lián)網(wǎng)、人工智能等API）、開(kāi)源網(wǎng)站W(wǎng)ordpress 也提供API調(diào)用的服務(wù)，在API資源的開(kāi)放方面，國(guó)外也做得比較領(lǐng)先（國(guó)外免費(fèi)API列表 ）。而對(duì)于特定的數(shù)據(jù)資源，也可以通過(guò)爬蟲(chóng)等方式來(lái)自建。
渲染網(wǎng)絡(luò)數(shù)據(jù)到頁(yè)面
要渲染從 API 里獲取到的數(shù)據(jù)，首先我們需要對(duì) API 里的字段（屬性）到底是干什么的要有一定的了解。比如知乎日?qǐng)?bào)的API字段如下，這個(gè)可以從 API 相關(guān)的文檔里了解到以及需要我們結(jié)合 Console.log 來(lái)對(duì)比了解。
比如
date: 日期；stories: 當(dāng)日新聞；title: 新聞標(biāo)題；images: 圖像地址；id:url與share_url中最后的數(shù)字為內(nèi)容的id；top_stories: 界面頂部輪播的顯示內(nèi)容。 這些在做數(shù)據(jù)渲染前就需要有所了解。
獲取網(wǎng)絡(luò)數(shù)據(jù)
使用開(kāi)發(fā)者工具新建一個(gè) request 頁(yè)面，然后在 request.js 里的 onLoad 生命周期函數(shù)里輸入以下代碼：
onLoad: function (options) {
wx.request({
url: 'https://news-at.zhihu.com/api/4/news/latest', //知乎日?qǐng)?bào)最新話題
header: {
'content-type': 'application/json' // 默認(rèn)值
},
success(res) {
console.log('網(wǎng)絡(luò)請(qǐng)求成功之后獲取到的數(shù)據(jù)',res)
console.log('知乎日?qǐng)?bào)最新話題',res.data)
}
})
},域名校驗(yàn)與白名單
編譯之后，在控制臺(tái) Console 你會(huì)看到如下報(bào)錯(cuò)，你的域名不在域名白名單里面，這是因?yàn)樾〕绦蛑豢梢愿付ǖ挠蛎c進(jìn)行網(wǎng)絡(luò)通信。
request:fail url not in domain list解決方法有兩種，一是打開(kāi)開(kāi)發(fā)者工具工具欄右上角的詳情，勾選不校驗(yàn)合法域名、業(yè)務(wù)域名、TLS版本以及HTTPS證書(shū)；二是你可以去小程序的管理后臺(tái)（注冊(cè)小程序時(shí)的頁(yè)面），點(diǎn)擊開(kāi)發(fā)–開(kāi)發(fā)設(shè)置，在request合法域名處添加該域名（如果你不想把這個(gè)小程序發(fā)布上線，沒(méi)有必要添加）。
res對(duì)象和res.data對(duì)象
編譯之后，在控制臺(tái) Console 就可以看到打印的 res 對(duì)象，以及 res 里的 data 對(duì)象。res.data 的數(shù)據(jù)正是我們使用瀏覽器打開(kāi)鏈接所得到的 json 數(shù)據(jù)，結(jié)合我們之前學(xué)到的數(shù)據(jù)渲染方面的知識(shí)，相信大家應(yīng)該對(duì)如何將數(shù)據(jù)渲染到頁(yè)面就不會(huì)感到陌生了。
在打印的res對(duì)象有一些參數(shù)，比如cookies、header、statusCode這些是什么意思呢？我們可以來(lái)結(jié)合技術(shù)文檔深入了解。
技術(shù)文檔：wx.request網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求
statusCode：開(kāi)發(fā)者服務(wù)器返回的 HTTP 狀態(tài)碼，也就是指示 HTTP 請(qǐng)求是否成功，其中 200 為請(qǐng)求成功，404 請(qǐng)求失敗，更多狀態(tài)碼的知識(shí)可以查閱 MDN HTTP 響應(yīng)代碼header：開(kāi)發(fā)者服務(wù)器返回的 HTTP 消息頭，其中Content-Type為服務(wù)器文檔的 MIME 類型，API 的 MIME 類型通常為 "application/json; charset=UTF-8"，建議服務(wù)器返回值使用 UTF-8 編碼（如果你有服務(wù)器的話）。-
wx.request只能發(fā)起 HTTPS 請(qǐng)求，默認(rèn)超時(shí)時(shí)間為60s，最大并發(fā)限制為 10個(gè)小任務(wù)：把
request的鏈接換成 v2ex、cnode 論壇的 API 鏈接以及知乎日?qǐng)?bào)某一個(gè)話題的內(nèi)容 API，看看是什么結(jié)果？你知道返回來(lái)的 json 數(shù)據(jù)的每一條屬性代表的意思嗎？
將數(shù)據(jù)渲染到頁(yè)面
既然我們已經(jīng)從知乎日?qǐng)?bào)的 API 取得了數(shù)據(jù)，那渲染數(shù)據(jù)的方法以及如何實(shí)現(xiàn)跨頁(yè)面渲染，在前面的章節(jié)我們已經(jīng)就有所了解了。
簡(jiǎn)單的知乎日?qǐng)?bào)首頁(yè)
使用開(kāi)發(fā)者工具在 request.wxml 里輸入 weui 的列表樣式（需要引入 weui 框架哦）
{{stories.title}}
然后再在 request.js 的 data 里聲明 date、stories、top_stories 的初始值（使用的變量和 API 的字段盡量保持一致，這樣就不容易混亂）
data: {
date:"",
stories:[],
top_stories:[],
},在 onLoad 生命周期函數(shù)里將數(shù)據(jù)通過(guò) setData 的方式給賦值給 data：
onLoad: function (options) {
let that=this
wx.request({
url: 'https://news-at.zhihu.com/api/4/news/latest',
header: {
'content-type': 'application/json'
},
success(res) {
let date=res.data.date
let stories=res.data.stories
let top_stories = res.data.top_stories
that.setData({
date,stories,top_stories
})
}
})
},編譯之后，我們就能看到知乎日?qǐng)?bào)的數(shù)據(jù)就渲染在頁(yè)面上了。
小任務(wù)： top_stories 是界面頂部輪播的顯示內(nèi)容，制作一個(gè) swiper 輪播，將 top_stories 里的內(nèi)容渲染到輪播上。
打開(kāi)開(kāi)發(fā)者工具調(diào)試工具欄的 AppData 標(biāo)簽頁(yè)，就能看到從網(wǎng)絡(luò) API 里獲取到的數(shù)據(jù)。也可以在此處編輯數(shù)據(jù)，并及時(shí)地反饋到界面上。如果 AppData 里有數(shù)據(jù)，可以確認(rèn)頁(yè)面已經(jīng)取得 `res` 里的 `data` 數(shù)據(jù)，如果數(shù)據(jù)沒(méi)有渲染到頁(yè)面，說(shuō)明列表渲染可能有誤。通過(guò)這種方式可以診斷頁(yè)面渲染問(wèn)題所在。詳情頁(yè)數(shù)據(jù)渲染
前面我們獲取的只是知乎的最新文章列表，那文章里面的內(nèi)容呢？通過(guò) API 文檔以及我們通過(guò)鏈接訪問(wèn)的結(jié)果來(lái)看，我們只需要取得了文章的 ID，就能從 API 里獲取到文章的詳情頁(yè)內(nèi)容：
https://news-at.zhihu.com/api/4/news/9714883 //9714883是文章的ID使用開(kāi)發(fā)者工具新建一個(gè) story 頁(yè)面，然后在 story.wxml 里輸入以下代碼:
{{title}}
{{body}}
知乎鏈接：{{share_url}}
然后再在 request.js 的 data 里聲明 title、body、image、share_url的初始值：
data: {
title:"",
body:"",
image:"",
share_url:"",
},在 onLoad 生命周期函數(shù)里調(diào)用 wx.request 獲取文章詳情頁(yè)的數(shù)據(jù)，并通過(guò) setData 的方式給賦值給 data ：
onLoad: function (options) {
let stories_id=9714883
let that = this
wx.request({
url: 'https://news-at.zhihu.com/api/4/news/'+stories_id,
header: {
'content-type': 'application/json'
},
success(res) {
let title = res.data.title
let body=res.data.body
let image=res.data.image
let share_url=res.data.share_url
that.setData({
title,body,image,share_url
})
}
})編譯之后，發(fā)現(xiàn)數(shù)據(jù)雖然渲染出來(lái)了，但是存在“亂碼”（是 HTML 標(biāo)簽），那這個(gè)要如何處理呢？這個(gè)就涉及到小程序的富文本解析了。
HTML標(biāo)簽解析rich-text
只需要將富文本對(duì)象放在 rich-text的 nodes 里，就能將富文本解析出來(lái)了，比如將上面的{{body}}替換成以下代碼。
小程序富文本解析的方案還有：Comi ，騰訊 Omi 團(tuán)隊(duì)開(kāi)發(fā)的小程序代碼高亮和 markdown 渲染組件，Github 地址，具體效果可以在微信小程序里搜索 omiCloud；以及wxPrase，微信小程序富文本解析自定義組件，支持 HTML 及 markdown 解析，Github地址，當(dāng)你遇到更加復(fù)雜的富文本解析時(shí)，可以來(lái)深入了解。跨頁(yè)面數(shù)據(jù)渲染
上面我們只是渲染了單篇文章的詳情頁(yè)，那如何點(diǎn)擊文章列表就能渲染與之相應(yīng)的文章詳情頁(yè)呢？這就回到了我們之前學(xué)過(guò)的跨頁(yè)面數(shù)據(jù)渲染。
首先把 request 頁(yè)面置于首頁(yè)，然后再給 request.wxml 里的 navigator 組件的鏈接上攜帶文章的 id：
url="/pages/story/story?id={{stories.id}}"當(dāng)點(diǎn)擊 request 頁(yè)面的鏈接時(shí)，鏈接攜帶的數(shù)據(jù)就會(huì)傳到 story 頁(yè)面的生命周期函數(shù) onLoad 的 options 對(duì)象里，將 options 里的 id ，賦值給stories_id，也就是將文章 id 9714883修改為 options.id
let stories_id=options.id這樣再來(lái)點(diǎn)擊 request 頁(yè)面的鏈接，不同的鏈接就會(huì)渲染不同的文章詳情。
解構(gòu)賦值
解構(gòu)賦值也就是從數(shù)組 Array 和對(duì)象 Object 中提取值，按照對(duì)照的位置，對(duì)變量進(jìn)行賦值。比如上面的變量聲明，為了能夠與 API 里的數(shù)據(jù)字段一一對(duì)應(yīng)，我們會(huì)聲明很多變量，知乎日?qǐng)?bào)的 API 還算比較少的，多了就比較復(fù)雜了。
let title = res.data.title
let body=res.data.body
let image=res.data.image
let share_url=res.data.share_url這時(shí)可以簡(jiǎn)寫(xiě)成：
let { title, body, image, share_url}=res.data歷史上的今天
知乎日?qǐng)?bào)的 API 是比較開(kāi)放的，并不需要我們?nèi)プ?cè) API 服務(wù)就能獲取到這些數(shù)據(jù)，但是大多數(shù)情況下，API 是商品服務(wù)，需要我們注冊(cè)，那需要注冊(cè)的 API 和開(kāi)放的 API 有什么不同呢？
注冊(cè)歷史上的今天的服務(wù)
注冊(cè)聚合API 并認(rèn)證，認(rèn)證之后可以申請(qǐng)開(kāi)通歷史上的今天、圖書(shū)電商數(shù)據(jù)等免費(fèi)的 API 服務(wù)，并找到你的與之對(duì)應(yīng)的 AppKey。
替換下面鏈接你的歷史上的今天對(duì)應(yīng)的 key（直接輸 AppKey 就行），然后在瀏覽器打開(kāi)鏈接（下面這個(gè)是 1.0版）
http://api.juheapi.com/japi/toh?month=9&day=15&key=你的歷史上的今天對(duì)應(yīng)的key也可以選擇事件列表的 2.0版（為了講解方便，下面以1.0版本為主）
http://v.juhe.cn/todayOnhistory/queryEvent.php?date=9/15&key=你的歷史上的今天對(duì)應(yīng)的keykey的存放
通常我們會(huì)把拿到的key放在app.js的globalData里，或者在小程序里新建一個(gè)config.js，方便以后全局調(diào)用，而不是把key直接寫(xiě)在頁(yè)面里。
方法一：寫(xiě)在app.js里的globalData，或者新建一個(gè)keyData對(duì)象，只要達(dá)到全局調(diào)用的目的都可以，以globalData為例
globalData: {
juheKey:"366444.......00ff", //聚合AppKey
},這種方式調(diào)用時(shí)首先在頁(yè)面的js文件里、Page()函數(shù)的前面使用
const app=getApp()之后就可以使用app.globalData.juheKey來(lái)調(diào)用它了。
方法二：也可以在小程序的根目錄或者utils文件夾新建一個(gè)config.js，然后結(jié)合前面模塊化的知識(shí)，寫(xiě)入以下代碼：
module.exports = {
juheKey:"366444.......00ff", //聚合AppKey
}這種方式調(diào)用時(shí)我們需要先在頁(yè)面的Page()函數(shù)前面引入模塊化文件
const key = require('../../utils/config.js')然后就可以使用key.juheKey調(diào)用它了。
將一些通用的數(shù)據(jù)、函數(shù)單獨(dú)拿出來(lái)存放在globalData里或進(jìn)行模塊化，是在實(shí)際開(kāi)發(fā)中會(huì)經(jīng)常使用到的一種方法，它可以讓數(shù)據(jù)、函數(shù)更容易管理以及可以重復(fù)利用，使得代碼更加精簡(jiǎn)。
wx.request請(qǐng)求數(shù)據(jù)
使用開(kāi)發(fā)者工具新建一個(gè)apidata頁(yè)面，然后在apidata.js的Page()函數(shù)前面輸入以下代碼：
const app=getApp()
const now = new Date();
const month = now.getMonth()+1 //月份需要+1
const day = now.getDate()然后再在生命周期函數(shù)onLoad里輸入wx.request數(shù)據(jù)請(qǐng)求：
onLoad: function (options) {
wx.request({
url: 'http://api.juheapi.com/japi/toh',
data: {
month: month,
day: day,
key: app.globalData.juheKey,
},
header: {
'content-type': 'application/json'
},
success(res) {
console.log(res.data)
}
})
},wx.request里的data就是要傳入的參數(shù)，我們把month、day、key傳入到請(qǐng)求的鏈接里。它等價(jià)于以下鏈接（注意把data里的屬性值，以免傳兩次參數(shù)）
url: "http://api.juheapi.com/japi/toh?" + "month=" + month + "&day=" + day + "&key=" + app.globalData.juheKey,模板字符串
要將多個(gè)字符串連接起來(lái)，可以使用加號(hào)+來(lái)用作字符串的拼接，如果變量比較多，是不是很麻煩？我們還可以使用模板字符串，模板字符串使用反引號(hào) ``來(lái)表示（在電腦鍵盤(pán)esc按鍵下面）。要在模板字符串中嵌入變量，需要將變量名寫(xiě)在 ${}之中，比如上面的鏈接也可以寫(xiě)成：
url: `http://api.juheapi.com/japi/toh?month=${month}&day=${day}&key=${app.globalData.juheKey}`,在控制臺(tái)我們就可以看到獲取到的res.data數(shù)據(jù)，至于如何渲染到頁(yè)面，這里就不多介紹了。
天氣API
注冊(cè)和風(fēng)天氣 ，并在控制臺(tái)的應(yīng)用管理新建一個(gè)應(yīng)用，獲取到該應(yīng)用的 key，按照上面的方法將 key 添加到 globalData 里：
globalData: {
heweatherKey:"732c.........0b", //和風(fēng)天氣key
}通過(guò)技術(shù)文檔我們可以了解到免費(fèi)版和風(fēng)天氣 API 的必備字段為weather-type（根據(jù)不同的值可以取得不同的數(shù)據(jù)）和請(qǐng)求參數(shù)（其中location為必備參數(shù)）
技術(shù)文檔：和風(fēng)常規(guī)天氣數(shù)據(jù)API
也就是我們可以通過(guò)鏈接可以獲取到數(shù)據(jù)，注意 now 在問(wèn)號(hào) ? 的前面，也就是它不是請(qǐng)求的參數(shù)， location 和 key 才是。
https://free-api.heweather.net/s6/weather/now?location=beijing&key=你的key然后再在apidata.js Page()的data里初始化聲明weathertype（屬性名最好不要有連接符-）和location：
data: {
weathertype:"now",
location:"beijing" //location的寫(xiě)法有很多種，具體可以參考技術(shù)文檔
},然后再在生命周期函數(shù)里添加wx.request請(qǐng)求（onLoad里可以寫(xiě)多個(gè)wx.request請(qǐng)求）
const weathertype=this.data.weathertype
wx.request({
url: `https://free-api.heweather.net/s6/weather/${weathertype}`,
data: {
location: that.data.location,
key: app.globalData.heweatherKey,
},
header: {
'content-type': 'application/json'
},
success(res) {
console.log(res.data)
}
})
},在控制臺(tái)就能看到請(qǐng)求到的res.data了。如果你想點(diǎn)擊按鈕切換不同城市以及不同的天氣數(shù)據(jù)類型，結(jié)合前面所學(xué)的知識(shí)，我們只需要通過(guò)事件處理函數(shù)調(diào)用setData修改weathertype和location即可。
encodeURI與decodeURI
在瀏覽網(wǎng)頁(yè)的時(shí)候我們經(jīng)?？吹綕h字或一些字符變成了一個(gè)“亂碼”，原因就在于鏈接進(jìn)行了編碼處理。encodeURI() 函數(shù)可把字符串作為 URI 進(jìn)行編碼，而decodeURI()函數(shù)則可以進(jìn)行解碼。
在開(kāi)發(fā)者工具的控制臺(tái)里輸入以下代碼
console.log(encodeURI("北京"))
console.log(decodeURI("%e9%85%92%e5%ba%97"))
console.log(decodeURI("https://hackwork.org/handbook/python/174/%e5%86%99%e5%87%ba%e7%ac%ac%e4%b8%80%e8%a1%8cpython%e4%bb%a3%e7%a0%81/"))騰訊地圖LBS
如果想在小程序中調(diào)用地圖的 POI 檢索（POI，即興趣點(diǎn) Point of Interest，區(qū)域內(nèi)搜索酒店、學(xué)校、ATM 等）、 關(guān)鍵詞輸入提示、地址解析、逆地址解析、行政區(qū)劃、距離計(jì)算、路徑規(guī)劃等數(shù)據(jù)服務(wù)，這時(shí)候就需要使用到地圖類相關(guān)的 API。
地圖API：騰訊LBS位置服務(wù)
注冊(cè)賬號(hào)獲取Key
首先在注冊(cè)后登錄，點(diǎn)擊控制臺(tái) —key 管理—?jiǎng)?chuàng)建新密鑰，然后取得 key，key 的格式類似于“43UBZ-----HTBIA”。
然后點(diǎn)擊當(dāng)前 Key 的設(shè)置，啟動(dòng)產(chǎn)品里勾選微信小程序和 WebServiceAPI 里的簽名校驗(yàn)，獲取到地圖的 Secret key。這兩種 API 的調(diào)用方式，小程序都支持。
然后將地圖的兩個(gè) key，寫(xiě)入到globalData里
globalData: {
mapKey:"43UBZ-*****-IITUH-*****-2M723-******",//你的key
mapSecretKey:"spZwWz**********Xh20uW", //你的Secret key
}md5加密算法
在WebServiceAPI Key配置 中簽名校驗(yàn)里提到我們使用WebServiceAPI的方法需要對(duì)請(qǐng)求路徑+”?”+請(qǐng)求參數(shù)+SK進(jìn)行拼接，并計(jì)算拼接后字符串md5值，即為簽名(sig)。 MD5是計(jì)算機(jī)安全領(lǐng)域廣泛使用到的一種加密算法，主要用于確保消息傳輸?shù)耐暾恢隆?/p>
md5依賴：md5開(kāi)源項(xiàng)目下載鏈接
解壓之后，將 js 文件夾里的md5.min.js復(fù)制粘貼到小程序 utils 文件夾下。然后再在Page()前面引入這個(gè)文件
const md5 = require('../../utils/md5.min.js')坐標(biāo)逆解析
坐標(biāo)的逆解析就是坐標(biāo)(latitude,longitude)轉(zhuǎn)化為詳細(xì)的地址名。
技術(shù)文檔：坐標(biāo)的逆地址解析
再在apidata.js Page()的 data 里初始化聲明latitude,longitude，比如我們用騰訊大廈的經(jīng)緯度值：
data: {
latitude:"22.540503",
longitude: "113.934528",
},然后在 onLoad 函數(shù)里調(diào)用 wx.request 發(fā)起 HTTPS 網(wǎng)絡(luò)請(qǐng)求
onLoad: function (options) {
let that=this
const { latitude, longitude } = that.data
const { mapKey, mapSecretKey}=app.globalData
let SIG = md5("/ws/geocoder/v1?key=" + mapKey + "&location=" + latitude + "," + longitude + mapSecretKey)
wx.request({
url: 'https://apis.map.qq.com/ws/geocoder/v1',
data: {
key: mapKey,
location: `${latitude},${longitude}`,
sig: SIG
},
header: {
'content-type': 'application/json'
},
success(res) {
console.log(res.data)
}
})
},在控制臺(tái) Console 就可以看到當(dāng)前坐標(biāo)(latitude,longitude)逆解析出來(lái)的詳細(xì)信息。
小程序使用騰訊地圖位置服務(wù)，還有一種更加簡(jiǎn)單的方法，具體可以閱讀《微信小程序：個(gè)性地圖使用指南》
文章題目：創(chuàng)新互聯(lián)小程序云教程：云開(kāi)發(fā)網(wǎng)絡(luò)API
分享路徑：http://fisionsoft.com.cn/article/dphjhes.html
