<!--wxml-->
<input type="text" style="border:1px solid green;height:30px;margin-top:5px;" placeholder="请输入城市名" bindinput="inputCity"/>
<button type="primary" bindtap="getWeather" style="margin-top:10px" >提交</button>
<view wx:for="{{weather}}">
{{item}}
</view>
//js
Page({
data: {
cityName:'',
weather:{}
},
//检测输入框的输入
inputCity(e){
this.data.cityName = e.detail.value //获取输入框中输入的城市名,存放到cityName里
},
//获取天气
getWeather(){
var city = encodeURI(this.data.cityName)//将城市名转码(接口要求的)
wx.request({
url: 'http://apis.juhe.cn/simpleWeather/query?city='+city+'&key=xxxxxxxxxxxxxxxxxxx',
success:(res)=>{
this.setData({
weather:res.data.result.realtime//获取到的值交给wether存储
})
}
})
}
})
【运行结果】
输入城市名:
ps:通过接口,能拿到很多数据,上面的例子,只是选择性的拿了realtime在页面上展示。