芯耀
1963
AWTK 串口屏內(nèi)置了 XML/JSON/INI 等各種數(shù)據(jù)文件的模型，并支持用 HTTP/HTTPS 從網(wǎng)絡(luò)獲取數(shù)據(jù)。不用編寫一行代碼，即可實(shí)現(xiàn)天氣預(yù)報(bào)、股票行情、航班查詢和快遞查詢等功能。
天氣預(yù)報(bào)是一個(gè)很常用的功能，在很多設(shè)備上都有這個(gè)功能。實(shí)現(xiàn)天氣預(yù)報(bào)的功能，不能說(shuō)很難但是也絕不簡(jiǎn)單，首先需要從網(wǎng)上獲取數(shù)據(jù)，再解析數(shù)據(jù)，最后更新到界面上。
在 AWTK 串口屏中，內(nèi)置了 XML/JSON/INI 等各種數(shù)據(jù)文件的模型，并支持用 HTTP/HTTPS 從網(wǎng)絡(luò)獲取數(shù)據(jù)。所以實(shí)現(xiàn)天氣預(yù)報(bào)非常簡(jiǎn)單，不用編寫一行代碼即可實(shí)現(xiàn)天氣預(yù)報(bào)的功能。而且用同樣的方式，也可以實(shí)現(xiàn)其它功能，比如：股票行情、新聞、公交查詢、火車查詢、航班查詢、快遞查詢等等。
這里以 http://t.weather.sojson.com 提供的接口為例，來(lái)實(shí)現(xiàn)一個(gè)顯示天氣信息的應(yīng)用程序。這個(gè)是免費(fèi)的，無(wú)需注冊(cè)的 API，當(dāng)然也有些限制，在實(shí)際工作中，你可以換成自己的接口。
它返回的數(shù)據(jù)是 JSON 格式的，如下所示：
{? ?"message": "success 感謝又拍云 (upyun.com) 提供 CDN 贊助",? ?"status": 200,? ?"date": "20240101",? ?"time": "2024-01-01 08:13:13",? ?"cityInfo": {? ? ? ?"city": "天津市",? ? ? ?"citykey": "101030100",? ? ? ?"parent": "天津",? ? ? ?"updateTime": "08:01"? ?},? ?"data": {? ? ? ?"shidu": "86%",? ? ? ?"pm25": 57.0,? ? ? ?"pm10": 93.0,? ? ? ?"quality": "良",? ? ? ?"wendu": "-7",? ? ? ?"ganmao": "極少數(shù)敏感人群應(yīng)減少戶外活動(dòng)",? ? ? ?"forecast": [。? ? ? ?],? ? ? ?"yesterday": {? ? ? ? ? ?"date": "31",? ? ? ? ? ?"high": "高溫 1℃",? ? ? ? ? ?"low": "低溫 -3℃",? ? ? ? ? ?"ymd": "2023-12-31",? ? ? ? ? ?"week": "星期日",? ? ? ? ? ?"sunrise": "07:30",? ? ? ? ? ?"sunset": "16:57",? ? ? ? ? ?"aqi": 35,? ? ? ? ? ?"fx": "北風(fēng)",? ? ? ? ? ?"fl": "2 級(jí)",? ? ? ? ? ?"type": "晴",? ? ? ? ? ?"notice": "愿你擁有比陽(yáng)光明媚的心情"? ? ? ?}? ?}}
AWTK 串口屏中的?json 模型，支持用下面的語(yǔ)法從網(wǎng)絡(luò)獲取數(shù)據(jù)，它會(huì)自動(dòng)解析 JSON 數(shù)據(jù)，并生成一個(gè)模型，通過路徑可以引用模型中的數(shù)據(jù)。
json(url=http://t.weather.sojson.com/api/weather/city/101030100)網(wǎng)上有很多天氣預(yù)報(bào)的接口，這里只是舉個(gè)例子，如果你有自己的接口，可以用自己的接口。
1. 功能
不用編寫代碼，實(shí)現(xiàn)天氣預(yù)報(bào)。
2. 創(chuàng)建項(xiàng)目
從模板創(chuàng)建項(xiàng)目，將 hmi/template_app 拷貝 hmi/weather 即可。
第一個(gè)項(xiàng)目最好不要放到其它目錄，因?yàn)榉诺狡渌夸浶枰薷呐渲梦募械穆窂?，等熟悉之后再考慮放到其它目錄。路徑中也不要中文和空格，避免不必要的麻煩。
3. 制作界面
用 AWStudio 打開上面 weather 目錄下的 project.json 文件。里面有一個(gè)空的窗口，做出類似下面的界面。
4. 添加綁定規(guī)則
4.1 城市
| 綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
| v-data:value | {cityInfo.city} | 不同的 JSON API 需要使用不同的路徑，請(qǐng)根據(jù)具體的 JSON 數(shù)據(jù)填寫 |
4.2 溫度
| 綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
| v-data:value | {data.wendu} | 不同的?JSON?API?需要使用不同的路徑，請(qǐng)根據(jù)具體的?JSON?數(shù)據(jù)填寫 |
4.3?濕度
| 綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
| v-data:value | {data.shidu} | 不同的?JSON?API?需要使用不同的路徑，請(qǐng)根據(jù)具體的?JSON?數(shù)據(jù)填寫 |
4.4?PM2.5
| 綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
| v-data:value | {data.pm25} | 不同的?JSON?API?需要使用不同的路徑，請(qǐng)根據(jù)具體的?JSON?數(shù)據(jù)填寫 |
4.5?空氣質(zhì)量
| 綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
| v-data:value | {data.quality} | 不同的?JSON?API?需要使用不同的路徑，請(qǐng)根據(jù)具體的?JSON?數(shù)據(jù)填寫 |
4.6?感冒指數(shù)
| 綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
| v-data:value | {data.ganmao} | 不同的?JSON?API?需要使用不同的路徑，請(qǐng)根據(jù)具體的?JSON?數(shù)據(jù)填寫 |
4.7 刷新按鈕
- 將?刷新?按鈕的?點(diǎn)擊?事件綁定到reload命令。添加自定義的屬性v-on:click，將值設(shè)置為?{reload}。
| 綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
| v-on:click | {reload} | reload 命令是內(nèi)置的命令，用于重新加載持久化的配置，命令要用英文大括號(hào)括起來(lái)。 |
4.8 窗口模型
指定窗口的模型為 json, url 為：http://t.weather.sojson.com/api/weather/city/101030100
| 綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
| v-model | json(url=http://t.weather.sojson.com/api/weather/city/101030100) | 不同的 JSON API 需要使用不同的 URL，可以換成自己的 URL |
5. 初始化數(shù)據(jù)
無(wú)
6. 描述需要持久化的數(shù)據(jù)
無(wú)
7. 編譯運(yùn)行
運(yùn)行 bin 目錄下的 demo 程序：
點(diǎn)擊?刷新?按鈕，可以重新加載數(shù)據(jù)，但是通常界面沒有變化，因?yàn)樘鞖鈹?shù)據(jù)沒有變化。
8. 注意
- 本項(xiàng)目并沒有編寫界面相關(guān)的代碼，AWStudio 在 src/pages 目錄下生成了一些代碼框架，這些代碼并沒有用到，可以刪除也可以不用管它，但是不能加入編譯。完整示例請(qǐng)參考：demo_weather。
下載ECAD模型
