微信小程序实现：输入城市名点击按钮查询该城市的天气

<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在页面上展示。

ps：接口来源
https://www.juhe.cn/docs/api/id/73