动手开发一个名为“微天气”的微信小程序（上）

引言：在智能手机软件的装机量中，天气预报类的APP排在比較靠前的位置。说明用户对天气的关注度非常高。由于人们不管是工作还是度假旅游等各种活动都须要依据自然天气来安排。跟着本文开发一个“微天气”小程序，方便微信网友随时查看天气。

接下来两天小编将同您一起开发一个“微天气”小程序，本文首先向大家介绍“微天气”的API与界面代码编写。

本文选自《从零開始学微信小程序开发》。

　　在一套软件系统中，微信小程序一般是作为前端来使用的，一般还须要有后端的系统提供支持。这就须要开发人员（或运营者）购买云server（或有自己的独立主机），将后端系统部署其上。对于非常多刚開始学习的人来说。这些条件不easy达到。但我们能够选择使用在线免费API接口，开发人员仅仅须要编写好前端系统（微信小程序），在前端系统中直接调用这些免费API就可以获得对应的数据。

1 天气预报API

　　要开发天气预报类APP。首先要考虑的问题就是天气预报数据的来源。有了天气预报的数据来源。才干按须要在微信小程序中显示出来。事实上。微信小程序就是一个显示天气信息的前端系统。而天气预报API就是后端系统。

因为天气预报API能够在网上免费获取，因此。本案例中开发人员不须要开发后端系统，仅仅须要依据API的要求进行訪问就可以。

中华万年历的天气预报接口

　　中华万年历的天气预报接口地址例如以下：

　　http://wthrcdn.etouch.cn/weather_mini?city=北京

　　该接口非常easy，仅仅须要给出城市的名称就可以。接口返回的数据也是JSON格式，详细形式例如以下所看到的：

{
    "desc": "OK",
    "status": 1000,
    "data": {
        "wendu": "15",
    "ganmao": "昼夜温差较大，较易发生感冒。请适当增减衣服。

体质较弱的朋友请注意防护。",
        "forecast": [{
            "fengxiang": "北风",
            "fengli": "3-4级",
            "high": "高温 14℃",
            "type": "晴",
            "low": "低温 3℃",
            "date": "19日星期六"
        },
        {
            "fengxiang": "无持续风向",
            "fengli": "微风级",
            "high": "高温 4℃",
            "type": "雨夹雪",
            "low": "低温 -1℃",
            "date": "20日星期天"
        },
        {
            "fengxiang": "北风",
            "fengli": "3-4级",
            "high": "高温 0℃",
            "type": "小雪",
            "low": "低温 -7℃",
            "date": "21日星期一"
        },
        {
            "fengxiang": "北风",
            "fengli": "3-4级",
            "high": "高温 -3℃",
            "type": "晴",
            "low": "低温 -9℃",
            "date": "22日星期二"
        },
        {
            "fengxiang": "无持续风向",
            "fengli": "微风级",
            "high": "高温 -3℃",
            "type": "多云",
            "low": "低温 -10℃",
            "date": "23日星期三"
        }],
        "yesterday": {
            "fl": "微风",
            "fx": "无持续风向",
            "high": "高温 10℃",
            "type": "霾",
            "low": "低温 6℃",
            "date": "18日星期五"
        },
        "aqi": "40",
        "city": "北京"
    }
}

　　能够看出。以上返回的JSON数据非常多，有当天的温度wendu、感冒描写叙述ganmao，还有forecast数组中保存的近期5天的天气数据，以及yesterday中保存的昨日天气数据。

2 界面设计

　　本案例要求界面简单，尽量在一个页面中显示当前天气、近期五天的天气，同一时候，还要提供按城市名称查询的功能，可显示出所查询城市的天气预报信息。

UI设计例如以下。

　　　　　　　　　　　　　　　　　　

　　在图中。上方显示所查询城市的名称。右側显示当前日期。

接着以较大字号显示查询城市的温度和感冒描写叙述。下方排着5个小卡片显示近期5天的天气信息，最下方接收用户输入要查询的城市名称，单击“查询”button就可以查询指定城市的天气预报信息。

　　当刚打开该小程序时。因为用户还没有输入查询城市名称。须要设置一个默认城市名称，以方便显示初始的天气预报信息。

3 编写界面代码

　　选择好使用的API并设计好UI界面的布局之后，就能够创建微信小程序项目。并编写界面代码和逻辑层的JavaScript代码了。

1 创建项目

　　依据本书前面各章的案例。首先按下面步骤创建出项目。

（1）创建名为ch11的项目文件夹。

（2）启动微信小程序开发工具，在启动界面中单击“加入项目”button，打开例如以下的对话框。

　　　　　　　　　　　　　　

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYnJvYWR2aWV3MjAwNg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" style="color:rgb(0,162,202); text-decoration:none; background:0px 0px">

（3）在上面对话框中填写好对应的项目名称，并选择保存项目的文件夹，单击“加入项目”button就可以创建好一个项目的框架。

　　本项目仅仅有一个页面，因此也就不须要再加入其它页面，将index页面中已有的内容删除。然后再在index页面中编写wxml和js代码就可以。

（4）改动显示标题，打开app.json文件。改动成下面内容：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "微天气",
    "navigationBarTextStyle":"black"
  }
}

2 编写界面代码

　　依据UI设计。打开index.wxml文件，删除该文件原有内容，输入下面wxml代码。

<view class="content">
  <!--显示当天的天气信息-->
  <view class="info">
    <!--城市名称 当前日期-->
    <view class="city">{{city}} ({{today}})</view>
    <!--当天温度-->
    <view class="temp">{{weather.wendu}}℃</view>
    <!--感冒描写叙述-->
    <view class="weather">{{weather.ganmao}}</view>
  </view>

  <!--昨天的天气信息-->
  <view class="yesterday">
    <view class="detail"><text class="yesterday-title">昨天</text>
        {{weather.yesterday.date}}</view>
    <view class="detail">  {{weather.yesterday.type}}  <!--天气类型，如阴、晴-->
        {{weather.yesterday.fx}}  <!--风向-->
        {{weather.yesterday.fl}}  <!--风力-->
        {{weather.yesterday.low}}  <!--最低温度-->
        {{weather.yesterday.high}}  <!--最高温度-->
    </view>
  </view>

  <!--近期五天天气信息-->
  <view class="forecast" >
    <view class="next-day"  wx:key="{{index}}" wx:for="{{weather.forecast}}" >
      <!--日期-->
      <view class="detail date">{{item.date}}</view>
      <!--天气类型-->
      <view class="detail">{{item.type}}</view>
      <!--最高温度-->
      <view class="detail">{{item.high}}</view>
      <!--最低温度-->
      <view class="detail">{{item.low}}</view>
      <!--风向-->
      <view class="detail">{{item.fengxiang}}</view>
      <!--风力-->
      <view class="detail">{{item.fengli}}</view>
    </view>
  </view>  

  <!--搜索-->
  <view class="search-area">
    <input bindinput="inputing" placeholder="请输入城市名称"
        value="{{inputCity}}"  />
    <button type="primary" size="mini" bindtap="bindSearch">查询</button>
  </view>
</view>

　　以上wxml代码加入了凝视，每一部分的作用都在凝视中进行了描写叙述。

3 编写界面样式代码

　　保存以上wxml代码之后，在开发工具左側的预览区中并没有看到UI设计图中的UI效果。

为了达到设计的布局效果，须要编写样式代码对wxml组件进行控制。事实上，在上面的wxml代码中。已经为各组件设置了class属性，接下来仅仅须要在index.wxss中针对每个class编写对应的样式代码就可以，详细代码例如以下：

.content{
  height: 100%;
  width:100%;
  display:flex;
  flex-direction:column;
  font-family: 微软雅黑, 宋体;
  box-sizing:border-box;
  padding:20rpx 10rpx;
  color: #252525;
  font-size:16px;
  background-color:#F2F2F8;
}

/*当天天气信息*/
.info{
  margin-top:50rpx;
  width:100%;
  height:160px;
}

/*城市名称*/
.city{
  margin: 20rpx;
  border-bottom:1px solid #043567;
}

/*当天温度*/
.temp{
  font-size: 120rpx;
  line-height: 130rpx;
  text-align: center;
  padding-top:20rpx;
  color:#043567;
}

/*感冒描写叙述*/
.weather{
  line-height: 22px;
  margin: 10px 0;
  padding: 0 10px;
}

/*昨天天气信息*/
.yesterday{
  width:93%;
  padding:20rpx;
  margin-top:50rpx;
  border-radius:10rpx;
  border:1px solid #043567;
}

/*昨天的*/
.yesterday-title{
  color:red;
}

/*近期五天天气信息*/
.forecast{
  width: 100%;
  display:flex;
  margin-top:50rpx;
  align-self:flex-end;
}

/*每一天的天气信息*/
.next-day{
  width:20%;
  height:450rpx;
  text-align:center;
  line-height:30px;
  font-size:14px;
  margin: 0 3rpx;
  border:1px solid #043567;
  border-radius:10rpx;
}

/*日期*/
.date{
  margin-bottom:20rpx;
  border-bottom:1px solid #043567;
  color:#F29F39;
}

/*搜索区域*/
.search-area{
    display:flex;
    background: #f4f4f4;
    padding: 1rem 0.5rem;
}

/*搜索区域的输入框*/
.search-area input{
    width:70%;
    height: 38px;
    line-height: 38px;
    border: 1px solid #ccc;
    box-shadow: inset 0 0 10px #ccc;
    color: #000;
    background-color:#fff;
    border-radius: 5px;
}

/*搜索区的按钮*/
.search-area button{
   width: 30%;
    height: 40px;
    line-height: 40px;
    margin-left: 5px;
}

　　在上面的wxss代码中，每个class设置前都有相应的凝视，可与wxml代码相应起来。

　　保存好index.wxss文件之后，开发工具左側预览区可看到以下的界面效果。

　　　　　　　　　　　　　　　　　　

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYnJvYWR2aWV3MjAwNg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="【图3】" title="【图3】" style="border:0px; vertical-align:middle; max-width:100%">

　　至此我们介绍了“微天气”的API与界面代码编写，我们将在明天的推送中向您继续介绍逻辑层代码以及查询代码的编写。

　　本文选自《从零開始学微信小程序开发》，点此链接可在博文视点官网查看此书。

　　　　　　　　　　　　　　　　　　　　

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYnJvYWR2aWV3MjAwNg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="图片描写叙述" title="图片描写叙述" style="border:0px; vertical-align:middle; max-width:100%">

　　想及时获得很多其它精彩文章，可在微信中搜索“博文视点”或者扫描下方二维码并关注。