概述@H_403_2@
在实际工作中，App既需要支持Android手机，又要支持IOS手机，还要支持微信小程序，公众号等，面对这样的需求，是否劳心费力，苦不堪言，还要考虑各平台的兼容性。现在uni-app以“开发一次，多端覆盖”的理念，海纳百川，求同存异，受到大多数开发者的青睐。uni-app是采用vue.js作为开发前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。本文以一个天气预报的小例子，简述uni-app的开发步骤。
为什么选择uni-app ？@H_403_2@
- uni-app实现了一套代码，同时运行到多个平台。
- uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。
- DCloud为uni-app开发提供了开发利器HBuilderX，以其轻巧极速，强大的语法提示，清爽护眼，和专为vue量身打造的优势，吸引了大多数的开发者。
uni-app目录结构@H_403_2@
一个uni-app工程，默认包含如下目录及文件，如下图所示：
uni-app应用生命周期@H_403_2@
注意：应用生命周期仅可在App.vue中监听，在其它页面监听无效。
uni-app页面生命周期@H_403_2@
关于其他uni-app介绍，可以参考uni-app官网
示例效果图@H_403_2@
本次开发是一个天气预报的小例子，在Chrome浏览器里面如下图所示：
在Android手机上如下所示：
源码分析@H_403_2@
在uni-app开发小例子时，为了代码的复用，自定义三个组件，包括，风车组件，圆形进度球组件，天气组件。源码分别如下：
（一）圆形进度球组件@H_403_2@
组件包含三部分，分别是页面(template)，脚本(JavaScript)，样式(CSS)，源码如下：
1@H_403_2@ <@H_403_2@template@H_403_2@>@H_403_2@
2@H_403_2@ view @H_403_2@class@H_403_2@="content"@H_403_2@ 3@H_403_2@ ="progress"@H_403_2@ 4@H_403_2@ ="progress_outer"@H_403_2@ 5@H_403_2@ ="progress_inner"@H_403_2@></@H_403_2@view@H_403_2@ 6@H_403_2@ ="progress_masker"@H_403_2@ :style@H_403_2@="maskStyle"@H_403_2@ 7@H_403_2@ </@H_403_2@ 8@H_403_2@ ="progress_value"@H_403_2@>@H_403_2@{{cvalue}}% 9@H_403_2@ 10@H_403_2@ 11@H_403_2@ >@H_403_2@
脚本(JavaScript)代码如下：
1@H_403_2@ <script>
2@H_403_2@ export default@H_403_2@ {
@H_403_2@ 3@H_403_2@ props: {
@H_403_2@ 4@H_403_2@ cvalue: {
@H_403_2@//@H_403_2@ 进度条百分比@H_403_2@
6@H_403_2@ type: Number,@H_403_2@ 7@H_403_2@ default@H_403_2@: 10,1)"> 8@H_403_2@ },1)"> 9@H_403_2@ },1)">10@H_403_2@
data() {
@H_403_2@12@H_403_2@ return@H_403_2@13@H_403_2@
14@H_403_2@ };
@H_403_2@15@H_403_2@ 16@H_403_2@ computed: {
@H_403_2@17@H_403_2@ maskStyle(){
@H_403_2@18@H_403_2@ var@H_403_2@ top=100-this@H_403_2@.cvalue;
@H_403_2@19@H_403_2@ return@H_403_2@ {marginTop : top + '%'};
@H_403_2@20@H_403_2@ 21@H_403_2@
22@H_403_2@ }
@H_403_2@23@H_403_2@
24@H_403_2@ }
@H_403_2@25@H_403_2@ </script>
样式(CSS)代码如下：
1@H_403_2@ <style>
@H_403_2@ 2@H_403_2@ .content@H_403_2@{
3@H_403_2@ width@H_403_2@: 200rpx@H_403_2@;
4@H_403_2@ height@H_403_2@: 5@H_403_2@ display@H_403_2@: block@H_403_2@;
6@H_403_2@ Box-sizing@H_403_2@: border-Box@H_403_2@;
7@H_403_2@ }
8@H_403_2@ .progress @H_403_2@{
9@H_403_2@ position@H_403_2@: relative@H_403_2@;
10@H_403_2@ 11@H_403_2@ 12@H_403_2@ padding@H_403_2@: 0@H_403_2@;
13@H_403_2@ 14@H_403_2@ }
15@H_403_2@ .progress_outer
@H_403_2@16@H_403_2@ {
17@H_403_2@ height@H_403_2@:100%@H_403_2@;
18@H_403_2@ width@H_403_2@:19@H_403_2@ background-color@H_403_2@:gray@H_403_2@;
20@H_403_2@ border-radius@H_403_2@:calc(100%/2)@H_403_2@;
21@H_403_2@ border@H_403_2@:5px solid rgba(0,0.1)@H_403_2@;
22@H_403_2@ padding@H_403_2@:0@H_403_2@;
23@H_403_2@ Box-shadow@H_403_2@: 0px 2px 4px #555555@H_403_2@;
24@H_403_2@ -webkit-Box-shadow@H_403_2@:25@H_403_2@ -moz-Box-shadow@H_403_2@:26@H_403_2@ position@H_403_2@: absolute@H_403_2@;
27@H_403_2@ Box-sizing@H_403_2@:28@H_403_2@ overflow@H_403_2@: hidden@H_403_2@;
29@H_403_2@
30@H_403_2@ }
31@H_403_2@ .progress_inner
@H_403_2@32@H_403_2@ {
33@H_403_2@ height@H_403_2@:34@H_403_2@ width@H_403_2@:35@H_403_2@ border@H_403_2@:1px solid yellow@H_403_2@;
36@H_403_2@ border-radius@H_403_2@:37@H_403_2@ position@H_403_2@:absolute@H_403_2@;
38@H_403_2@ background-color@H_403_2@:white@H_403_2@;
39@H_403_2@ text-align@H_403_2@:center@H_403_2@;
40@H_403_2@ Box-sizing@H_403_2@:41@H_403_2@
42@H_403_2@ }
43@H_403_2@ .progress_masker
@H_403_2@44@H_403_2@ {
45@H_403_2@ 46@H_403_2@ 47@H_403_2@ background@H_403_2@: -webkit-gradient(linear,center top,center bottom,from(#0ff),to(#0f0))@H_403_2@;
48@H_403_2@ -moz-linear-gradient( top,#fff,#0f0)@H_403_2@;
49@H_403_2@ -o-linear-gradient( top,1)">50@H_403_2@ 51@H_403_2@ 52@H_403_2@ }
53@H_403_2@ .progress_value
@H_403_2@54@H_403_2@ {
55@H_403_2@ 56@H_403_2@ color@H_403_2@:black@H_403_2@;
57@H_403_2@ font-weight@H_403_2@:bolder@H_403_2@;
58@H_403_2@ transparent@H_403_2@;
59@H_403_2@ text-align@H_403_2@:60@H_403_2@ 61@H_403_2@ margin-top@H_403_2@: 90rpx@H_403_2@;
62@H_403_2@ }
63@H_403_2@ </style>@H_403_2@
（二）风车组件@H_403_2@
风车组件包含两部分，分别是页面(template)，样式(CSS)，源码如下：
="wind_mill"@H_403_2@="cicle"@H_403_2@ 5@H_403_2@ ="vane"@H_403_2@="vane1"@H_403_2@="vane2"@H_403_2@ 8@H_403_2@ ="vane3"@H_403_2@ 9@H_403_2@ 10@H_403_2@ ="blade"@H_403_2@11@H_403_2@
13@H_403_2@ 14@H_403_2@ >@H_403_2@
样式(CSS)代码如下：
.wind_mill@H_403_2@{
220rpx@H_403_2@;
5@H_403_2@ /*@H_403_2@ background-color: rgba(25,83,157,0.5); @H_403_2@*/@H_403_2@
@keyframes vanflash@H_403_2@{
from{transform@H_403_2@: rotate(0deg)@H_403_2@; transform-origin@H_403_2@: center@H_403_2@;}
10@H_403_2@ to@H_403_2@{transform@H_403_2@: rotate(360deg)@H_403_2@;transform-origin@H_403_2@:11@H_403_2@ 12@H_403_2@ .vane@H_403_2@{
14@H_403_2@ 15@H_403_2@ 16@H_403_2@ animation-name@H_403_2@: vanflash@H_403_2@;
animation-duration@H_403_2@: 5s@H_403_2@;
animation-iteration-count@H_403_2@: infinite@H_403_2@;
-webkit-animation-name@H_403_2@: -webkit-animation-duration@H_403_2@: -webkit-animation-iteration-count@H_403_2@:22@H_403_2@ }
23@H_403_2@ .vane1@H_403_2@{
80rpx@H_403_2@;
4rpx@H_403_2@;
background-color@H_403_2@: #FFFFFF@H_403_2@;
border-radius@H_403_2@: 5rpx@H_403_2@;
29@H_403_2@ 30@H_403_2@ left@H_403_2@: 100rpx@H_403_2@;
31@H_403_2@ top@H_403_2@:100rpx@H_403_2@;
32@H_403_2@ transform@H_403_2@: rotate(0deg)@H_403_2@;
transform-origin@H_403_2@:left@H_403_2@;
-webkit-transform@H_403_2@:rotate(0deg)@H_403_2@;
35@H_403_2@
36@H_403_2@ }
37@H_403_2@ .vane2@H_403_2@{
41@H_403_2@ 42@H_403_2@ 43@H_403_2@ 44@H_403_2@ rotate(120deg)@H_403_2@;
rotate(120deg)@H_403_2@;
48@H_403_2@ }
49@H_403_2@ .vane3@H_403_2@{
52@H_403_2@ 53@H_403_2@ 54@H_403_2@ rotate(240deg)@H_403_2@;
rotate(240deg)@H_403_2@;
60@H_403_2@ }
61@H_403_2@ .cicle@H_403_2@{
62@H_403_2@ 63@H_403_2@ 64@H_403_2@ 90rpx@H_403_2@;
65@H_403_2@ 66@H_403_2@ 20rpx@H_403_2@;
67@H_403_2@ 68@H_403_2@ 16rpx@H_403_2@;
69@H_403_2@ }
70@H_403_2@ .blade@H_403_2@{
71@H_403_2@ 120rpx@H_403_2@;
72@H_403_2@ 10rpx@H_403_2@;
73@H_403_2@ 74@H_403_2@ 75@H_403_2@ 76@H_403_2@ 77@H_403_2@ 78@H_403_2@ rotate(90deg)@H_403_2@;
79@H_403_2@ 80@H_403_2@ rotate(90deg)@H_403_2@;
81@H_403_2@ }
82@H_403_2@ （三）天气组件@H_403_2@
天气组件，引用了前面两个组件，并有自定义数据内容，如下所示：
scroll-view @H_403_2@scroll-y@H_403_2@="true"@H_403_2@ class@H_403_2@="main"@H_403_2@="current"@H_403_2@="district"@H_403_2@>@H_403_2@{{district}}="temp"@H_403_2@>@H_403_2@{{temp}}°C 6@H_403_2@ ="temp_range"@H_403_2@>@H_403_2@{{temprange}}="temp_desc"@H_403_2@>@H_403_2@{{tempdesc}}br@H_403_2@="temp_src"@H_403_2@10@H_403_2@ ="temp_src_left"@H_403_2@>@H_403_2@中国气象11@H_403_2@ ="temp_src_right"@H_403_2@>@H_403_2@上次更新时间：{{updatetime}}14@H_403_2@ scroll-x@H_403_2@="true"@H_403_2@15@H_403_2@ ="hour"@H_403_2@ enable-flex@H_403_2@16@H_403_2@ ="each_hour"@H_403_2@ v-for@H_403_2@="item in timelist"@H_403_2@17@H_403_2@ ="each_hour_time"@H_403_2@>@H_403_2@{{item.time}}18@H_403_2@ image @H_403_2@:src@H_403_2@="item.img"@H_403_2@ mode@H_403_2@="scaleToFill"@H_403_2@="each_hour_img"@H_403_2@ image@H_403_2@19@H_403_2@ ="each_hour_temp"@H_403_2@>@H_403_2@{{item.temp}}20@H_403_2@ 21@H_403_2@ 22@H_403_2@ scroll-view@H_403_2@24@H_403_2@ ="sevenday"@H_403_2@25@H_403_2@ ="each_day"@H_403_2@="item in daylist"@H_403_2@26@H_403_2@ ="each_day_text"@H_403_2@27@H_403_2@ {{item.day}} {{item.week}}
@H_403_2@28@H_403_2@ 29@H_403_2@ ="each_day_img"@H_403_2@ :src@H_403_2@=""@H_403_2@30@H_403_2@ ="each_day_temp"@H_403_2@31@H_403_2@ 32@H_403_2@
33@H_403_2@ 34@H_403_2@ ="air"@H_403_2@35@H_403_2@ ="air_title"@H_403_2@36@H_403_2@ =""@H_403_2@ style@H_403_2@="flex: 1;"@H_403_2@>@H_403_2@空气质量37@H_403_2@ ="text-align: right;flex: 1;"@H_403_2@>@H_403_2@更多>38@H_403_2@ 39@H_403_2@ ="air_body"@H_403_2@40@H_403_2@ ="air_left"@H_403_2@41@H_403_2@ airprogress @H_403_2@="airprogress"@H_403_2@ :cvalue@H_403_2@="airvalue"@H_403_2@airprogress@H_403_2@42@H_403_2@ 43@H_403_2@ ="air_right"@H_403_2@44@H_403_2@ ="air_content"@H_403_2@="item in airlist"@H_403_2@45@H_403_2@ ="air_content_name"@H_403_2@>@H_403_2@{{item.name}}46@H_403_2@ ="air_content_value"@H_403_2@>@H_403_2@{{item.value}}47@H_403_2@ 48@H_403_2@ 49@H_403_2@ 50@H_403_2@ 51@H_403_2@ ="wind"@H_403_2@52@H_403_2@ ="wind_title"@H_403_2@53@H_403_2@ >@H_403_2@风向风力54@H_403_2@ 55@H_403_2@ 56@H_403_2@ ="wind_body"@H_403_2@57@H_403_2@ ="wind_left"@H_403_2@58@H_403_2@ windmill @H_403_2@="wind01"@H_403_2@windmill@H_403_2@59@H_403_2@ ="wind02"@H_403_2@60@H_403_2@ 61@H_403_2@ ="wind_right"@H_403_2@62@H_403_2@ ="wind_right_direction"@H_403_2@63@H_403_2@ style@H_403_2@="flex: 1;text-align: left;"@H_403_2@>@H_