【原】微信小程序顯示天氣預(yù)報(bào)

算法與編程之美 2021-11-30

展開全文

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的請求示例；使用的是url:’’（請求示例）和key:’’（密鑰）；注意，要使用的請求示例只是api接口中的一部分。加入請求示例后要輸入個(gè)人申請的qpi的密鑰，密鑰是每一個(gè)申請的用戶都有的獨(dú)一的一份密鑰，在此之前就需要去注冊一份個(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

<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）