uni-app初探之天气预报小例子

前端开发作者： 2024-08-26 06:05:01

在实际工作中，App既需要支持Android手机，又要支持IOS手机，还要支持微信小程序，公众号等，面对这样的需求，是否劳心费力，苦不堪言，还要考虑各平台的兼容性。现在uni-app以“开发一次，多端

uni-app实现了一套代码，同时运行到多个平台。
uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。
DCloud为uni-app开发提供了开发利器HBuilderX，以其轻巧极速，强大的语法提示，清爽护眼，和专为vue量身打造的优势，吸引了大多数的开发者。

（一）圆形进度球组件

 1 <template>
 2     view class="content" 3         ="progress" 4             ="progress_outer" 5                 ="progress_inner"></view 6                 ="progress_masker" :style="maskStyle" 7             </ 8             ="progress_value">{{cvalue}}% 9         10     11 >

View Code

 1 <script>
 2     export default {
 3         props: {
 4             cvalue: {
// 进度条百分比
 6                 type: Number, 7                 default: 10,1)"> 8             },1)"> 9         },1)">10 
        data() {
12             return13 
14             };
15 16         computed: {
17             maskStyle(){
18                 var top=100-this.cvalue;
19                 return {marginTop :  top + '%'};
20 21             
22         }
23 
24     }
25 </script>

View Code

 1 <style>
 2     .content{
 3         width: 200rpx;
 4         height: 5         display: block;
 6         box-sizing: border-box;
 7     }
 8     .progress {
 9         position: relative;
10 11 12         padding: 0;
13 14     }
15     .progress_outer
16     {
17          height:100%;
18          width:19          background-color:gray;
20          border-radius:calc(100%/2);
21          border:5px solid rgba(0,0.1);
22          padding:0;
23          box-shadow: 0px 2px 4px #555555;
24          -webkit-box-shadow:25          -moz-box-shadow:26          position: absolute;
27          box-sizing:28          overflow: hidden;
29          
30      }
31       .progress_inner
32       {
33           height:34           width:35           border:1px solid yellow;
36           border-radius:37           position:absolute;
38           background-color:white;
39           text-align:center;
40           box-sizing:41           
42       }
43      .progress_masker
44      {
45 46 47          background: -webkit-gradient(linear,center top,center bottom,from(#0ff),to(#0f0));
48  -moz-linear-gradient( top,#fff,#0f0);
49  -o-linear-gradient( top,1)">50 51 52      }
53      .progress_value
54      {
55 56          color:black;
57          font-weight:bolder;
58 transparent;
59          text-align:60 61          margin-top: 90rpx;
62      }
63 </style>

View Code

（二）风车组件

="wind_mill"="cicle" 5             ="vane"="vane1"="vane2" 8                 ="vane3" 9             10             ="blade"11                 
13         14     >

View Code

    .wind_mill{
 220rpx;
 5         /* background-color:  rgba(25,83,157,0.5); */
    @keyframes vanflash{
        from{transform: rotate(0deg); transform-origin: center;}
10         to{transform: rotate(360deg);transform-origin:11 12     .vane{
14 15 16         animation-name: vanflash;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        -webkit-animation-name:        -webkit-animation-duration:        -webkit-animation-iteration-count:22     }
23     .vane1{
 80rpx;
 4rpx;
        background-color: #FFFFFF;
        border-radius: 5rpx;
29 30         left: 100rpx;
31         top:100rpx;
32         transform: rotate(0deg);
        transform-origin:left;
        -webkit-transform:rotate(0deg);
35         
36     }
37     .vane2{
41 42 43 44  rotate(120deg);
rotate(120deg);
48     }
49     .vane3{
52 53 54  rotate(240deg);
rotate(240deg);
60     }
61     .cicle{
62 63 64 90rpx;
65 66  20rpx;
67 68  16rpx;
69     }
70     .blade{
71  120rpx;
72  10rpx;
73 74 75 76 77 78  rotate(90deg);
79 80 rotate(90deg);
81     }
82 （三）天气组件






scroll-view scroll-y="true" class="main"="current"="district">{{district}}="temp">{{temp}}°C 6             ="temp_range">{{temprange}}="temp_desc">{{tempdesc}}br="temp_src"10                 ="temp_src_left">中国气象11                 ="temp_src_right">上次更新时间：{{updatetime}}14         scroll-x="true"15             ="hour" enable-flex16                 ="each_hour" v-for="item in timelist"17                     ="each_hour_time">{{item.time}}18                     image :src="item.img" mode="scaleToFill"="each_hour_img" image19                     ="each_hour_temp">{{item.temp}}20                 21             22         scroll-view24         ="sevenday"25             ="each_day"="item in daylist"26                 ="each_day_text"27                     {{item.day}} {{item.week}}
28                 29                 ="each_day_img" :src=""30                 ="each_day_temp"31             32 
33         34         ="air"35             ="air_title"36                 ="" style="flex: 1;">空气质量37                 ="text-align: right;flex: 1;">更多>38             39             ="air_body"40                 ="air_left"41                     airprogress ="airprogress" :cvalue="airvalue"airprogress42                 43                 ="air_right"44                     ="air_content"="item in airlist"45                         ="air_content_name">{{item.name}}46                         ="air_content_value">{{item.value}}47                     48                 49             50         51         ="wind"52             ="wind_title"53                 >风向风力54                 55             56             ="wind_body"57                 ="wind_left"58                     windmill ="wind01"windmill59                     ="wind02"60                 61                 ="wind_right"62                     ="wind_right_direction"63                         style="flex: 1;text-align: left;">风向64                         >{{winddirection}}65                     66                     ="wind_right_power"67                         >风力68                         >{{windpower}}69                     70                 71             72         73         ="provider">provide by Alan.hsiang74     75 >

View Code






 2     import windmill from "../windmill/windmill.vue"
 3     import airprogress from "../airprogress/airprogress.vue"
 4     export  5         components: {
            windmill,1)"> 7             airprogress
        props:{
10             district:{
                type:String,1)">12                 required:true13             temp:{
                type:Number,1)">default:0
18             temprange:{
19 20                 
21             tempdesc:{
23 24                 
25 26             updatetime:{
28                 
29 30             timelist:{
31                 type:Array,1)">32                 
33 34             daylist:{
35 36                 
37 38             airvalue:{
39 default:1041                 
42 43             airlist:{
44 45                 
46 47             winddirection:{
48 49                 
50 51             windpower:{
52 53                 
54             }
55 56 57             58                 
59 
60 61 62 63 </script>

View Code






  1   2     view {
  3          border: #007AFF 1rpx solid;   4         font-family: Arial,Helvetica,sans-serif;
  5         font-size: 28rpx;
  6  2rpx;
  7     }
  8 
  9     .main {
 10  100%;
 11  12  13  rgba(25,0.5);
 14         color: 15     }
 16 
 17     .current {
 18  flex;
 19         flex-direction: column;
 20         vertical-align: middle;
 21         justify-content: center;
 22  400rpx;
 23         border-bottom: #F1F1F1 2rpx solid;
 24     }
 25 
 26     .current view {
 27         margin-bottom: 28     }
 29 
 30     .district {
 31  60rpx;
 32  45rpx;
 33         text-align: 34 
 35     }
 36 
 37     .temp {
 38  39  70rpx;
 40  41         line-height: 1.5;
 42     }
 43 
 44     .temp_range {
 45  46  40rpx;
 47  48  49     }
 50 
 51     .temp_desc {
 52  50rpx;
 53  30rpx;
 54  55  56     }
 57 
 58     .temp_src {
 59  60  row;
 61  justify;
 62  bottom;
 63     }
 64 
 65     .temp_src_left {}
 66 
 67     .temp_src_right {
 68         flex: 1;
 69  right;
 70     }
 71 
 72     .top {
 73  74  75     }
 76 
 77     .hour {
 78  79  80  81  small;
 82         margin-top: 83  84  85     }
 86     .each_hour{
 87         margin-left: 6rpx;
 88     }
 89     .each_hour_img{
 90  91  92     }
 93     .sevenday {
 94  95  96     }
 97 
 98     .each_day {
 99 100 101 102 103 104 
105     }
106 
107 
108     .each_day_text {
109 110  left;
111  2;
112     }
113 
114 
115     .each_day_img {
116 117 118     }
119 
120     .each_day_temp {
121 122 123 124     }
125 
126     .air {
127 128 129         margin:130     }
131 
132     .air_title {
133 134 135 136     }
137 
138     .air_body {
139 140 141     }
142 
143     .air_left {
144 145  inline-block;
146 147 148     }
149     .airprogress{
150 151 152     }
153     .air_right {
154 155 156 157     }
158 
159     .air_content {
160 161 162     }
163 
164     .air_content_name {
165 166 167     }
168 
169     .air_content_value {
170 171 172     }
173 
174     
175     .wind{
176 177 178  260rpx;
179 180     }
181     .wind_title{
182 183 184     }
185     .wind_body{
186 187 188     }
189     .wind_left{
190 191 192  150rpx;
193     }
194     .wind_right{
195 196 197 198     }
199     .wind_right_direction{
200  0.5;
201 202 203     }
204     .wind_right_power{
205 206 207 208     }
209     .wind_left_img{
210  140rpx;
211 212     }
213     .wind01{
214 215 216  0rpx;
217     }
218     .wind02{
219 220  -20rpx;
221 222     }
223     .provider{
224 225     }
226 </style>

View Code


（四）页面调用组件






swiper :indicator-dots="showIndicatorDots" indicator-color="#FFFFFF" indicator-active-color="#FF0000" :autoplay="isAutoPlay"swiper-item v-for="(item,index) in weather_content"weather :id="index" 
                :district="item.district" 
 7                 :temp="item.temp" 
 8                 :tempdesc="item.tempdesc" 
                :temprange="item.temprange"
                :updatetime="item.updatetime"
                :timelist="item.time_list"
                :daylist="item.day_list"
                :airvalue="item.air_value"
                :airlist="item.air_list"
                :winddirection="item.winddirection"
                :windpower="item.windpower"
                class="weather"18                     
weather20             swiper-item21         swiper22     >

View Code






  1 <script>
  2     import weather from "@/components/weather/weather.vue"
  3     export   4   5             weather
  6   7   8               9                 title: 'Hello' 10                 showIndicatorDots: 11                 isAutoPlay:false 12                 weather_content:[{
 13                     district:"龙岗区" 14                     temp:23 15                     temprange:"-2°C / 10°C" 16                     tempdesc:"晴 空气良" 17                     updatetime:"22:10" 18                     time_list: [{
 19                             time: "00:00" 20                             img: "../../static/day/00.png" 21                             temp: "0°C"
 22                         },1)"> 23                         {
 24                             time: "01:00" 25                             img: "../../static/day/01.png" 26                             temp: "1°C"
 27  28                             time: "02:00" 29                             img: "../../static/day/02.png" 30                             temp: "2°C"
 31  32  33                             time: "03:00" 34                             img: "../../static/day/03.png" 35                             temp: "3°C"
 36  37                             time: "04:00" 38                             img: "../../static/day/04.png" 39                             temp: "4°C"
 40  41  42                             time: "05:00" 43                             img: "../../static/day/05.png" 44                             temp: "5°C"
 45  46                             time: "06:00" 47                             img: "../../static/day/06.png" 48                             temp: "6°C"
 49  50  51                             time: "07:00" 52                             img: "../../static/day/07.png" 53                             temp: "7°C"
 54  55                             time: "08:00" 56                             img: "../../static/day/08.png" 57                             temp: "8°C"
 58  59  60                             time: "09:00" 61                             img: "../../static/day/09.png" 62                             temp: "9°C"
 63  64                             time: "10:00" 65                             img: "../../static/day/10.png" 66                             temp: "10°C"
 67  68  69                             time: "11:00" 70                             img: "../../static/day/11.png" 71                             temp: "11°C"
 72  73                             time: "12:00" 74                             img: "../../static/day/12.png" 75                             temp: "12°C"
 76  77  78                             time: "13:00" 79                             img: "../../static/day/13.png" 80                             temp: "13°C"
 81  82                             time: "14:00" 83                             img: "../../static/day/14.png" 84                             temp: "14°C"
 85  86  87                             time: "15:00" 88                             img: "../../static/day/15.png" 89                             temp: "15°C"
 90  91                             time: "16:00" 92                             img: "../../static/day/16.png" 93                             temp: "16°C"
 94  95  96                             time: "17:00" 97                             img: "../../static/day/17.png" 98                             temp: "17°C"
 99 100                             time: "18:00"101                             img: "../../static/day/18.png"102                             temp: "18°C"
103 104 105                             time: "19:00"106                             img: "../../static/day/19.png"107                             temp: "19°C"
108 109                             time: "20:00"110                             img: "../../static/day/20.png"111                             temp: "20°C"
112 113 114                             time: "21:00"115                             img: "../../static/day/21.png"116                             temp: "21°C"
117 118                             time: "22:00"119                             img: "../../static/day/22.png"120                             temp: "22°C"
121 122 123                             time: "23:00"124                             img: "../../static/day/23.png"125                             temp: "23°C"
126                         }
127                     ],1)">128                     day_list: [{
129                             day: "10月31日"130                             week: "昨天"131                             img: "../../static/night/00.png"132                             temp: "26°C/21°C"
133 134 135                             day: "11月01日"136                             week: "今天"137                             img: "../../static/night/01.png"138                             temp: "22°C/11°C"
139 140 141                             day: "11月02日"142                             week: "明天"143                             img: "../../static/night/03.png"144                             temp: "12°C/11°C"
145 146 147                             day: "11月03日"148                             week: "星期二"149                             img: "../../static/night/04.png"150                             temp: "18°C/01°C"
151 152 153                             day: "11月04日"154                             week: "星期三"155                             img: "../../static/night/06.png"156                             temp: "22°C/02°C"
157 158 159                             day: "11月05日"160                             week: "星期四"161                             img: "../../static/night/07.png"162                             temp: "12°C/02°C"
163 164 165                             day: "11月07日"166                             week: "星期五"167                             img: "../../static/night/09.png"168                             temp: "06°C/02°C"
169 170 171                     air_value:30172                     air_list: [{
173                             name: "PM10"174                             value: 23
175 176 177                             name: "PM2.5"178                             value: 25
179 180 181                             name: "NO2"182                             value: 28
183 184 185                             name: "SO2"186                             value: 5
187 188 189                             name: "O3"190                             value: 35
191 192 193                             name: "CO"194                             value: 0.91
195 196 197                     winddirection:"北风"198                     windpower:"3~4级"
199                 },1)">200                     district:"东城区"201                     temp:13202                     temprange:"12°C / 20°C"203                     tempdesc:"阴 空气很好"204                     updatetime:"22:00"205 206                             time: "00:00"207                             img: "../../static/night/00.png"208                             temp: "0°C"
209 210 211                             time: "01:00"212                             img: "../../static/night/01.png"213                             temp: "1°C"
214 215                             time: "02:00"216                             img: "../../static/night/02.png"217                             temp: "2°C"
218 219 220                             time: "03:00"221                             img: "../../static/night/03.png"222                             temp: "3°C"
223 224                             time: "04:00"225                             img: "../../static/night/04.png"226                             temp: "4°C"
227 228 229                             time: "05:00"230                             img: "../../static/night/05.png"231                             temp: "5°C"
232 233                             time: "06:00"234                             img: "../../static/night/06.png"235                             temp: "6°C"
236 237 238                             time: "07:00"239                             img: "../../static/night/07.png"240                             temp: "7°C"
241 242                             time: "08:00"243                             img: "../../static/night/08.png"244                             temp: "8°C"
245 246 247                             time: "09:00"248                             img: "../../static/night/09.png"249                             temp: "9°C"
250 251                             time: "10:00"252                             img: "../../static/night/10.png"253                             temp: "10°C"
254 255 256                             time: "11:00"257                             img: "../../static/night/11.png"258                             temp: "11°C"
259 260                             time: "12:00"261                             img: "../../static/night/12.png"262                             temp: "12°C"
263 264 265                             time: "13:00"266                             img: "../../static/night/13.png"267                             temp: "13°C"
268 269                             time: "14:00"270                             img: "../../static/night/14.png"271                             temp: "14°C"
272 273 274                             time: "15:00"275                             img: "../../static/night/15.png"276                             temp: "15°C"
277 278                             time: "16:00"279                             img: "../../static/night/16.png"280                             temp: "16°C"
281 282 283                             time: "17:00"284                             img: "../../static/night/17.png"285                             temp: "17°C"
286 287                             time: "18:00"288                             img: "../../static/night/18.png"289                             temp: "18°C"
290 291 292                             time: "19:00"293                             img: "../../static/night/19.png"294                             temp: "19°C"
295 296                             time: "20:00"297                             img: "../../static/night/20.png"298                             temp: "20°C"
299 300 301                             time: "21:00"302                             img: "../../static/night/21.png"303                             temp: "21°C"
304 305                             time: "22:00"306                             img: "../../static/night/22.png"307                             temp: "22°C"
308 309 310                             time: "23:00"311                             img: "../../static/night/23.png"312                             temp: "23°C"
313 314 315 316                             day: "10月31日"317                             week: "昨天"318                             img: "../../static/day/00.png"319                             temp: "6°C/21°C"
320 321 322                             day: "11月01日"323                             week: "今天"324                             img: "../../static/day/01.png"325                             temp: "12°C/11°C"
326 327 328                             day: "11月02日"329                             week: "明天"330                             img: "../../static/day/03.png"331                             temp: "22°C/09°C"
332 333 334                             day: "11月03日"335                             week: "星期二"336                             img: "../../static/day/04.png"337                             temp: "28°C/11°C"
338 339 340                             day: "11月04日"341                             week: "星期三"342                             img: "../../static/day/06.png"343                             temp: "12°C/02°C"
344 345 346                             day: "11月05日"347                             week: "星期四"348                             img: "../../static/day/07.png"349                             temp: "22°C/12°C"
350 351 352                             day: "11月07日"353                             week: "星期五"354                             img: "../../static/night/09.png"355                             temp: "16°C/12°C"
356 357 358                     air_value:67359 360                             name: "PM10"361                             value: 63
362 363 364                             name: "PM2.5"365                             value: 39
366 367 368                             name: "NO2"369                             value: 23
370 371 372                             name: "SO2"373                             value: 5
374 375 376                             name: "O3"377                             value: 65
378 379 380                             name: "CO"381                             value: 0.71
382 383 384                     winddirection:"东南风"385                     windpower:"1~4级"
386                 }]
387 388 389         onLoad() {
390             console.log("测试加载页面")
391 392         onShow(){
393             console.log("页面onshow...."394 395         methods: {
396 
397 398 399 </script>

View Code






    .content {
 #007AFF;
 6     }
 7     swiper{
10     }
    .swiper-item{
        border: #007AFF 1rpx solid;
13     }
14     .weather{
16     }
17 （五）注意事项






<script>
    export default {
        onLaunch: function() {
            console.log('App Launch')
 5         } 6         onShow: function() {
            console.log('App Show')
 8         } 9         onHide: function() {
            console.log('App Hide')
11         }
13 </script>
14 
16     每个页面公共css     uni-page-body,#app {width:100%;height: 100%;}
18      #ifdef APP-PLUS 19     
20      以下样式用于 hello uni-app 演示所需 21     page {
 background-color: #F4F5F6;  font-size: 28rpx; 25          line-height: 1.8; 26     }
27      #endif28 </style>

View Code