一周学会小程序-日播天气

最终效果图

前言：欢迎收看一周学会小程序系列2-日播天气。看了苹果的自带天气软件，发现很简单使用。在小程序上看了一下天气的小程序，没有发现类似的，于是就模仿了一个。虽然模仿的不是很像，请大家不要见笑！

主要功能：

1. 通过定位或选取位置获取当天详细天气预报

（1）天气情况，包括温度「当前温度、最低温度和最高温度」、天气、空气质量、湿度、风向和风速、日出和日落、气压、能见度等；
（2）生活指数，包括舒适度、穿衣、感冒、运动、旅游、紫外线强度、洗车、污染扩散等。

2. 24小时天气预报

3. 7天天气预报

细节：

增加类似于App的启动页

具体功能实现：

1.接口部分：使用京东万象提供的免费天气接口（京东万象官网地址）

京东万象免费接口

2.页面部分：

页面布局草图

（1）布局构思：主页面使用小程序推荐flex列布局，使用4个模板（当前天气温度信息模板、24小时模板、7天天气模板、生活指数模板），2个scrollview（24小时、7天天气预报）
（2）详细模板使用：

• 以当前天气信息为例（单一样式）：

.wxss


.wxss
.template-bgview {
  width: 100%;
  /* height: 175px; */
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.temperature-bg {
  /* align-items: center; */
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.temperature-text {
  font-size: 160rpx;
  font-weight: lighter;
}

.temperature-degree {
  font-size: 80rpx;
  font-weight: lighter;
}

.weather-bg {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.weather-line {
  margin-left: 5px;
  color: gray;
}

.aqi-bg {
  margin-left: 5px;
  background-color: yellow;
  border-radius: 3px;
}

.aqi-text {
margin-left: 5px;
margin-right: 5px;
}

.winter-bg {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.hum-text {
  margin-right: 10px;
}

.wind-text {
  margin-left: 10px;
}

模板使用：
1.模板页面导入
.wxml

.wxss

@import "../template/now-template.wxss";

2.外层嵌套view使用