概述
在實際作業中，App既需要支持Android手機，又要支持IOS手機，還要支持微信小程式，公眾號等，面對這樣的需求，是否勞心費力，苦不堪言，還要考慮各平臺的兼容性，現在uni-app以“開發一次，多端覆寫”的理念，海納百川，求同存異，受到大多數開發者的青睞，uni-app是采用vue.js作為開發前端應用的框架，開發者撰寫一套代碼，可發布到iOS、Android、Web（回應式）、以及各種小程式（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應用等多個平臺，本文以一個天氣預報的小例子，簡述uni-app的開發步驟，
為什么選擇uni-app ？
- uni-app實作了一套代碼，同時運行到多個平臺，
- uni-app在開發者數量、案例、跨端抹平度、擴展靈活性、性能體驗、周邊生態、學習成本、開發成本等8大關鍵指標上擁有更強的優勢，
- DCloud為uni-app開發提供了開發利器HBuilderX，以其輕巧極速，強大的語法提示，清爽護眼，和專為vue量身打造的優勢，吸引了大多數的開發者，
uni-app目錄結構
一個uni-app工程，默認包含如下目錄及檔案，如下圖所示：
uni-app應用生命周期
uni-app 支持如下應用生命周期函式：
| 函式名 | 說明 |
|---|---|
| onLaunch | 當uni-app 初始化完成時觸發（全域只觸發一次） |
| onShow | 當 uni-app 啟動，或從后臺進入前臺顯示 |
| onHide | 當 uni-app 從前臺進入后臺 |
| onError | 當 uni-app 報錯時觸發 |
| onUniNViewMessage | 對 nvue 頁面發送的資料進行監聽，可參考 nvue 向 vue 通訊 |
| onUnhandledRejection | 對未處理的 Promise 拒絕事件監聽函式（2.8.1+） |
| onPageNotFound | 頁面不存在監聽函式 |
| onThemeChange | 監聽系統主題變化 |
注意：應用生命周期僅可在App.vue中監聽，在其它頁面監聽無效，
uni-app頁面生命周期
uni-app 支持如下頁面生命周期函式：
|
函式名 | 說明 |
|---|---|
| onLoad | 監聽頁面加載，其引數為上個頁面傳遞的資料，引數型別為Object（用于頁面傳參），參考示例 |
| onShow | 監聽頁面顯示，頁面每次出現在螢屏上都觸發，包括從下級頁面點回傳露出當前頁面 |
| onReady | 監聽頁面初次渲染完成，注意如果渲染速度快，會在頁面進入影片完成前觸發 |
| onHide | 監聽頁面隱藏 |
| onUnload | 監聽頁面卸載 |
| onResize | 監聽視窗尺寸變化 |
| onPullDownRefresh | 監聽用戶下拉動作，一般用于下拉重繪 |
| onReachBottom | 頁面上拉觸底事件的處理函式 |
| onTabItemTap | 點擊 tab 時觸發，引數為Object，具體見下方注意事項 |
| onShareAppMessage | 用戶點擊右上角分享 |
| onPageScroll | 監聽頁面滾動，引數為Object |
| onNavigationBarButtonTap | 監聽原生標題欄按鈕點擊事件，引數為Object |
| onBackPress |
監聽頁面回傳，回傳 event = {from:backbutton、 navigateBack} ，backbutton 表示來源是左上角回傳按鈕或 android 回傳鍵；navigateBack表示來源是 uni.navigateBack ； |
| onNavigationBarSearchInputChanged | 監聽原生標題欄搜索輸入框輸入內容變化事件 |
| onNavigationBarSearchInputConfirmed | 監聽原生標題欄搜索輸入框搜索事件，用戶點擊軟鍵盤上的“搜索”按鈕時觸發， |
| onNavigationBarSearchInputClicked | 監聽原生標題欄搜索輸入框點擊事件 |
| onShareTimeline | 監聽用戶點擊右上角轉發到朋友圈 |
| onAddToFavorites | 監聽用戶點擊右上角收藏 |
關于其他uni-app介紹，可以參考uni-app官網
示例效果圖
本次開發是一個天氣預報的小例子，在Chrome瀏覽器里面如下圖所示：
在Android手機上如下所示：
原始碼分析
在uni-app開發小例子時，為了代碼的復用，自定義三個組件，包括，風車組件，圓形進度球組件，天氣組件，原始碼分別如下：
（一）圓形進度球組件
組件包含三部分，分別是頁面(template)，腳本(JavaScript)，樣式(CSS)，原始碼如下：
頁面(template)代碼如下：
1 <template> 2 <view class="content"> 3 <view class="progress"> 4 <view class="progress_outer"> 5 <view class="progress_inner"></view> 6 <view class="progress_masker" :style="maskStyle"></view> 7 </view> 8 <view class="progress_value">{{cvalue}}%</view> 9 </view> 10 </view> 11 </template>View Code
腳本(JavaScript)代碼如下：
1 <script> 2 export default { 3 props: { 4 cvalue: { 5 // 進度條百分比 6 type: Number, 7 default: 10, 8 }, 9 }, 10 11 data() { 12 return { 13 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: 200rpx; 5 display: block; 6 box-sizing: border-box; 7 } 8 .progress { 9 position: relative; 10 width: 200rpx; 11 height: 200rpx; 12 padding: 0; 13 box-sizing: border-box; 14 } 15 .progress_outer 16 { 17 height:100%; 18 width:100%; 19 background-color:gray; 20 border-radius:calc(100%/2); 21 border:5px solid rgba(0,0,0, 0.1); 22 padding:0; 23 box-shadow: 0px 2px 4px #555555; 24 -webkit-box-shadow: 0px 2px 4px #555555; 25 -moz-box-shadow: 0px 2px 4px #555555; 26 position: absolute; 27 box-sizing: border-box; 28 overflow: hidden; 29 30 } 31 .progress_inner 32 { 33 height:100%; 34 width:100%; 35 border:1px solid yellow; 36 border-radius:calc(100%/2); 37 position:absolute; 38 background-color:white; 39 text-align:center; 40 box-sizing: border-box; 41 42 } 43 .progress_masker 44 { 45 height:100%; 46 width:100%; 47 background: -webkit-gradient(linear,center top,center bottom,from(#0ff), to(#0f0)); 48 background: -moz-linear-gradient( top,#fff,#0f0); 49 background: -o-linear-gradient( top,#fff,#0f0); 50 position: absolute; 51 box-sizing: border-box; 52 } 53 .progress_value 54 { 55 width:100%; 56 color:black; 57 font-weight:bolder; 58 background-color:transparent; 59 text-align:center; 60 position: absolute; 61 margin-top: 90rpx; 62 } 63 </style>View Code
（二）風車組件
風車組件包含兩部分，分別是頁面(template)，樣式(CSS)，原始碼如下：
頁面(template)代碼如下：
1 <template> 2 <view> 3 <view class="wind_mill"> 4 <view class="cicle"></view> 5 <view class="vane"> 6 <view class="vane1"></view> 7 <view class="vane2"></view> 8 <view class="vane3"></view> 9 </view> 10 <view class="blade"> 11 12 </view> 13 </view> 14 </view> 15 </template>View Code
樣式(CSS)代碼如下：
1 <style> 2 .wind_mill{ 3 width: 200rpx; 4 height: 220rpx; 5 /* background-color: rgba(25, 83, 157, 0.5); */ 6 position: relative; 7 } 8 @keyframes vanflash{ 9 from{transform: rotate(0deg); transform-origin: center;} 10 to{transform: rotate(360deg);transform-origin: center;} 11 } 12 .vane{ 13 width: 200rpx; 14 height: 200rpx; 15 position: relative; 16 animation-name: vanflash; 17 animation-duration: 5s; 18 animation-iteration-count: infinite; 19 -webkit-animation-name: vanflash; 20 -webkit-animation-duration: 5s; 21 -webkit-animation-iteration-count: infinite; 22 } 23 .vane1{ 24 display: block; 25 width: 80rpx; 26 height: 4rpx; 27 background-color: #FFFFFF; 28 border-radius: 5rpx; 29 position: absolute; 30 left: 100rpx; 31 top:100rpx; 32 transform: rotate(0deg); 33 transform-origin:left; 34 -webkit-transform:rotate(0deg); 35 36 } 37 .vane2{ 38 width: 80rpx; 39 height: 4rpx; 40 background-color: #FFFFFF; 41 position: absolute; 42 left: 100rpx; 43 top:100rpx; 44 border-radius: 5rpx; 45 transform: rotate(120deg); 46 transform-origin:left; 47 -webkit-transform:rotate(120deg); 48 } 49 .vane3{ 50 width: 80rpx; 51 height: 4rpx; 52 background-color: #FFFFFF; 53 position: absolute; 54 left: 100rpx; 55 top:100rpx; 56 border-radius: 5rpx; 57 transform: rotate(240deg); 58 transform-origin:left; 59 -webkit-transform:rotate(240deg); 60 } 61 .cicle{ 62 position: absolute; 63 left: 90rpx; 64 top:90rpx; 65 background-color: #FFFFFF; 66 width: 20rpx; 67 height: 20rpx; 68 border-radius: 16rpx; 69 } 70 .blade{ 71 width: 120rpx; 72 height: 10rpx; 73 background-color: #FFFFFF; 74 position: absolute; 75 left: 100rpx; 76 top:100rpx; 77 border-radius: 5rpx; 78 transform: rotate(90deg); 79 transform-origin:left; 80 -webkit-transform:rotate(90deg); 81 } 82 </style>View Code
（三）天氣組件
天氣組件，參考了前面兩個組件，并有自定義資料內容，如下所示：
頁面(template)代碼如下：
1 <template> 2 <scroll-view scroll-y="true" class="main"> 3 <view class="current"> 4 <view class="district">{{district}}</view> 5 <view class="temp">{{temp}}°C</view> 6 <view class="temp_range">{{temprange}}</view> 7 <view class="temp_desc">{{tempdesc}}</view> 8 <br> 9 <view class="temp_src"> 10 <view class="temp_src_left">中國氣象</view> 11 <view class="temp_src_right">上次更新時間：{{updatetime}}</view> 12 </view> 13 </view> 14 <scroll-view scroll-x="true"> 15 <view class="hour" enable-flex="true"> 16 <view class="each_hour" v-for="item in timelist"> 17 <view class="each_hour_time">{{item.time}}</view> 18 <image :src="item.img" mode="scaleToFill" class="each_hour_img" ></image> 19 <view class="each_hour_temp">{{item.temp}}</view> 20 </view> 21 </view> 22 </scroll-view> 23 24 <view class="sevenday"> 25 <view class="each_day" v-for="item in daylist"> 26 <view class="each_day_text"> 27 {{item.day}} {{item.week}} 28 </view> 29 <image class="each_day_img" :src="item.img" mode=""></image> 30 <view class="each_day_temp">{{item.temp}}</view> 31 </view> 32 33 </view> 34 <view class="air"> 35 <view class="air_title"> 36 <view class="" style="flex: 1;">空氣質量</view> 37 <view class="" style="text-align: right;flex: 1;">更多></view> 38 </view> 39 <view class="air_body"> 40 <view class="air_left"> 41 <airprogress class="airprogress" :cvalue="airvalue"></airprogress> 42 </view> 43 <view class="air_right"> 44 <view class="air_content" v-for="item in airlist"> 45 <view class="air_content_name">{{item.name}}</view> 46 <view class="air_content_value">{{item.value}}</view> 47 </view> 48 </view> 49 </view> 50 </view> 51 <view class="wind"> 52 <view class="wind_title"> 53 <view class="" style="flex: 1;">風向風力</view> 54 <view class="" style="text-align: right;flex: 1;">更多></view> 55 </view> 56 <view class="wind_body"> 57 <view class="wind_left"> 58 <windmill class="wind01"></windmill> 59 <windmill class="wind02"></windmill> 60 </view> 61 <view class="wind_right"> 62 <view class="wind_right_direction"> 63 <view style="flex: 1;text-align: left;">風向</view> 64 <view style="flex: 1;text-align: left;">{{winddirection}}</view> 65 </view> 66 <view class="wind_right_power"> 67 <view style="flex: 1;text-align: left;">風力</view> 68 <view style="flex: 1;text-align: left;">{{windpower}}</view> 69 </view> 70 </view> 71 </view> 72 </view> 73 <view class="provider">provide by Alan.hsiang</view> 74 </scroll-view> 75 </template>View Code
腳本(JavaScript)代碼如下：
1 <script> 2 import windmill from "../windmill/windmill.vue" 3 import airprogress from "../airprogress/airprogress.vue" 4 export default { 5 components: { 6 windmill, 7 airprogress 8 }, 9 props:{ 10 district:{ 11 type:String, 12 required:true, 13 }, 14 temp:{ 15 type:Number, 16 default:0 17 }, 18 temprange:{ 19 type:String, 20 21 }, 22 tempdesc:{ 23 type:String, 24 25 }, 26 updatetime:{ 27 type:String, 28 29 }, 30 timelist:{ 31 type:Array, 32 33 }, 34 daylist:{ 35 type:Array, 36 37 }, 38 airvalue:{ 39 type:Number, 40 default:10, 41 42 }, 43 airlist:{ 44 type:Array, 45 46 }, 47 winddirection:{ 48 type:String, 49 50 }, 51 windpower:{ 52 type:String, 53 54 } 55 }, 56 data() { 57 return { 58 59 60 }; 61 }, 62 } 63 </script>View Code
樣式(CSS)代碼如下：
1 <style> 2 view { 3 /* border: #007AFF 1rpx solid; */ 4 font-family: Arial, Helvetica, sans-serif; 5 font-size: 28rpx; 6 padding: 2rpx; 7 } 8 9 .main { 10 width: 100%; 11 height: 100%; 12 padding: 4rpx; 13 background-color: rgba(25, 83, 157, 0.5); 14 color: #FFFFFF; 15 } 16 17 .current { 18 display: flex; 19 flex-direction: column; 20 vertical-align: middle; 21 justify-content: center; 22 height: 400rpx; 23 border-bottom: #F1F1F1 2rpx solid; 24 } 25 26 .current view { 27 margin-bottom: 4rpx; 28 } 29 30 .district { 31 height: 60rpx; 32 font-size: 45rpx; 33 text-align: center; 34 35 } 36 37 .temp { 38 height: 90rpx; 39 font-size: 70rpx; 40 text-align: center; 41 line-height: 1.5; 42 } 43 44 .temp_range { 45 height: 60rpx; 46 font-size: 40rpx; 47 text-align: center; 48 line-height: 1.5; 49 } 50 51 .temp_desc { 52 height: 50rpx; 53 font-size: 30rpx; 54 text-align: center; 55 line-height: 1.5; 56 } 57 58 .temp_src { 59 display: flex; 60 flex-direction: row; 61 text-align: justify; 62 vertical-align: bottom; 63 } 64 65 .temp_src_left {} 66 67 .temp_src_right { 68 flex: 1; 69 text-align: right; 70 } 71 72 .top { 73 display: flex; 74 flex-direction: column; 75 } 76 77 .hour { 78 display: flex; 79 flex-direction: row; 80 text-align: center; 81 font-size: small; 82 margin-top: 4rpx; 83 margin-bottom: 4rpx; 84 border-bottom: #F1F1F1 2rpx solid; 85 } 86 .each_hour{ 87 margin-left: 6rpx; 88 } 89 .each_hour_img{ 90 width: 50rpx; 91 height: 50rpx; 92 } 93 .sevenday { 94 display: flex; 95 flex-direction: column; 96 } 97 98 .each_day { 99 display: flex; 100 flex-direction: row; 101 text-align: center; 102 margin-bottom: 2rpx; 103 border-bottom: #F1F1F1 2rpx solid; 104 105 } 106 107 108 .each_day_text { 109 flex: 1; 110 text-align: left; 111 line-height: 2; 112 } 113 114 115 .each_day_img { 116 width: 70rpx; 117 height: 70rpx; 118 } 119 120 .each_day_temp { 121 flex: 1; 122 text-align: right; 123 line-height: 2; 124 } 125 126 .air { 127 display: flex; 128 flex-direction: column; 129 margin: 6rpx; 130 } 131 132 .air_title { 133 display: flex; 134 flex-direction: row; 135 font-size: small; 136 } 137 138 .air_body { 139 display: flex; 140 flex-direction: row; 141 } 142 143 .air_left { 144 flex: 1; 145 display: inline-block; 146 text-align: center; 147 margin-top: 6rpx; 148 } 149 .airprogress{ 150 position: absolute; 151 left: 40rpx; 152 } 153 .air_right { 154 flex: 1; 155 display: flex; 156 flex-direction: column; 157 } 158 159 .air_content { 160 display: flex; 161 flex-direction: row; 162 } 163 164 .air_content_name { 165 flex: 1; 166 font-size: 20rpx; 167 } 168 169 .air_content_value { 170 flex: 1; 171 font-size: 20rpx; 172 } 173 174 175 .wind{ 176 display: flex; 177 flex-direction: column; 178 height: 260rpx; 179 margin: 6rpx; 180 } 181 .wind_title{ 182 display: flex; 183 flex-direction: row; 184 } 185 .wind_body{ 186 display: flex; 187 flex-direction: row; 188 } 189 .wind_left{ 190 flex: 1; 191 position: relative; 192 height: 150rpx; 193 } 194 .wind_right{ 195 flex: 1; 196 display: flex; 197 flex-direction: column; 198 } 199 .wind_right_direction{ 200 flex: 0.5; 201 display: flex; 202 flex-direction: row; 203 } 204 .wind_right_power{ 205 flex: 1; 206 display: flex; 207 flex-direction: row; 208 } 209 .wind_left_img{ 210 width: 140rpx; 211 height: 140rpx; 212 } 213 .wind01{ 214 position: absolute; 215 top: 10rpx; 216 left: 0rpx; 217 } 218 .wind02{ 219 position: absolute; 220 top: -20rpx; 221 left: 90rpx; 222 } 223 .provider{ 224 text-align: center; 225 } 226 </style>View Code
（四）頁面呼叫組件
當組件定義完成，就可以在頁面參考組件，如下所示：
本例采用swiper來實作左右滑動功能，頁面(template)原始碼如下：
1 <template> 2 <view class="content"> 3 <swiper :indicator-dots="showIndicatorDots" indicator-color="#FFFFFF" indicator-active-color="#FF0000" :autoplay="isAutoPlay"> 4 <swiper-item v-for="(item,index) in weather_content"> 5 <weather :id="index" 6 :district="item.district" 7 :temp="item.temp" 8 :tempdesc="item.tempdesc" 9 :temprange="item.temprange" 10 :updatetime="item.updatetime" 11 :timelist="item.time_list" 12 :daylist="item.day_list" 13 :airvalue="item.air_value" 14 :airlist="item.air_list" 15 :winddirection="item.winddirection" 16 :windpower="item.windpower" 17 class="weather"> 18 19 </weather> 20 </swiper-item> 21 </swiper> 22 </view> 23 </template>View Code
本例通過腳本造了一些資料，沒有進行介面呼叫，腳本(JavaScript)代碼如下：
1 <script> 2 import weather from "@/components/weather/weather.vue" 3 export default { 4 components: { 5 weather 6 }, 7 data() { 8 return { 9 title: 'Hello', 10 showIndicatorDots:true, 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 }, 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 ], 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:30, 172 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 },{ 200 district:"東城區", 201 temp:13, 202 temprange:"12°C / 20°C", 203 tempdesc:"陰 空氣很好", 204 updatetime:"22:00", 205 time_list: [{ 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 day_list: [{ 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:67, 359 air_list: [{ 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 onl oad() { 390 console.log("測驗加載頁面") 391 }, 392 onShow(){ 393 console.log("頁面onshow....") 394 }, 395 methods: { 396 397 } 398 } 399 </script>View Code
樣式(CSS)代碼如下：
1 <style> 2 .content { 3 width: 100%; 4 height: 100%; 5 color: #007AFF; 6 } 7 swiper{ 8 width: 100%; 9 height: 100%; 10 } 11 .swiper-item{ 12 border: #007AFF 1rpx solid; 13 } 14 .weather{ 15 height: 100%; 16 } 17 </style>View Code
（五）注意事項
例子雖小，開發時也會踩坑，具體事項如下：
1. 開發程序中，在運行到Chrome瀏覽器，一切正常，但是當運行到Android真機時，頁面除了導航條顯示，其他一片空白，后來發現，需要在App.vue中定義頁面的高度，才可以正常顯示，App.vue原始碼如下所示：
1 <script> 2 export default { 3 onLaunch: function() { 4 console.log('App Launch') 5 }, 6 onShow: function() { 7 console.log('App Show') 8 }, 9 onHide: function() { 10 console.log('App Hide') 11 } 12 } 13 </script> 14 15 <style> 16 /*每個頁面公共css */ 17 uni-page-body,#app {width:100%;height: 100%;} 18 /* #ifdef APP-PLUS */ 19 20 /* 以下樣式用于 hello uni-app 演示所需 */ 21 page { 22 /* background-color: #F4F5F6; */ 23 height: 100%; 24 /* font-size: 28rpx; */ 25 /* line-height: 1.8; */ 26 } 27 /* #endif*/ 28 </style>View Code
2. 在開發程序中，最初圓形進度條是采用svg進行開發，在Chrome瀏覽器顯示正常，但是在手機App上顯示不出來，并造成頁面顯示一大片空白，后來不得已采用css實作，
備注
次北固山下
【作者】王灣 【朝代】唐
客路青山外，行舟綠水前，
潮平兩岸闊，風正一帆懸，
海日生殘夜，江春入舊年，
鄉書何處達？歸雁洛陽邊，
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/214434.html
標籤：其他