如何高效的閱讀uni-app框架？（建議收藏）

時間  2020-01-15
標籤 如何 高效 閱讀 uni app 框架 建議 收藏 简体版
原文   原文鏈接

file

做者 | Jeskson
來源 | 達達前端小酒館css

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配置的，這一點是我作地圖時注意到的內容。vue

file

pages.json:web

{
    "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頁面json

{
  "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-alipaysegmentfault

{
    "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);
})

❤️ 不要忘記留下你學習的腳印 [點贊 收藏 評論]
做者Info：

【做者】：Jeskson

【原創公衆號】：達達前端小酒館。

【轉載說明】：轉載請說明出處，謝謝合做！~

關於目前文章內容即涉及前端，PHP知識點，若是有興趣便可關注，很榮幸，能被您發現，真是慧眼識英！也感謝您的關注，在將來的日子裏，但願可以一直默默的支持我，我也會努力寫出更多優秀的做品。咱們一塊兒成長，從零基礎學編程，將 Web前端領域、數據結構與算法、網絡原理等通俗易懂的呈現給小夥伴。分享 Web 前端相關的技術文章、工具資源、精選課程、熱點資訊。

若本號內容有作得不到位的地方（好比：涉及版權或其餘問題），請及時聯繫咱們進行整改便可，會在第一時間進行處理。

請點贊！由於大家的贊同/鼓勵是我寫做的最大動力！

歡迎關注達達的CSDN！

這是一個有質量，有態度的博客

7d927f18ebd05ea1d505a572393fbc87.jpg

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程