项目：祥云天气

祥云天气是一个用来展示某地的天气温度、天气状况以及未来几天的温度微信小程序
下面通过数据绑定的方式显示天气情况

（1）首先创建项目

AppID的获取在第1章中讲过，或者使用测试号，单击蓝色“小程序”会自动填入测试AppID，勾选“建立普通快速启动模板”

（2）创建新页面weather

进入app.json，在pages配置项中删除index页面，新增weather页，代码如下

{
"pages":[
        "pages/weather/weather"
    ]
}

然后就会在编辑器中看到，pages目录下多出weather文件夹
现在就创建好了weather页，并且显示的也是weather页

打开app.json，修改全局配置，设置标题栏的背景颜色和文字，代码如下

{
    "pages":[
      "pages/weather/weather"
  ],
  "window":{
      "backgroundTextStyle":"light",
    "navigationBarBackgroundColor":"#5fc8ff",
    "navigationBarTitleText":"祥云天气",
    "navigationBarTextStyle":"white"
  },
  "debug":false
}

（3）打开weather.js

在data中添加天气数据，包括城市、地区、天气、温度和星期数据，代码如下

Page({
    data:{
      city:"北京",
    area:"海淀",
    weather:"多云",
    temperature:"18℃",
    weeks:{
        week:"周三",
      temp:{highest:"18℃",lowest:"12℃"}
    }
  }
})

（4）打开weather.wxml

编写页面结构，通过数据绑定把在js中定义的数据显示出来，代码如下

<view class='container'>
  <text class='weather'>{{weather}}</text>
    <text class='city'>{{city}} {{area}}</text>
  <text class='temperature'>{{temperature}}</text>
  <view class='week-list'>
      <view class='week'>{{weeks.week}}</view>
        <view class='temp'>{{weeks.temp.hightest}}~{{weeks.temp.lowest}}</view>
  </view>
</view>

（5）添加背景图

在项目根目录创建public/imgs/目录，把本章提供的背景图素材导入imgs目录下
修改weather.wxml代码，添加image组件，代码如下

<view class='container'>
  <image class='bg' mode='widthFix' src='/public/img/qntq-bg.png'></image>
  <text class='weather'>{{weather}}</text>
    <text class='city'>{{city}} {{area}}</text>
  <text class='temperature'>{{temperature}}</text>
  <view class='week-list'>
      <view class='week'>{{weeks.week}}</view>
        <view class='temp'>{{weeks.temp.hightest}}~{{weeks.temp.lowest}}</view>
  </view>
</view>

（6）添加样式

美化页面，打开weather.wxss添加样式，代码如下

.container{
    color:#fff;
}
.bg{
    position:absolute;
  top:0;
  width:100%;
  z-index:-1;
}
.weather{
    color:#fff;
  font-size:60rpx;
  margin-top:50rpx;
}
.city{
    font-size:32rpx;
  margin:10rpx;
}
.temprature{
    font-size:180rpx;
  margin:20rpx;
  font-weight:800;
}
.week-list{
    width:100%;
  display:flex;
  align-item:center;
  justify-content:center;
  color:#5fc8ff;
  margin-top:470rpx;
}
.week-list .week{
    flex:3;
  text-align:left;
  padding-left:50rpx;
}
.week-list .temp{
    flex:2;
  text-align:center;
}