在HarmonyOS中實現天氣服務功能
作者：木棉花小藍
在本案例中，實現天氣服務的功能需要聚合數據平臺提供的天氣預報云服務。開發者需要在聚合數據平臺注冊和登錄賬號，然后申請天氣預報的API，并通過實名認證獲取自己的Key。通過Key，我們就可以通過http數據請求的方式調用天氣預報的API，而官方會為每名開發者提供50次的每日免費調用次數。
介紹
本案例通過調用云端的天氣服務API，在HarmonyOS中實現天氣服務功能。開發者們可根據不同業務場景，在本案例的基礎上集成自己的天氣服務管理者模塊。
開發環境要求
● DevEco Studio版本：DevEco Studio 3.1 Release
● HarmonyOS SDK版本：API version 9
工程要求
- API9
- Stage模型
正文
前置條件
在本案例中，實現天氣服務的功能需要聚合數據平臺提供的天氣預報云服務。開發者需要在聚合數據平臺注冊和登錄賬號，然后申請天氣預報的API，并通過實名認證獲取自己的Key。通過Key，我們就可以通過http數據請求的方式調用天氣預報的API，而官方會為每名開發者提供50次的每日免費調用次數。
代碼結構
entry/src/main
├─ module.json5 //模塊的配置文件
├─ resources //資源文件集
└─ ets
├─ XL_Modules
│ └─ XL_WeatherServiceManager.ts //天氣服務管理者ts模塊
├─ pages
│ └─ Index.ets //主頁面
└─ entryability
└─ EntryAbility.ts //UIAbility類關鍵代碼
XL_WeatherServiceManager.ts：
//導入http模塊
import http from '@ohos.net.http'
//定義日志標簽
const TAG1 = '------[XL_WeatherServiceManager inquire] '
//提供云服務接口的網址片段
const Weather_Url_Part:string = "http://apis.juhe.cn/simpleWeather/query?key="
//開發者在聚合數據的請求Key（需要自行填入）
const key:string = ......
//聲明一個專用于記錄天氣信息的數據類型
declare type RealTime_Weather_Result = {
//實時數據
realtime: any,
//今日整體數據
today:any,
//是否成功拉取
isFinished: boolean
}
/*
異步函數: 獲取對應城市的天氣數據
*/
async function Pull_Weather_Data(cityName: string, Tag: string):Promise<RealTime_Weather_Result>{
//預定義輸出
var output = {
realtime: null,
today: null,
isFinished: false
}
//實例化一個http請求任務類
let httpRequest = http.createHttp();
//拼接url，以供訪問服務器
let URL = Weather_Url_Part+key+'&city='+cityName
//調用異步方法request
await httpRequest.request(
URL,
{
//設置請求方法的類型
method: http.RequestMethod.GET,
}).then((data) => {
//提取http響應的關鍵內容
let Weather_Info = JSON.parse(data.result.toString())
//當關鍵內容中所攜帶的錯誤碼為0時，表示成功拉取了天氣數據
if(Weather_Info?.error_code == 0){
console.info(TAG1+'Succeed! Obtain the weather data')
//在日志欄打印天氣信息
console.info(TAG1+JSON.stringify(Weather_Info?.result?.realtime))
console.info(TAG1+JSON.stringify(Weather_Info?.result?.future[0]))
//存取天氣信息
output.realtime = Weather_Info?.result?.realtime
output.today = Weather_Info?.result?.future[0]
output.isFinished = true
}else{
console.error(Tag+Weather_Info?.reason)
}
}).catch(err => console.error(Tag + 'Http request failed, err: ' + `${err}`))
//銷毀http任務類
httpRequest.destroy()
//輸出
return output
}
//默認導出的靜態型模塊類
class XL_WeatherServiceManager {
//查詢某城市天氣的方法
public static async inquire(cityName: string):Promise<RealTime_Weather_Result>{
return await Pull_Weather_Data(cityName, TAG1)
}
/*
* 敬請期待
*/
}
export default XL_WeatherServiceManager在XL_WeatherServiceManager.ts中，我們通過http請求的方式，獲取并解析服務器所回饋的天氣預報信息。值得一提的是，我們創建了類XL_WeatherServiceManager，此類有個靜態公共方法inquire調用了拉取天氣信息的異步函數，并且XL_WeatherServiceManager是默認導出的。因此，我們可以在頁面中導入XL_WeatherServiceManager，并通過執行require方法調用獲取天氣信息的功能。
import XL_WeatherServiceManager from 'ets/XL_Modules/XL_WeatherServiceManager'
......
let result = await XL_WeatherServiceManager.inquire('北京')
......在頁面中調用
Index.ets（偽代碼）：
//導入自定義的天氣服務管理模塊
import XL_WeatherServiceManager from 'ets/XL_Modules/XL_WeatherServiceManager'
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
@State cityName:string = ''
@State currentTemperature:string = ''
@State currentWeather:string = ''
@State todayTemperature:string = ''
@State translateY:number = 700
build() {
......
Search({
placeholder: '請輸入城市名'
})
//添加回調函數
.onSubmit((cityName:string)=>{
this.Search(cityName)
})
......
......
}
//自定義異步方法
async Search(cityName:string){
//通過天氣服務管理者調用inquire方法，并傳入城市名參數
let res = await XL_WeatherServiceManager.inquire(cityName)
if(res.isFinished){
//根據需求讀取信息
this.currentTemperature = res.realtime.temperature
this.currentWeather = res.realtime.info
this.todayTemperature = res.today.temperature
this.cityName = cityName
this.translateY = 0
}
}
}責任編輯：jianghua
來源：
51CTO 開源基礎軟件社區
