簡易的天氣微信小程序設計

天氣微信小程序用來顯示天氣的溫度、最低溫度、最高溫度及天氣情況,下面通過數據綁定的方式來顯示天氣情況。

1、創建一個無AppID的weather項目,如圖所示。

簡易的天氣微信小程序設計

2、進入index.wxml、index.js、index.wxss文件,清空所有內容,進入APP.json,修改導航欄標題為“中國天氣網”。

3、進入index.wxml,進行當天天氣情況的界面佈局,包括溫度、最低溫、最高溫、天氣情況、城市、星期、風行情況,代碼如下。

簡易的天氣微信小程序設計

4、進入index.js,在data裡提供天氣的數據,讓這些數據在界面裡顯示出來,代碼如下。

簡易的天氣微信小程序設計

5、進入index.wxml,將data裡提供的天氣數據綁定到頁面裡,代碼如下。

簡易的天氣微信小程序設計

界面效果如圖所示。

簡易的天氣微信小程序設計

6、進入index.wxss,將index.wxml添加樣式,美化頁面,代碼如下。

簡易的天氣微信小程序設計

添加樣式後的界面效果如圖所示。

簡易的天氣微信小程序設計

將js裡的data通過數據綁定的方式就可以在wxml裡通過雙大括號的方式將數據值顯示出來,動態地加載數據,以實現數據綁定的動態效果。

相關推薦

推薦中...