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

概述

在实际工作中,App既需要支持Android手机,又要支持IOS手机,还要支持微信小程序,公众号等,面对这样的需求,是否劳心费力,苦不堪言,还要考虑各平台的兼容性。现在uni-app以“开发一次,多端覆盖”的理念,海纳百川,求同存异,受到大多数开发者的青睐。uni-app是采用vue.js作为开发前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。本文以一个天气预报的小例子,简述uni-app的开发步骤。

为什么选择uni-app ?

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

uni-app目录结构

一个uni-app工程,默认包含如下目录及文件,如下图所示:

 

uni-app应用生命周期

uni-app 支持如下应用生命周期函数:

 

 注意:应用生命周期仅可在App.vue中监听,在其它页面监听无效。

uni-app页面生命周期

uni-app 支持如下页面生命周期函数:

 

 关于其他uni-app介绍,可以参考uni-app官网

示例效果图

 本次开发是一个天气预报的小例子,在Chrome浏览器里面如下图所示:

 在Android手机上如下所示:

源码分析

 在uni-app开发小例子时,为了代码的复用,自定义三个组件,包括,风车组件,圆形进度球组件,天气组件。源码分别如下:

(一)圆形进度球组件

组件包含三部分,分别是页面(template),脚本(JavaScript),样式(CSS),源码如下:

页面(template)代码如下:

 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

脚本(JavaScript)代码如下:

 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

样式(CSS)代码如下:

 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

(二)风车组件

风车组件包含两部分,分别是页面(template),样式(CSS),源码如下:

页面(template)代码如下:

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

 样式(CSS)代码如下:

    .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 (三)天气组件

天气组件,引用了前面两个组件,并有自定义数据内容,如下所示:

页面(template)代码如下:

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

脚本(JavaScript)代码如下:

 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

样式(CSS)代码如下:

  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来实现左右滑动功能,页面(template)源码如下:

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

本例通过脚本造了一些数据,没有进行接口调用,脚本(JavaScript)代码如下:

  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

样式(CSS)代码如下:

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

例子虽小,开发时也会踩坑,具体事项如下:

1. 开发过程中,在运行到Chrome浏览器,一切正常,但是当运行到Android真机时,页面除了导航条显示,其他一片空白,后来发现,需要在App.vue中定义页面的高度,才可以正常显示。App.vue源码如下所示:

<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

2. 在开发过程中,最初圆形进度条是采用svg进行开发,在Chrome浏览器显示正常,但是在手机App上显示不出来,并造成页面显示一大片空白,后来不得已采用css实现。

备注

次北固山下
【作者】王湾  【朝代】唐 
客路青山外,行舟绿水前。
潮平两岸阔,风正一帆悬。
海日生残夜,江春入旧年。
乡书何处达?归雁洛阳边。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


文章浏览阅读52次。1.0.0版本 只需修改API接口即可 接口位置:/api/request.js 可以二开自行开发,或直接引用组件。
文章浏览阅读820次。在uni-app和vue3中,我们可以封装全局函数来复用代码。以上就是在uni-app和vue3中封装全局函数的详细完整的方法。_uniapp vue3 vue.prototype
文章浏览阅读671次,点赞22次,收藏6次。整理在Uniapp应用开发中遇到的问题、错误代码与解决方案。
文章浏览阅读122次。【代码】Uniapp Vue3 父组件给子组件传值。_uniapp 父级组件改变子组件值
文章浏览阅读765次。包括数据绑定和计算属性、条件渲染和列表渲染、事件处理、表单输入处理、生命周期钩子、自定义指令和过滤器、路由和导航以及状态管理(如Vuex)
文章浏览阅读129次。Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件_uniapp小程序端tabbar跳转插件
文章浏览阅读1k次,点赞20次,收藏7次。uniapp Vue3 日历 可签到 跳转_uniapp vue3 日历
文章浏览阅读479次。在uni-app中,我们可以使用Vue3的全局API来挂载函数到全局。将全局函数挂载到Vue实例上。这样,我们就可以在任何组件中通过。文件中引入了Vue3和我们的全局函数。在这个例子中,我们首先在。来调用这个全局函数了。_uniapp vue3挂在全局变量
文章浏览阅读316次。包含 首页、社区、关于、我的、预约、订购、选购、话题、主题、收货地址、购物车、系统通知、会员卡、优惠券、积分、储值金、订单信息、积分、充值、礼品、首饰等_uniapp婚恋模板
文章浏览阅读419次。了解uni-app是什么,它的优势和适用场景,以及它作为一个跨平台框架的基本概念。如何安装uni-app,包括环境配置和项目创建等步骤。如何进行uni-app项目的目录结构和代码规范的了解,这对于后续的项目开发至关重要。如何进行uni-app项目的打包和发布,以完成从开发到上线的整个过程。实战项目,通过实际操作案例来巩固和应用所学知识,提升解决实际问题的能力。了解HBuilderX的基本概念和主要特点,以及它与uni-app开发的关系。
文章浏览阅读144次。位置:uni_modules/TC-choujiang/components/TC-choujiang/TC-choujiang。注意 :不用管pages目录内文件,因为已经在components内创建组件,直接引用即可。为了防止别人修改抽奖几率,所以写在了云函数(云函数名称jishu)中,大家可以自行修改。里面的商品图片和被抽出商品跳转页面按照实际情况进行修改。商品图片可以从数据库中获取进行赋值即可。调试时请选择 连接云端云函数 进行调试。Uniapp 横向滚动抽奖页面 组件。_uniapp 横向抽奖
文章浏览阅读112次。开发中使用媒体查询来适配大屏小屏,match-media是一个可适配不同屏幕的基本视图组件。 可以指定一组 media query 媒体查询规则,满足查询条件时,这个组件才会被展示。_移动端match-media
文章浏览阅读33次。【代码】Uniapp Vue3 子组件给父组件传值。
文章浏览阅读91次。全端支持,只需引用组件,更改内容即可_uniapp滚动组件
文章浏览阅读26次。【代码】uniapp Vue2 子组件给父组件传值。
文章浏览阅读177次。微信隐私保护弹出框 隐私协议弹出框,微信隐私保护弹出框,支持vue2和vue3_uninapp 实现微信的隐私弹窗
文章浏览阅读82次。uniapp各类按钮,方便大家复制粘贴使用,提高大家的效率。_uniapp button 图片
文章浏览阅读531次。酷炫钱包页面模板 直接引用_uniapp 钱包页面
文章浏览阅读544次。uniapp 微信小程序登录_uniapp 引入wx.login
文章浏览阅读922次。在这个例子中,我们将所有以’/api’开头的请求代理到’http://localhost:3000’。这样,我们就可以在本地开发环境中访问后端服务器了。在uni-app中,我们可以使用vue.config.js文件来配置跨域(代理)。注意:这个配置只在开发环境中生效,生产环境需要另外配置。_uniapp 代理