image

uni-app的框架背镇，配置：page.json咬展，manifest.json泽裳，package.json，vue.config.js破婆。腳本涮总，應(yīng)用程序，main.js荠割。日志打印妹卿，定時器，生命周期蔑鹦，頁面夺克，頁面通訊。

pages.json文件時用來對uni-app進行全局配置的嚎朽，它是用來寫頁面文件的路徑铺纽，窗口樣式，底部的tabbar等哟忍，類似于小程序中的app.json的頁面管理狡门。這里注意的是定位，在小程序中是在app.json的锅很，而在uni-app中式在manifest配置的其馏，這一點是我做地圖時注意到的內(nèi)容。

image

pages.json:

{
    "pages": [{
        "path": "pages/component/index",
        "style": {
            "navigationBarTitleText": "組件"
        }
    }, {
        "path": "pages/API/index",
        "style": {
            "navigationBarTitleText": "接口"
        }
    }, {
        "path": "pages/component/view/index",
        "style": {
            "navigationBarTitleText": "view"
        }
    }],
    "condition": { //模式配置爆安，僅開發(fā)期間生效
        "current": 0, //當(dāng)前激活的模式（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", // 模糊效果，使用模糊效果時不要設(shè)置背景顏色扔仓，否則模糊效果會失效褐奥，默認值為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，設(shè)置應(yīng)用的狀態(tài)欄翘簇，導(dǎo)航條撬码，標題，窗口背景顏色等版保。

pages呜笑，配置頁面路徑。第一項為應(yīng)用入口彻犁，增加或是減少頁面蹈垢，都在pages數(shù)組中進行修改即可。

┌─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": "首頁",//設(shè)置頁面標題文字
        "enablePullDownRefresh":true//開啟下拉刷新
      }
    },
    ...
  ]
}

常見titleNView配置代碼示例

{
    "pages": [{
            "path": "pages/index/index", //首頁
            "style": {
                "app-plus": {
                    "titleNView": false //禁用原生導(dǎo)航欄
                }
            }
        }, {
            "path": "pages/log/log", //日志頁面
            "style": {
                "app-plus": {
                    "bounce": "none", //關(guān)閉窗口回彈效果
                    "titleNView": {
                        "buttons": [ //原生標題欄按鈕配置,
                            {
                                "text": "分享" //原生標題欄增加分享按鈕袖裕，點擊事件可通過頁面的 onNavigationBarButtonTap 函數(shù)進行監(jiān)聽
                            }
                        ]
                    }
                }
            }
        }, {
            "path": "pages/detail/detail", //詳情頁面
            "style": {
                "navigationBarTitleText": "詳情",
                "app-plus": {
                    "titleNView": {
                        "type": "transparent"http://透明漸變導(dǎo)航欄
                    }
                }
            }
        }, {
            "path": "pages/search/search", //搜索頁面
            "style": {
                "app-plus": {
                    "titleNView": {
                        "type": "transparent",//透明漸變導(dǎo)航欄
                        "searchInput": {
                            "backgroundColor": "#fff",
                            "borderRadius": "6px", //輸入框圓角
                            "placeholder": "請輸入搜索內(nèi)容",
                            "disabled": true //disable時點擊輸入框不置焦，可以跳到新頁面搜索
                        }
                    }
                }
            }
        }
        ...
    ]
}

app-plus溉瓶，h5急鳄，mp-alipay

{
    "pages": [{
        "path": "pages/index/index", //首頁
        "style": {
            "app-plus": {
                "titleNView": false , //禁用原生導(dǎo)航欄
                "subNVues":[{//側(cè)滑菜單
                    "id": "drawer", //subNVue 的 id谤民，可通過 uni.getSubNVueById('drawer') 獲取
                    "path": "pages/index/drawer.nvue", // nvue 路徑
                    "style": { //webview style 子集，文檔可暫時開放出來位置疾宏，大小相關(guān)配置
                        "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,導(dǎo)航欄

pullToRefresh,下拉刷新

tabBar，通過tabBar配置項指定tab欄的表現(xiàn)坎藐，以及tab切換時顯示的對應(yīng)項为牍。

當(dāng)設(shè)置position為top時，將不會顯示icon岩馍，tabBar中的list時一個數(shù)組碉咆，最少配置2個，最多配置5個蛀恩。

tabbar切換第一次加載時可能渲染不及時疫铜，可以在每個tabbar頁面的onLoad生命周期里先彈出一個等待的雪花。當(dāng)展示過一次tabbar頁面的時候双谆，再次切換tabbar頁面的時候壳咕，就只會觸發(fā)onShow這個方法，不會觸發(fā)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啟動模式配置谓厘，開發(fā)期間有效。屬性：current僅僅在當(dāng)前激活的模式有效寸谜，list節(jié)點的索引值竟稳，list啟動模式列表。

"condition": { //模式配置程帕，僅開發(fā)期間生效
    "current": 0, //當(dāng)前激活的模式（list 的索引項）
    "list": [{
            "name": "swiper", //模式名稱
            "path": "pages/component/swiper/swiper", //啟動頁面住练，必選
            "query": "interval=4000&autoplay=false" //啟動參數(shù)，在頁面的onLoad函數(shù)里面得到愁拭。
        },
        {
            "name": "test",
            "path": "pages/component/switch/switch"
        }
    ]
}

subPackages分包加載配置讲逛，但在5+app中為整包。subPackages節(jié)點接收一個數(shù)組岭埠，每個項都是應(yīng)用的子包盏混。

┌─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 分包預(yù)載配置，key頁面的路徑惜论，value是進入頁面的預(yù)下載配置许赃。

manifest.json 文件時應(yīng)用的配置文件，應(yīng)用的名稱馆类，圖標混聊，權(quán)限等等。

networkTimeout 各類網(wǎng)絡(luò)請求的超時時間乾巧。

package.json 文件為uni-app的擴展節(jié)點句喜，可以實現(xiàn)自定義的編譯平臺预愤。

{
    /**
     package.json其它原有配置 
     */
    "uni-app": {// 擴展配置
        "scripts": {
            "custom-platform": { //自定義編譯平臺配置，可通過cli方式調(diào)用
                "title":"自定義擴展名稱", // 在HBuilderX中會顯示在 運行/發(fā)行 菜單中
                "BROWSER":"",  //運行到的目標瀏覽器咳胃，僅當(dāng)UNI_PLATFORM為h5時有效
                "env": {//環(huán)境變量
                    "UNI_PLATFORM": ""  //基準平臺 
                 },
                "define": { //自定義條件編譯
                    "CUSTOM-CONST": true //自定義條件編譯常量植康，建議為大寫
                }
            }
        }    
    }
}

vue.config.js是一個可選的配置文件

uni.css文件為全局應(yīng)用的樣式風(fēng)格。使用時需要在style節(jié)點上添加lang="scss"展懈。

<style lang="scss">
</style>

uni.scss變量：

/* 顏色變量 */

/* 行為相關(guān)顏色 */
$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;//點擊狀態(tài)顏色
$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; // 組件禁用態(tài)的透明度

/* 文章場景相關(guān) */
$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時我們頁面的入口文件。

應(yīng)用的生命周期：

onLaunch: 當(dāng)uni-app初始化完成時觸發(fā)存崖，全局只觸發(fā)一次冻记；
onShow: 當(dāng)uni-app啟動，或者從后臺進入前臺顯示時觸發(fā)金句；
onHide: 當(dāng)uni-app從前臺進入到后臺時觸發(fā)檩赢；
onError: 當(dāng)uni-app報錯時觸發(fā)；
onUniNViewMessage: 對nvue頁面發(fā)送的數(shù)據(jù)進行監(jiān)聽违寞。

<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() 定時器申钩，到時間后執(zhí)行，clearTimeout取消setTimeout設(shè)置的定時器瘪阁，setInterval() 設(shè)置一個定時器撒遣，clearInterval()取消由setInterval設(shè)置的定時器。

應(yīng)用的生命周期：

onLaunch 當(dāng)uni-app 初始化完成時觸發(fā)管跺，全局只觸發(fā)一次

onShow 當(dāng) uni-app 啟動义黎，或從后臺進入前臺顯示

onHide 當(dāng) uni-app 從前臺進入后臺

onError 當(dāng) uni-app 報錯時觸發(fā)

onUniNViewMessage 對 nvue 頁面發(fā)送的數(shù)據(jù)進行監(jiān)聽

<script>
    // 只能在App.vue里監(jiān)聽?wèi)?yīng)用的生命周期
    export default {
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

頁面生命周期

onLoad 監(jiān)聽頁面加載

onShow 監(jiān)聽頁面顯示

onReady 監(jiān)聽頁面初次渲染完成

onHide 監(jiān)聽頁面隱藏

onUnload 監(jiān)聽頁面卸載

onResize 監(jiān)聽窗口尺寸變化

onPullDownRefresh 監(jiān)聽用戶下拉動作

onReachBottom 頁面滾動到底部的事件

onTabItemTap 點擊 tab 時觸發(fā)，參數(shù)為Object

onShareAppMessage 用戶點擊右上角分享

onPageScroll 監(jiān)聽頁面滾動

onNavigationBarButtonTap 監(jiān)聽原生標題欄按鈕點擊事件

onBackPress 監(jiān)聽頁面返回

onNavigationBarSearchInputChanged 監(jiān)聽原生標題欄搜索輸入框輸入內(nèi)容變化事件

onNavigationBarSearchInputConfirmed 監(jiān)聽原生標題欄搜索輸入框搜索事件豁跑，用戶點擊軟鍵盤上的“搜索”按鈕時觸發(fā)

onNavigationBarSearchInputClicked 監(jiān)聽原生標題欄搜索輸入框點擊事件

組件生命周期

uni-app 組件支持的生命周期廉涕，與vue標準組件的生命周期相同。

beforeCreate 在實例初始化之后被調(diào)用created在實例創(chuàng)建完成后被立即調(diào)用

beforeMount 在掛載開始之前被調(diào)用mounted掛載到實例上去之后調(diào)用

beforeUpdate 數(shù)據(jù)更新時調(diào)用updated

beforeDestroy 實例銷毀之前調(diào)用destroyed實例銷毀后調(diào)用

getApp() 函數(shù)用于獲取當(dāng)前應(yīng)用實例

const app = getApp()console.log(app.globalData);

getCurrentPages() 函數(shù)用于獲取當(dāng)前頁面棧的實例

navigateTo, redirectTo 只能打開非 tabBar 頁面。

switchTab 只能打開 tabBar 頁面火的。

reLaunch 可以打開任意頁面壶愤。

getCurrentPages() 獲得的頁面里內(nèi)置了一個方法 $getAppWebview() 可以得到當(dāng)前webview的對象實例

getCurrentPages() 可以得到所有頁面對象，然后根據(jù)數(shù)組馏鹤，可以取指定的頁面webview對象

uni.$emit 觸發(fā)全局的自定事件

uni.$on 監(jiān)聽全局的自定義事件

uni.emit 觸發(fā)娇哆，但是只觸發(fā)一次

uni.$off 移除全局自定義事件監(jiān)聽器

uni.$emit('update',{msg:'頁面更新'})

uni.$on('update',function(data){
        console.log('監(jiān)聽到事件來自 update 湃累，攜帶參數(shù) msg 為：' + data.msg);
})

uni.$once('update',function(data){
        console.log('監(jiān)聽到事件來自 update ，攜帶參數(shù) msg 為：' + data.msg);
})

?? 不要忘記留下你學(xué)習(xí)的腳印喲 ??