如何高效的閱讀uni-app框架？（建議收藏）
- 2019 年 11 月 28 日
- 筆記
作者 | Jeskson 來源 | 達達前端小酒館
uni-app的框架，配置：page.json，manifest.json，package.json，vue.config.js。腳本，應用程式，main.js。日誌列印，定時器，生命周期，頁面，頁面通訊。
pages.json文件時用來對uni-app進行全局配置的，它是用來寫頁面文件的路徑，窗口樣式，底部的tabbar等，類似於小程式中的app.json的頁面管理。這裡注意的是定位，在小程式中是在app.json的，而在uni-app中式在manifest配置的，這一點是我做地圖時注意到的內容。
{ "pages": [{ "path": "pages/component/index", "style": { "navigationBarTitleText": "組件" } }, { "path": "pages/API/index", "style": { "navigationBarTitleText": "介面" } }, { "path": "pages/component/view/index", "style": { "navigationBarTitleText": "view" } }], "condition": { //模式配置，僅開發期間生效 "current": 0, //當前激活的模式（list 的索引項） "list": [{ "name": "test", //模式名稱 "path": "pages/component/view/index" //啟動頁面，必選 }] }, "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "演示", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8", "usingComponents":{ "collapse-tree-item":"/components/collapse-tree-item" } }, "tabBar": { "color": "#7A7E83", "selectedColor": "#3cc51f", "borderStyle": "black", "backgroundColor": "#ffffff", "height": "50px", "fontSize": "10px", "iconWidth": "24px", "spacing": "3px", "blurEffect": "none|extralight|light|dark", // 模糊效果，使用模糊效果時不要設置背景顏色，否則模糊效果會失效，默認值為none（僅iOS平台支援 HBuilderX 2.4.3+） "list": [{ "pagePath": "pages/component/index", "iconPath": "static/image/icon_component.png", "selectedIconPath": "static/image/icon_component_HL.png", "text": "組件" }, { "pagePath": "pages/API/index", "iconPath": "static/image/icon_API.png", "selectedIconPath": "static/image/icon_API_HL.png", "text": "介面" }], "midButton": { "width": "80px", "height": "50px", "text": "文字", "iconPath": "static/image/midButton_iconPath.png", "iconWidth": "24px", "backgroundImage": "static/image/midButton_backgroundImage.png" } } }globalStyle，設置應用的狀態欄，導航條，標題，窗口背景顏色等。
pages，配置頁面路徑。第一項為應用入口，增加或是減少頁面，都在pages數組中進行修改即可。
┌─pages │ ├─index │ │ └─index.vue │ └─login │ └─login.vue ├─static ├─main.js ├─App.vue ├─manifest.json └─pages.json
{ "pages": [ { "path": "pages/index/index", "style": { ... } }, { "path": "pages/login/login", "style": { ... } } ] }page頁面
{ "pages": [{ "path": "pages/index/index", "style": { "navigationBarTitleText": "首頁",//設置頁面標題文字 "enablePullDownRefresh":true//開啟下拉刷新 } }, ... ] }常見titleNView配置程式碼示例
{ "pages": [{ "path": "pages/index/index", //首頁 "style": { "app-plus": { "titleNView": false //禁用原生導航欄 } } }, { "path": "pages/log/log", //日誌頁面 "style": { "app-plus": { "bounce": "none", //關閉窗口回彈效果 "titleNView": { "buttons": [ //原生標題欄按鈕配置, { "text": "分享" //原生標題欄增加分享按鈕，點擊事件可通過頁面的 onNavigationBarButtonTap 函數進行監聽 } ] } } } }, { "path": "pages/detail/detail", //詳情頁面 "style": { "navigationBarTitleText": "詳情", "app-plus": { "titleNView": { "type": "transparent"//透明漸變導航欄 } } } }, { "path": "pages/search/search", //搜索頁面 "style": { "app-plus": { "titleNView": { "type": "transparent",//透明漸變導航欄 "searchInput": { "backgroundColor": "#fff", "borderRadius": "6px", //輸入框圓角 "placeholder": "請輸入搜索內容", "disabled": true //disable時點擊輸入框不置焦，可以跳到新頁面搜索 } } } } } ... ] }app-plus，h5，mp-alipay
{ "pages": [{ "path": "pages/index/index", //首頁 "style": { "app-plus": { "titleNView": false , //禁用原生導航欄 "subNVues":[{//側滑菜單 "id": "drawer", //subNVue 的 id，可通過 uni.getSubNVueById('drawer') 獲取 "path": "pages/index/drawer.nvue", // nvue 路徑 "style": { //webview style 子集，文檔可暫時開放出來位置，大小相關配置 "position": "popup", //除 popup 外，其他值域參考 5+ webview position 文檔 "width": "50%" } }, {//彈出層 "id": "popup", "path": "pages/index/popup", "style": { "position": "popup", "margin":"auto", "width": "150px", "height": "150px" } }, {//自定義頭 "id": "nav", "path": "pages/index/nav", "style": { "position": "dock", "height": "44px" } }] } } }] }h5：
titleNView,導航欄
pullToRefresh,下拉刷新
tabBar，通過tabBar配置項指定tab欄的表現，以及tab切換時顯示的對應項。
當設置position為top時，將不會顯示icon，tabBar中的list時一個數組，最少配置2個，最多配置5個。
tabbar切換第一次載入時可能渲染不及時，可以在每個tabbar頁面的onLoad生命周期里先彈出一個等待的雪花。當展示過一次tabbar頁面的時候，再次切換tabbar頁面的時候，就只會觸發onShow這個方法，不會觸發onLoad了。
"tabBar": { "color": "#7A7E83", "selectedColor": "#3cc51f", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [{ "pagePath": "pages/component/index", "iconPath": "static/image/icon_component.png", "selectedIconPath": "static/image/icon_component_HL.png", "text": "組件" }, { "pagePath": "pages/API/index", "iconPath": "static/image/icon_API.png", "selectedIconPath": "static/image/icon_API_HL.png", "text": "介面" }] }condition啟動模式配置，開發期間有效。屬性：current僅僅在當前激活的模式有效，list節點的索引值，list啟動模式列表。
"condition": { //模式配置，僅開發期間生效 "current": 0, //當前激活的模式（list 的索引項） "list": [{ "name": "swiper", //模式名稱 "path": "pages/component/swiper/swiper", //啟動頁面，必選 "query": "interval=4000&autoplay=false" //啟動參數，在頁面的onLoad函數裡面得到。 }, { "name": "test", "path": "pages/component/switch/switch" } ] }subPackages分包載入配置，但在5+app中為整包。subPackages節點接收一個數組，每個項都是應用的子包。
┌─pages │ ├─index │ │ └─index.vue │ └─login │ └─login.vue ├─pagesA │ └─list │ └─list.vue ├─pagesB │ └─detail │ └─detail.vue ├─static ├─main.js ├─App.vue ├─manifest.json └─pages.json
{ "pages": [{ "path": "pages/index/index", "style": { ...} }, { "path": "pages/login/login", "style": { ...} }], "subPackages": [{ "root": "pagesA", "pages": [{ "path": "list/list", "style": { ...} }] }, { "root": "pagesB", "pages": [{ "path": "detail/detail", "style": { ...} }] }], "preloadRule": { "pagesA/list/list": { "network": "all", "packages": ["__APP__"] }, "pagesB/detail/detail": { "network": "all", "packages": ["pagesA"] } } }preloadRule分包預載配置，key頁面的路徑，value是進入頁面的預下載配置。
manifest.json文件時應用的配置文件，應用的名稱，圖標，許可權等等。
networkTimeout各類網路請求的超時時間。
package.json文件為uni-app的擴展節點，可以實現自定義的編譯平台。
{ /** package.json其它原有配置 */ "uni-app": {// 擴展配置 "scripts": { "custom-platform": { //自定義編譯平台配置，可通過cli方式調用 "title":"自定義擴展名稱", // 在HBuilderX中會顯示在 運行/發行 菜單中 "BROWSER":"", //運行到的目標瀏覽器，僅當UNI_PLATFORM為h5時有效 "env": {//環境變數 "UNI_PLATFORM": "" //基準平台 }, "define": { //自定義條件編譯 "CUSTOM-CONST": true //自定義條件編譯常量，建議為大寫 } } } } }vue.config.js是一個可選的配置文件
uni.css文件為全局應用的樣式風格。使用時需要在style節點上添加lang="scss"。
<style lang="scss"> </style>
uni.scss變數：
/* 顏色變數 */ /* 行為相關顏色 */ $uni-color-primary: #007aff; $uni-color-success: #4cd964; $uni-color-warning: #f0ad4e; $uni-color-error: #dd524d; /* 文字基本顏色 */ $uni-text-color:#333;//基本色 $uni-text-color-inverse:#fff;//反色 $uni-text-color-grey:#999;//輔助灰色，如載入更多的提示資訊 $uni-text-color-placeholder: #808080; $uni-text-color-disable:#c0c0c0; /* 背景顏色 */ $uni-bg-color:#ffffff; $uni-bg-color-grey:#f8f8f8; $uni-bg-color-hover:#f1f1f1;//點擊狀態顏色 $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩顏色 /* 邊框顏色 */ $uni-border-color:#c8c7cc; /* 尺寸變數 */ /* 文字尺寸 */ $uni-font-size-sm:24rpx; $uni-font-size-base:28rpx; $uni-font-size-lg:32rpx; /* 圖片尺寸 */ $uni-img-size-sm:40rpx; $uni-img-size-base:52rpx; $uni-img-size-lg:80rpx; /* Border Radius */ $uni-border-radius-sm: 4rpx; $uni-border-radius-base: 6rpx; $uni-border-radius-lg: 12rpx; $uni-border-radius-circle: 50%; /* 水平間距 */ $uni-spacing-row-sm: 10px; $uni-spacing-row-base: 20rpx; $uni-spacing-row-lg: 30rpx; /* 垂直間距 */ $uni-spacing-col-sm: 8rpx; $uni-spacing-col-base: 16rpx; $uni-spacing-col-lg: 24rpx; /* 透明度 */ $uni-opacity-disabled: 0.3; // 組件禁用態的透明度 /* 文章場景相關 */ $uni-color-title: #2C405A; // 文章標題顏色 $uni-font-size-title:40rpx; $uni-color-subtitle: #555555; // 二級標題顏色 $uni-font-size-subtitle:36rpx; $uni-color-paragraph: #3F536E; // 文章段落顏色 $uni-font-size-paragraph:30rpx;
app.vue時我們頁面的入口文件。
應用的生命周期：
onLaunch:當uni-app初始化完成時觸發，全局只觸發一次；onShow:當uni-app啟動，或者從後台進入前台顯示時觸發；onHide:當uni-app從前台進入到後台時觸發；onError:當uni-app報錯時觸發；onUniNViewMessage:對nvue頁面發送的數據進行監聽。
<script> export default { onLaunch: function() { console.log('App Launch') }, onShow: function() { console.log('App Show') }, onHide: function() { console.log('App Hide') } } </script>globalData時小程式的機制，在uni-app也是可用。
App.vue配置：
<script> export default { globalData: { text: 'text' } } </script>獲取：
getApp().globalData.text = 'test'
用getApp對象還沒有獲取到，可以用
this.$scope.globalData獲取globalData
main.js時入口文件，時初始化vue實例並使用需要的插件。
import Vue from 'vue' import App from './App' import pageHead from './components/page-head.vue' //引用page-head組件 Vue.config.productionTip = false Vue.component('page-head', pageHead) //全局註冊page-head組件 App.mpType = 'app' const app = new Vue({ ...App }) app.$mount() //掛載Vue實例列印日誌：console向控制台列印日誌資訊，debug向控制台列印debug日誌，log向控制台列印log日誌，info，warn，error分別向控制台列印,info,warn,error日誌。
setTimeout定時器，到時間後執行，clearTimeout取消setTimeout設置的定時器，setInterval()設置一個定時器，clearInterval()取消由setInterval設置的定時器。
應用的生命周期：
onLaunch 當uni-app 初始化完成時觸發，全局只觸發一次
onShow 當 uni-app 啟動，或從後台進入前台顯示
onHide 當 uni-app 從前台進入後台
onError 當 uni-app 報錯時觸發
onUniNViewMessage 對 nvue 頁面發送的數據進行監聽
<script> // 只能在App.vue里監聽應用的生命周期 export default { onLaunch: function() { console.log('App Launch') }, onShow: function() { console.log('App Show') }, onHide: function() { console.log('App Hide') } } </script>頁面生命周期
onLoad 監聽頁面載入
onShow 監聽頁面顯示
onReady 監聽頁面初次渲染完成
onHide 監聽頁面隱藏
onUnload 監聽頁面卸載
onResize 監聽窗口尺寸變化
onPullDownRefresh 監聽用戶下拉動作
onReachBottom 頁面滾動到底部的事件
onTabItemTap 點擊 tab 時觸發，參數為Object
onShareAppMessage 用戶點擊右上角分享
onPageScroll 監聽頁面滾動
onNavigationBarButtonTap 監聽原生標題欄按鈕點擊事件
onBackPress 監聽頁面返回
onNavigationBarSearchInputChanged 監聽原生標題欄搜索輸入框輸入內容變化事件
onNavigationBarSearchInputConfirmed 監聽原生標題欄搜索輸入框搜索事件，用戶點擊軟鍵盤上的「搜索」按鈕時觸發
onNavigationBarSearchInputClicked 監聽原生標題欄搜索輸入框點擊事件
組件生命周期
uni-app 組件支援的生命周期，與vue標準組件的生命周期相同。
beforeCreate 在實例初始化之後被調用 created 在實例創建完成後被立即調用
beforeMount 在掛載開始之前被調用 mounted 掛載到實例上去之後調用
beforeUpdate 數據更新時調用 updated
beforeDestroy 實例銷毀之前調用 destroyed 實例銷毀後調用
getApp() 函數用於獲取當前應用實例
const app = getApp() console.log(app.globalData)
getCurrentPages() 函數用於獲取當前頁面棧的實例
navigateTo, redirectTo 只能打開非 tabBar 頁面。
switchTab 只能打開 tabBar 頁面。
reLaunch 可以打開任意頁面。
getCurrentPages()
獲得的頁面里內置了一個方法 $getAppWebview() 可以得到當前webview的對象實例
getCurrentPages()
可以得到所有頁面對象，然後根據數組，可以取指定的頁面webview對象
uni.$emit
觸發全局的自定事件
uni.$on
監聽全局的自定義事件
uni.$once
監聽全局的自定義事件，事件可以由 uni.$emit 觸發，但是只觸發一次
uni.$off移除全局自定義事件監聽器
uni.$emit('update',{msg:'頁面更新'})uni.$on('update',function(data){ console.log('監聽到事件來自 update ，攜帶參數 msg 為：' + data.msg); })uni.$once('update',function(data){ console.log('監聽到事件來自 update ，攜帶參數 msg 為：' + data.msg); })
