image

uni-app的框架，配置：page.json，manifest.json，package.json，vue.config.js。腳本，應(yīng)用程序，main.js。日志打印，定時(shí)器，生命周期，頁面，頁面通訊。

pages.json文件時(shí)用來對uni-app進(jìn)行全局配置的，它是用來寫頁面文件的路徑，窗口樣式，底部的tabbar等，類似于小程序中的app.json的頁面管理。這里注意的是定位，在小程序中是在app.json的，而在uni-app中式在manifest配置的，這一點(diǎn)是我做地圖時(shí)注意到的內(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 的索引項(xiàng)）
        "list": [{
            "name": "test", //模式名稱
            "path": "pages/component/view/index" //啟動(dòng)頁面，必選
        }]
    },
    "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í)不要設(shè)置背景顏色，否則模糊效果會(huì)失效，默認(rèn)值為none（僅iOS平臺(tái)支持 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)航條，標(biāo)題，窗口背景顏色等。

pages，配置頁面路徑。第一項(xiàng)為應(yīng)用入口，增加或是減少頁面，都在pages數(shù)組中進(jìn)行修改即可。

┌─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è)置頁面標(biāo)題文字
        "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": [ //原生標(biāo)題欄按鈕配置,
                            {
                                "text": "分享" //原生標(biāo)題欄增加分享按鈕，點(diǎn)擊事件可通過頁面的 onNavigationBarButtonTap 函數(shù)進(jìn)行監(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時(shí)點(diǎn)擊輸入框不置焦，可以跳到新頁面搜索
                        }
                    }
                }
            }
        }
        ...
    ]
}

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 子集，文檔可暫時(shí)開放出來位置，大小相關(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配置項(xiàng)指定tab欄的表現(xiàn)，以及tab切換時(shí)顯示的對應(yīng)項(xiàng)。

當(dāng)設(shè)置position為top時(shí)，將不會(huì)顯示icon，tabBar中的list時(shí)一個(gè)數(shù)組，最少配置2個(gè)，最多配置5個(gè)。

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

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

subPackages分包加載配置，但在5+app中為整包。subPackages節(jié)點(diǎn)接收一個(gè)數(shù)組，每個(gè)項(xiàng)都是應(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是進(jìn)入頁面的預(yù)下載配置。

manifest.json 文件時(shí)應(yīng)用的配置文件，應(yīng)用的名稱，圖標(biāo)，權(quán)限等等。

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

package.json 文件為uni-app的擴(kuò)展節(jié)點(diǎn)，可以實(shí)現(xiàn)自定義的編譯平臺(tái)。

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

vue.config.js是一個(gè)可選的配置文件

uni.css文件為全局應(yīng)用的樣式風(fēng)格。使用時(shí)需要在style節(jié)點(diǎn)上添加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;//點(diǎn)擊狀態(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; // 文章標(biāo)題顏色
$uni-font-size-title:40rpx;
$uni-color-subtitle: #555555; // 二級(jí)標(biāo)題顏色
$uni-font-size-subtitle:36rpx;
$uni-color-paragraph: #3F536E; // 文章段落顏色
$uni-font-size-paragraph:30rpx;

app.vue時(shí)我們頁面的入口文件。

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

onLaunch: 當(dāng)uni-app初始化完成時(shí)觸發(fā)，全局只觸發(fā)一次；
onShow: 當(dāng)uni-app啟動(dòng)，或者從后臺(tái)進(jìn)入前臺(tái)顯示時(shí)觸發(fā)；
onHide: 當(dāng)uni-app從前臺(tái)進(jìn)入到后臺(tái)時(shí)觸發(fā)；
onError: 當(dāng)uni-app報(bào)錯(cuò)時(shí)觸發(fā)；
onUniNViewMessage: 對nvue頁面發(fā)送的數(shù)據(jù)進(jìn)行監(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是小程序的機(jī)制，在uni-app也是可以使用的。

App.vue配置：

<script>  
    export default {  
        globalData: {  
            text: 'text'  
        }
    }  
</script>

獲取：

getApp().globalData.text = 'test'

用getApp對象還沒有獲取到，可以用

this.$scope.globalData獲取globalData

main.js時(shí)入口文件，時(shí)初始化vue實(shí)例并使用需要的插件。

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實(shí)例

打印日志：console向控制臺(tái)打印日志信息，debug向控制臺(tái)打印debug日志，log向控制臺(tái)打印log日志，info，warn，error分別向控制臺(tái)打印,info,warn,error日志。

setTimeout() 定時(shí)器，到時(shí)間后執(zhí)行，clearTimeout取消setTimeout設(shè)置的定時(shí)器，setInterval() 設(shè)置一個(gè)定時(shí)器，clearInterval()取消由setInterval設(shè)置的定時(shí)器。

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

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

onShow 當(dāng) uni-app 啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示

onHide 當(dāng) uni-app 從前臺(tái)進(jìn)入后臺(tái)

onError 當(dāng) uni-app 報(bào)錯(cuò)時(shí)觸發(fā)

onUniNViewMessage 對 nvue 頁面發(fā)送的數(shù)據(jù)進(jìn)行監(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)聽用戶下拉動(dòng)作

onReachBottom 頁面滾動(dòng)到底部的事件

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

onShareAppMessage 用戶點(diǎn)擊右上角分享

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

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

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

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

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

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

組件生命周期

uni-app 組件支持的生命周期，與vue標(biāo)準(zhǔn)組件的生命周期相同。

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

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

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

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

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

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

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

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

switchTab 只能打開 tabBar 頁面。

reLaunch 可以打開任意頁面。

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

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í)的腳印喲 ??