Autumn 实践 - 天气 App

使用 autumn 的开发流程以及技术栈和现有的 App 开发有很多不一致的地方。随着最近工具的完善，是时候通过接下来这个天气 App 来完整了解整个开发过程了。

你需要了解一些基本的 html， css ， flex 和 js。

在完成天气 App 的过程中我们大概需要完成以下内容

• 我们将在本地开启一个服务器提供模板和业务数据。
• 使用贝贝 App 来拉取模板和数据用于预览视图。
• 通过不断的调试和编辑模板来完成最终的开发。

准备

开发前我们需要准备几个工具：

• 最新版本的贝贝 APP 用来实时预览模板
• NPM JS 的包管理器 我们需要使用它安装 autumn 的本地服务器
• autumn-server 使用 npm install autumn-server-v2 -g 来安装它 运行 autumn —version 如果能正确的显示版本号则说明已经安装成功了

确保以上工具都已经安装完成 接下来我们先预览下模板。

git clone autumn-weather-tourist ，这个是我们将要开发的工程, 然后用 sublime 或者任何你喜欢的 ide 打开这个文件夹， 里边包含了一个空的模板文件 weather.html, 和一份数据文件 weather.json。

打开 Terminal, cd 到 autumn-weather-tourist 所在的目录。 执行 autumn weather.html, 此时一个 html 页面将会被打开，展示一个二维码。

打开贝贝 App ，在首页点击扫描按钮来扫描这个这个二维码，你将看到一个展示 hello world 的新页面被打开。

打开 weather.json 文件，修改下：

{
	"title": "hello autumn" ①
}

然后保存, 可以看到贝贝 App 里的 hello world 已经修改为 hello autumn 了，至此所有准备工作都已经完成，接下来可以开始实现 App 了。

• ① 我们使用了 mustache 把 weather.json 中的数据填充到模板中。更多关于 mustache 的信息，可以点击这里查看。

开始开发

从实现背景图片视图开始

我们现在打开 weather.html 文件，先把 <span>{{title}}</span> 替换为

<div class="screen">
	<img ①src="{{back_img}}" class="back_img">
	<ul class="content">
	</ul>
</div>

<style type="text/css">
.screen {
	width: 100vw;
	height: 100vh;
}
.back_img {
	width: 100vw;
	height: 100vh;
	background-color: #ffff00;
	content-mode: scale-aspect-fill;	
}
.content {
	width: 100vw;
	height: 100vh;
	background-color: #66000000;
	②position: absolute;
  	top: 0px;
	left: 0px;
}
</style>

然后保存。看看 App 里的视图变化。 应该显示成这个样子。

在这里我们创建了一个背景图片和覆盖在上边的将要显示天气的内容视图。

• ① src="{{back_img}}" 这里的图片也是来至于 weather.json
• ② 因为天气视图是覆盖在背景图片上的, 所以内容的 CSS 属性需要设置为 position: absolute;
• 视图的布局方式上我们使用的是标准的 Flex

单日的天气视图

接下来我们先实现单天的日期显示，数据先写死。 图片地址使用这个 http://oaeal18u2.bkt.clouddn.com/[email protected]

先别往下看，自己尝试着添加一下。最外层用一个<li></li>， 然后依次添加 <img></img> <span></span> ...

在 <ul></ul> 中添加以下代码

<li class="weather_container">
    <img src="http://oaeal18u2.bkt.clouddn.com/[email protected]" class="weather_icon">
    <div class="weather_value_container">
        <span class="weather_title">周一</span>
        <span class="weather_subtitle">64℃</span>
        <div class="weather_line"></div>
    </div>
</li>

在 style 中添加以下样式

.weather_container {
	height: 50px;
	width: 100vw;
	align-content: center;
	align-items: center;
	background-color: #00000000;
}
.weather_icon {
	margin-left: 12px;
	height: 30px;
	width: 30px;
}
.weather_value_container {
	margin-left: 16px;
	height: 50px;
	①-autumn-width: 100vw - 12px - 16px - 40px;
	justify-content: space-between;
}
.weather_title {
	font-size: 16px;
	color: #ffffff;
}
.weather_subtitle {
	font-size: 16px;
	color: #ffffff;
	margin-right: 16px;
}
.weather_line {
	-autumn-width: 100vw - 12px - 16px - 40px;
	position: absolute;
	left: 0px;
	top: 49.5px;
	height: 0.5px;
	background-color: #44ebebeb;
}

• ① autumn-width 类似这样的 -autumn- 作为开头的属性值都是 autumn 扩展属性，任何的长度单位增加了 -autumn- 后就支持四则运算了。
• 更多关于 autumn 的特性

然后保存，看看 App 里的视图变化。应该展示为这样

周视图

单日的视图完成后，我们只要通过 mustache 把数据 填充和展开 就好了。

{{#daily}}
<li class="weather_container">
    <img src="{{icon}}" class="weather_icon">
    <div class="weather_value_container">
        <span class="weather_title">{{title}}</span>
        <span class="weather_subtitle">{{subtitle}}</span>
        <div class="weather_line"></div>
    </div>
</li>
{{/daily}}

然后保存，看看 App 里的视图变化。应该展示为这样

Cool~ 到这里我们已经完成了基本的视图展示

到这里我们了解和使用了基本的

• html
• css
• mustache
• Flex
• autumn 的特性

当前天气视图

我们先重新回顾下，然后尝试添加当前天气视图

今日小时天气视图

添加完当前的天气视图后，我们最后再来添加显示今日每小时的温度和天气情况视图。

经过前边的练习，视图部分已经相对比较容易处理了。我们在周天气视图 <li> 上添加以下代码

<li class="weather_container_today">
    <div class="weather_today_overview_container">
        <div class="weather_today_overview_value_container">
            <span class="weather_title">{{today_detail.title}}</span>
            <span class="weather_subtitle">{{today_detail.subtitle}}</span>
        </div>
    </div>
    ①<div style="background-color: #44ebebeb; height: 1px; width: 100vw; position: absolute; left: 0px; top: 50px;"></div>
    ②<ul class="weather_today_detail" type="pro" direction="horizontal">
        {{#today_detail.hours}}
        <li class="weather_today_detail_hour">
            <span class="weather_today_detail_hour_time">{{hour}}</span>
            <img class="weather_today_detail_hour_icon" src="{{icon}}"></img>
            <span class="weather_today_detail_hour_temp">{{temp}}</span>
        </li>
        {{/today_detail.hours}}
    </ul>
    <div style="background-color: #44ebebeb; height: 1px; width: 100vw; position: absolute; left: 0px; bottom: 0px;"></div>
</li>

以及在 css 中添加以下代码

.weather_container_today {
	width: 100vw;
	flex-direction: column;
	align-content: center;
	align-items: center;
	background-color: #00000000;
}
.weather_today_overview_container {
	height: 50px;
	width: 100vw;
	align-content: center;
	align-items: center;
}
.weather_today_overview_value_container {
	margin-left: 16px;
	height: 50px;
	-autumn-width: 100vw - 12px - 16px;
	justify-content: space-between;
}
.weather_today_detail {
	height: 120px;
	width: 100vw;
	align-content: center;
	align-items: center;
	background-color: #00000000;
}
.weather_today_detail_hour {
	height: 120px;
	width: 60px;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}
.weather_today_detail_hour_time {
	font-size: 14px;
	color: #ffffff;
}
.weather_today_detail_hour_icon {
	width: 24px;
	height: 24px;
}
.weather_today_detail_hour_temp {
	font-size: 14px;
	color: #ffffff;
}

• ① 内联样式也支持
• ② ul 我们使用 type=pro 来标记这是一个复杂列表, direction=horizontal 来配置列表的滑动方向为横向滑动。

然后保存，看看 App 里的视图变化。应该展示为这样

基本视图的展示已经没有问题了，但是每个小时的天气显示有些问题，和 weather.json 中的数据类似，后端返回的数据往往是 24 个小时的数据，而我们视图显示只需要从当前时间开始显示就好了，这里就需要使用 JavaScript 来处理数据了。

JavaScript 提供了数据的处理能力，以及 hybrid 调用

self.mustacheDataFilter = function (data) {	
	return data
}

self.mustacheDataFilter 是默认的数据处理函数, data 为 weather.json 中的数据，返回的 data 是视图渲染时真正会使用的数据

我们将要做的就是通过 JavaScript 来获取当前的小时数，然后截取从当前小时到 23 直接的所有数据，然后再对数据做处理。

self.mustacheDataFilter = function (data) {

	var nowDate = new Date()
	var nowHour = nowDate.getHours()
	var nowIdx
	data.today_detail.hours.forEach(function (hour, idx) {		
		if (nowHour == hour.hour) {
			hour.hour = "现在"
			nowIdx = idx
		}
		else {
			hour.hour = hour.hour + "时"
		}
	})
	data.today_detail.hours = data.today_detail.hours.slice(nowIdx, data.today_detail.hours.length)
	return data
}

然后保存，看看 App 里的视图变化。应该展示为这样

自此天气 App 已经完成了, 完成版的 demo 可以在这里找到

相关资料

• 最新版本的贝贝 APP
• NPM
• autumn-server
• Autumn iOS
• Autumn Android
• mustache
• Flex
• autumn 的特性
• hybrid