云開(kāi)發(fā) 網(wǎng)絡(luò) API

2020-10-29 18:02 更新

數(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ù)和文件。

數(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 框架哦）

<view class="page__bd">
    <view class="weui-panel weui-panel_access">
        <view class="weui-panel__bd" wx:for="{{stories}}" wx:for-item="stories" wx:key="*item">
            <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
                <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
                    <image class="weui-media-box__thumb" mode="widthFix" src="{{stories.images[0]}}" sytle="height:auto"></image>
                </view>
                <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
                    <view class="weui-media-box__title">{{stories.title}}</view>
                </view>
            </navigator>
        </view>
    </view>
</view>

然后再在 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 里輸入以下代碼:

<view class="page__bd">
    <view class="weui-article">
        <view class="weui-article__h1">{{title}}</view>
        <view class="weui-article__section">
            <view class="weui-article__section">
                <view class="weui-article__p">
                    <image class="weui-article__img" src="{{image}}" mode="widthFix" style="width:100%" />
                 </view>
                 <view class="weui-article__p">                      
                      {{body}}                
                </view>
                <view class="weui-article__p">
                        知乎鏈接：{{share_url}}
                </view>
            </view> 
        </view>     
    </view>   
</view>

然后再在 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}}替換成以下代碼。

<rich-text nodes="{{body}}"></rich-text>
小程序富文本解析的方案還有：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)的key

key的存放

通常我們會(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è)性地圖使用指南》

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)