登录百度账号，打开该网址http://lbsyun.baidu.com/apiconsole/key。

开始申请key。

点击"创建应用"，进入创建AK页面，输入应用名称，将应用类型改为：“Android SDK”：

配置应用

在应用类型选为“Android SDK”后，需要配置应用的安全码，如下图所示：

获取安全码

安全码的组成规则为：Android签名证书的sha1值+packagename例如：

SHA1：BB:0D:AC:74:D3:21:E1:43:67:71:9B:62:91:AF:A1:66:6E:44:5D:75

包名：com.baidumap.demo

Android签名证书的sha1值获取方式有两种：

第一种方法：使用keytool

第1步：运行进入控制台

第2步：定位到.android文件夹下，输入cd .android

第3步：输入keytool -list -v -keystore debug.keystore，会得到三种指纹证书，选取SHA1类型的证书（密钥口令是android），例如：

其中keytool为jdk自带工具；keystorefile为Android 签名证书文件

第二种方法：在adt 22中直接查看

如果使用adt 22，可以在eclipse中直接查看：windows -> preferance -> android -> build。 如下图示：

其中“SHA1 fingerprint”值即为Android签名证书的sha1值

获取包名

包名是Android应用程序本身在AndroidManifest.xml 中定义的名称，例如：

成功创建KEY

在输入安全码后，点击“确定”完成应用的配置工作，您将会得到一个创建的Key，请妥善保管您所申请的Key。到这您就可以使用新Key来完成您的开发工作了。

简介：天气预报查询实时的天气状况，和实时温度，在input输入框中输入城市名称，点击搜索即可显示。

wx.request发起https网络请求。默认超时时间和最大时间都是60s，超时时间可在app.json中设置。一个微信小程序同时只能有五个网络请求连接。
我先一步一步写一下，写完后在最下面系统的帖一下所有代码。当然一步按步骤写也能写出来，但是没有样式而已

1.动态获取输入的城市名

在wxml中编写：
为input输入框绑定bindKeyInput()函数

<input placeholder="输入城市名进行搜索" bindinput="bindKeyInput"></input>
    <view class="icon">
      <icon type="search" size="25" bindtap="search" />
    </view>

在js文件中编写代码，在Page()函数外声明一些变量，用于保存获取到的值，

var defaultcity, getweather, gettemp, getwind, getpic, getdate

然后编写input的bindKeyInput()事件处理函数

bindKeyInput:function(e){
   defaultcity = e.detail.value
  },

2.请求天气接口数据

点击搜索图标时，发起网络请求，调用获取天气API：

search: function(e) {
    var that = this 
    wx.request({
      url: 'https://api.map.baidu.com/telematics/v3/weather?output=json&ak=这里写自己申请的百度ak&location=' + defaultcity,
      success: res => {
        console.log(res.data)
        if (!res.data.results) {
          console.log('获取天气接口失败')
          return
        }
        getweather = res.data.results[0].weather_data[0].weather
        gettemp = res.data.results[0].weather_data[0].temperature
        getwind = res.data.results[0].weather_data[0].wind
        getpic = res.data.results[0].weather_data[0].dayPictureUrl
        getdate = res.data.results[0].weather_data[0].date
        this.setData({
          city: defaultcity,
          weather: getweather,
          temp: gettemp,
          wind: getwind,
          pic: getpic,
          date: getdate
        })
        wx.hideLoading()
      }
    })
  },

4.渲染界面展示数据

wxml代码：

<view class="body">
    <view class="city">
      <text>{{city}}</text>
    </view>
    <view class="today">
      <text>{{date}}</text>
    </view>
    <view>
      <image src="{{pic}}" mode="aspectFit" style="width: 400rpx; height: 400rpx" />
    </view>
  </view>
  <!-- bottom部分 -->
  <view class="bottom">
    <view class="weather">
      <text>{{weather}}</text>
    </view>
    <view class="right">
      <view class="temp">
        <text>{{temp}}</text>
      </view>
      <view class="wind">
        <text>{{wind}}</text>
      </view>
    </view>
  </view>

5.整体的代码

wxml代码：

<view class="page">
  <!-- top部分 -->
  <view class="top">
    <input placeholder="输入城市名进行搜索" bindinput="bindKeyInput"></input>
    <view class="icon">
      <icon type="search" size="25" bindtap="search" />
    </view>
  </view>
  <!-- body部分 -->
  <view class="body">
    <view class="city">
      <text>{{city}}</text>
    </view>
    <view class="today">
      <text>{{date}}</text>
    </view>
    <view>
      <image src="{{pic}}" mode="aspectFit" style="width: 400rpx; height: 400rpx" />
    </view>
  </view>
  <!-- bottom部分 -->
  <view class="bottom">
    <view class="weather">
      <text>{{weather}}</text>
    </view>
    <view class="right">
      <view class="temp">
        <text>{{temp}}</text>
      </view>
      <view class="wind">
        <text>{{wind}}</text>
      </view>
    </view>
  </view>
</view>

js代码：

var defaultcity, getweather, gettemp, getwind, getpic, getdate
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
   //动态获取input输入值，城市名称
  bindKeyInput:function(e){
   defaultcity = e.detail.value
  },
  //搜索城市
  search: function(e) {
    this.weather()
  },
  weather: function() {
    wx.showLoading({
      title: '加载中',
    })
    wx.request({
      url: 'https://api.map.baidu.com/telematics/v3/weather?output=json&ak=自己的ak&location=' + defaultcity,
      success: res => {
        console.log(res.data)
        if (!res.data.results) {
          console.log('获取天气接口失败')
          return
        }
        getweather = res.data.results[0].weather_data[0].weather
        gettemp = res.data.results[0].weather_data[0].temperature
        getwind = res.data.results[0].weather_data[0].wind
        getpic = res.data.results[0].weather_data[0].dayPictureUrl
        getdate = res.data.results[0].weather_data[0].date
        this.setData({
          city: defaultcity,
          weather: getweather,
          temp: gettemp,
          wind: getwind,
          pic: getpic,
          date: getdate
        })
        wx.hideLoading()
      }
    })
  },
  })

css代码：

page {
  background-color: #5a9cd8;
  color: #fff;
}

.page {
  margin: 50rpx;/* 与最上方有间隙 */
}

.top {
  display: flex;
  padding: 20rpx;
  flex-direction: row;
  background-color: #efefef;
  position: relative;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
}

.input {
  width: 80%;
  font-size: 32rpx;
}

.icon {
  width: 10%;
  position: absolute;
  right: 0;
  bottom: 5rpx;
}

.body {
  text-align: center;
  display: flex;
  flex-direction: column; /*竖直显示 */
}

.city {
  font-size: 80rpx;
}

.today {
  font-size: 34rpx;
}

.bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
}

.weather {
  font-size: 38rpx;
  width: 50%;
}

.right {
  display: flex;
  flex-direction: column;
}

.wind {
  font-size: 40rpx;
}

.temp {
  font-size: 40rpx;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

input {
  color: #333;
}

运行图片：

下面写一下百度APIkey的申请步骤，避免踩坑。

百度ak申请地址：http://lbsyun.baidu.com/apiconsole/key

打开后登陆网站，
创建应用，

应用名称一定要和自己的程序应用名字一样。
应用类型选择微信小程序。
appid写自己小程序的APPID，但是我在写这里的时候遇到了一点小麻烦，输入自己的appid之后，一直显示格式错误，不得以之下选择了填上他给的默认值touristappid，然后提交之后如下图

然后点击设置进去可以进行修改，然后把appid改成自己的appid，
这样就可以可了。

然后在程序中填写就OK了。