【微信小程序逻辑层】天气小程序

天气微信小程序用来显示天气的温度、最低温度、 最高温度及天气情况，下面通过数据绑定的方式来显示天气情况，如图所示。

1. 导航栏设计

首先，新建一个小程序，把index 里面的内容删除；然后在app.json里面，把颜色的色值，修改为蓝色，即添加属性：

“navigationBarBackgroundColor”:”#002041”

然后文字内容修改为中国天气网，文字颜色修改为白色。刷新一下，导航栏就有了。

2. 页面设计

接着，我们进入页面设计，先给出页面的代码：

<view class="content">
   <view class="today">
      <view class="info">
            <view class="temp">{{temp}}℃</view>
            <view class="lowhigh">{{low}}/{{high}}</view>
            <view class="type">{{type}}</view>
            <view class="city">{{city}}</view>
            <view class="week">{{week}}</view>
            <view class="weather"> {{weather}} </view>
      </view>
   </view>
</view>

我们此时发现页面的颜色不对，和导航栏不统一。这样，可以修改app.wxss，在里面添加一个属性：

background-color: #002041

添加这个属性后，就可以得到和导航栏相同的颜色。

接着，在 index.js 里面添加下面代码：

Page({
  data: {
    temp: "4",
    low: "-1℃",
    high: "10℃",
    type: "晴",
    city: "北京",
    week: "星期二",
    weather: "无持续风向 微风级"
  }
})

在 index.wxss 里面添加下面的样式代码：

.content{
    font-family : 微软雅黑,宋体;
    font-size: 14px;
    background-size:cover;
    height: 100%;
    width:100%;
    color:#ffffff;
}
.today{
    padding-top:70rpx;
    height:50%;
}
.temp{
    font-size:80px;
    text-align: center;
}
.city{
    font-size: 20px;
    text-align: center;
    margin-top:20rpx;
    margin-right: 10rpx;
}
.lowhigh{
    font-size: 12px;
    text-align: center;
    margin-top: 30rpx;
}
.type{
    font-size: 16px;
    text-align: center;
    margin-top: 30rpx;
}
.week{
    font-size: 12px;
    text-align: center;
    margin-top: 30rpx;
}

.weather{
    font-size: 12px;
    text-align: center;
    margin-top: 20rpx;
}

最后，得到效果如图所示。

大家可以看到，各种文字是有大有小，重要的部分是有大有小。比如说，我们首先关注的是温度，然后最高温度是多少，最低温度是多少。接着是晴天~~这些都是研究过用户心理学得到的。