UniApp實戰：動態數據（請求封裝、獲取定位等）

經過本章節你能學到那些？

一、Uni-App API調用（網絡請求、獲取位置等） 二、獲取高德開放平臺API - 天氣查詢 三、Uni-App 引用npm第三方庫 四、Uni-App + Vuex 數據持久化

下面咱們來具體看看

Uni-App API調用（網絡請求、獲取位置等）

1、uni.request封裝成Promise

uni.request(OBJECT)

OBJECT對象描述：

一、根目錄下新建 commons/http.js 文件

二、封裝uni.request()

有人確定會問，人家uni.request()已經挺好的了，爲何非的在封裝一次了？

其實上圖代碼已經給你答案了：能夠全局處理全部的請求。

好比： 一、全部請求都添加了 uni.showLoading(), 請求都會有loading，請求完成關閉。固然你能夠經過options參數來控制某個請求不須要loadin；

二、能夠給全部請求添加請求頭，好比須要驗證權限的接口；

三、錯誤集中處理，判斷錯誤碼，處理全部請求錯誤，如token過時，都會去登陸頁面等。

2、獲取當前位置 獲取當前的地理位置、速度。 在微信小程序中，當用戶離開應用後，此接口沒法調用；當用戶點擊「顯示在聊天頂部」時，此接口可繼續調用。

uni.getLocation(OBJECT)

OBJECT對象描述：

uni.getLocation({
  // 默認爲 wgs84 返回 gps 座標，
  // gcj02 返回國測局座標，可用於 uni.openLocation 的座標
  type: 'wgs84',
  geocode: true,
  success: (data) => {
    if (data.address){
      this.location = data;
    }
  },
  fail: (err) => {
    console.log(err)
    // this.$api.msg('獲取定位失敗');
  }
})
複製代碼

頁面使用location渲染：

<view class="fs-32">{{location.address.city}}</view>
<view class="fs-16">{{location.address.district}}</view>
複製代碼

若是你用HBuilderX自動瀏覽器是能夠獲取到經緯度的，可是也是沒有城市等數據的，只有APP纔有。

小程序若是獲取經緯度還須要添加配置，修改根目錄下的manifest.json文件

注意 一、H5：在較新的手機瀏覽器上，H5 端獲取定位信息，要求部署在 https 服務上，本地預覽（localhost）仍然可使用 http 協議。

二、H5：無 GPS 模塊的 PC 設備使用 Chrome 瀏覽器的時候，位置信息是鏈接谷歌服務器獲取的，國內用戶可能獲取位置信息失敗。

三、H5：微信公衆號可以使用微信js sdk，詳見

四、App：Android因爲谷歌服務被牆，想在國產手機上正常定位，須要向高德等三方服務商申請SDK資質，獲取AppKey。雲打包時須要在manifest的SDK配置中填寫Appkey。在manifest可視化界面有詳細申請指南。離線打包自行在原生工程中配置。

五、App：<map> 組件默認爲國測局座標gcj02，調用 uni.getLocation 返回結果傳遞給 <map> 組件時，需指定 type 爲 gcj02。

六、App：持續定位方案：iOS端能夠申請持續定位權限，參考。Android若是進程被殺，代碼沒法執行。可使用unipush，經過服務器激活App，執行透傳消息，讓App啓動而後採集位置。Android上，即便本身寫原生插件作後臺進程，也很容易被殺，unipush是更合適的方案 七、小程序：api默認不返回詳細地址中文描述。須要中文地址有2種方式：一、使用高德地圖小程序sdk，在app和微信上均可以得到中文地址，參考。二、只考慮app，使用plus.geolocation也能夠獲取中文地址

獲取高德開放平臺API - 天氣查詢

有小夥伴確定會問，爲何選擇高德天氣查詢API？我想說每一個人都有本身的選擇，根據本身的喜愛，第一印象就能夠了。沒有那麼多爲何！

如何才能使用高德天氣查詢API呢？

第一步，申請」web服務 API」密鑰（Key）；

第二步，拼接HTTP請求URL，第一步申請的Key需做爲必填參數一同發送；

第三步，接收HTTP請求返回的數據（JSON或XML格式），解析數據。

假設咱們已經獲取到了Key，咱們就可使用咱們封裝好的http.js，來調用天氣查詢接口。

http({
  methods: 'get',
  url: '//restapi.amap.com/v3/weather/weatherInfo',
  data: {
    // 申請web服務API類型KEY
    key: 'd99xxxe00xxb69xxxec61xx96xxf5',
    // 城市的adcode
    // (高德提供一份很是完整的城市列表)
    city: '440300',
    // 可選值：base/all
    // base:返回實況天氣
    // all:返回預報天氣
    extensions: 'base',
    // 可選值：JSON,XML
    output: 'json'
  }
}).then((data) =>{
  console.log(data)
}, (err) => {
  console.log(err)
})
複製代碼

實況天氣響應結果：

預報天氣（最近7每天氣預報）響應結果：

注意 小程序須要添加request合法域名，將高德api域名加入其中，小程序請求才能成功獲取天氣數據。

Uni-App 引用npm第三方庫

Uni-App 的目錄結構，不是src、dist並列方式。HBuilderX裏的uni-app，根目錄是至關於src，dist並放到了unpackage目錄下。

src目錄下是不能直接 npm install 引入第三方庫的。可是你能夠在別處install，而後把相關文件copy到src下。

本文以 moment 爲例講解 Uni-App 如何引用 npm 第三方庫。步驟以下：

一、在一個空的文件夾下（固然分空也沒有關係）;

二、打開命令行工具，執行 npm install moment;

npm install moment
複製代碼

三、進入 node_modules 目錄，裏面的 moment 就是咱們須要的第三方庫；

四、copy moment 到咱們 Uni-App 項目根目錄；

五、引入模塊（在須要使用moment的地方引入）

import moment from 'moment'
複製代碼

六、測試

console.log(moment().format('YYYY-MM-DD'))
// 2019-08-23
複製代碼

Uni-App + Vuex 數據持久化

整合前3個知識點，咱們將天氣數據作持久化處理。

爲何要持久化了？

你們應該都知道，每一個天氣API提供商，提供的api調用接口都是有次數限制的，有的是天天1000，有的是天天5000等，超過都是會被停用。只有付費纔沒有限制，因此這裏就作持久化處理。

邏輯以下： 一、判斷本地有沒有存儲天氣數據，沒有直接調用接口，並將數據結構儲存，並且添加過時時間；

二、有數據，判斷數據是否過時，沒有過時，直接使用，過時則從新調用接口，重置緩存數據。

Uni-App 是內置 Vuex 的，能夠直接使用。

沒有了解過Vuex的小夥伴請點擊： Vuex是什麼？Vuex能作什麼？Vuex怎麼使用？

沒有用過Vuex持久化的小夥伴請點擊： Vuex+localStorage數據狀態持久化

OK，按上面的邏輯思路，按步驟實現： 一、根目錄新建store/index.js，main.js引入

...
import store from './store'

Vue.prototype.$store = store;
...
複製代碼

二、編輯store/index.js

weatherData 方法的做用很重要，實現了主要邏輯。setWeather將天氣輸出儲存並天氣過時時間

三、vue頁面使用天氣數據和調用接口

...
computed: {
  ...mapState([
    'weatherData',
  ]),
  timeWeather(){
    if (this.weatherData.lives && this.weatherData.lives.length) {
      return this.weatherData.lives[0]
    }
    return ''
  }
},
onLoad() {
  this.getWeather();
},
methods: {
  getWeather() {
    // 判斷store裏面有沒有weatherData
    if (!this.weatherData) {
      this.$store.dispatch('getWeather')
    }
  }
}
...
複製代碼

最終頁面渲染，使用timeWeather：

<view class="fs-32">{{timeWeather.temperature}}°C</view>
<view class="fs-16">{{timeWeather.weather}} {{timeWeather.winddirection+'風'}}</view>
複製代碼

H5效果圖：

微信小程序效果圖：

IOS效果圖：

總結

今天你學到了什麼？用一句話回顧一下知識點：在Uni-App中，用Promise封裝uni.request()請求高德天氣api，用uni.getLocation()獲取位置信息。

下一章節，繼續融合獲取位置，和天氣查詢，根據位置查詢天氣。並使H5端/小程序也能夠獲取到位置。

最後，提示你們必定要重視「注意」小提示，不然會遇到一些奇怪不能成功等問題。

最後的最後，謝謝你們支持。

喜歡的能夠關注我哦!

原文地址：www.javanx.cn/20190826/un…