1問題描述
使用小程序使用天氣api顯示天氣。
2算法描述
首先打開微信開發(fā)者工具創(chuàng)建一個(gè)新的小程序項(xiàng)目，但是可以不選擇任何模板，進(jìn)入新建的小程序，先將index中的js,wxml,wxss中的原有格式刪除，保留空白頁面。首先在index.js中重新建立page，加入data數(shù)據(jù)，先是獲取城市id，然后再獲取數(shù)據(jù)，以及獲取結(jié)果，在獲取的結(jié)果中輸入要使用的api的請(qǐng)求示例；使用的是url:’’（請(qǐng)求示例）和key:’’（密鑰）；注意，要使用的請(qǐng)求示例只是api接口中的一部分。加入請(qǐng)求示例后要輸入個(gè)人申請(qǐng)的qpi的密鑰，密鑰是每一個(gè)申請(qǐng)的用戶都有的獨(dú)一的一份密鑰，在此之前就需要去注冊(cè)一份個(gè)人api用戶；然后就是獲取成功后的語句，再次設(shè)定結(jié)果就可以多次獲取想要的城市的天氣預(yù)報(bào)了。
在index.js中設(shè)定好了如何獲取api的數(shù)據(jù)后就是要設(shè)計(jì)前端界面了，還是在view標(biāo)簽中寫，開始的輸入城市欄：<input placeholder="輸入城市" name="cityid" bindblur="getCityId">,然后根據(jù)index.js中設(shè)定的未來天氣（future）和當(dāng)前天氣（today）獲取溫度等信息。
獲取的數(shù)據(jù)：
小程序頁面：
3 代碼：
代碼清單：index.wxml
| <!--index.wxml--> <view class="container"> <view class="search"> <input placeholder="輸入城市" name="cityid" bindblur="getCityId"> </input> </view> <view class="results"> <view class="sk"> <view class="city">{{id.id}}</view> <view class="temp">溫度：{{today.temperature}}</view> <view class="power">風(fēng)力：{{today.power}}</view> <view class="info">天氣：{{today.info}}</view> <view class="direct">風(fēng)向：{{today.direct}}</view> </view> </view> </view> |
代碼清單：index.wxss
| /**index.wxss**/ .search{ width: 100%; height: 100rpx; background-color: aqua; padding: 15rpx 0; box-sizing: border-box; } .search input{ display:block; width: 90%; height: 70rpx; background-color: white; margin: auto; border-radius: 35rpx; text-align: center; } |
代碼清單：index.json
稿件來源：深度學(xué)習(xí)與文旅應(yīng)用實(shí)驗(yàn)室（DLETA）
聯(lián)系客服
