生命周期

應(yīng)用生命周期

• 應(yīng)用生命周期僅可在App.vue中監(jiān)聽(tīng)，在其他頁(yè)面監(jiān)聽(tīng)無(wú)效。

• onlaunch里進(jìn)行頁(yè)面跳轉(zhuǎn)，如遇白屏報(bào)錯(cuò)，請(qǐng)參考https://ask./article/35942

頁(yè)面生命周期

onPageScroll參數(shù)說(shuō)明:

onTabItemTap參數(shù)說(shuō)明:

• onTabItemTap常用于點(diǎn)擊當(dāng)前tabitem，滾動(dòng)或刷新頁(yè)面。如果是點(diǎn)擊不同的tabitem，一定會(huì)觸發(fā)頁(yè)面切換。

• 如果想在App端實(shí)現(xiàn)點(diǎn)擊某個(gè)tabitem不跳轉(zhuǎn)頁(yè)面，不能使用onTabItemTap，可以使用plus.nativeObj.view放一個(gè)區(qū)塊蓋住原先的tabitem，并攔截點(diǎn)擊事件。

onNavigationBarButtonTap參數(shù)說(shuō)明:

onBackPress回調(diào)參數(shù)對(duì)象說(shuō)明:

export default {
	data() {
		return {};
	},
	onBackPress(options) {
		console.log('from:'   options.from)
	}
}

組件生命周期

路由

uni-app頁(yè)面路由為框架統(tǒng)一管理，開(kāi)發(fā)者需要在page.json里配置每個(gè)路由頁(yè)面的路徑及頁(yè)面樣式。類似小程序在app.json中配置頁(yè)面路由一樣。所以u(píng)ni-app的路由用法與Vue Router不同，如仍希望采用Vue Router方式管理路由，可在插件市場(chǎng)搜索Vue-Router。

路由跳轉(zhuǎn)

• 使用navigator組件跳轉(zhuǎn)

• 調(diào)用API跳轉(zhuǎn)

頁(yè)面棧

框架以棧的形式管理當(dāng)前所有頁(yè)面，當(dāng)發(fā)生路由切換的時(shí)候，頁(yè)面棧的表現(xiàn)如下:

運(yùn)行環(huán)境判斷

生產(chǎn)環(huán)境和開(kāi)發(fā)環(huán)境

if(process.env.NODE_ENV === 'development'){
    console.log('開(kāi)發(fā)環(huán)境')
} else if(process.env.NODE_ENV === 'production'){
    console.log('生產(chǎn)環(huán)境')
}

判斷平臺(tái)

switch(uni.getSystemInfoSync().platform){
    case 'android':
       console.log('運(yùn)行Android上')
       break;
    case 'ios':
       console.log('運(yùn)行iOS上')
       break;
    default:
       console.log('運(yùn)行在開(kāi)發(fā)者工具上')
       break;
}

配置

pages.json

pages.json文件用來(lái)對(duì)uni-app進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口樣式、原生的導(dǎo)航欄、底部的原生tabbar等。類似微信小程序中app.json的頁(yè)面管理部分。

配置項(xiàng)列表:

{
    "pages": [{
        "path": "pages/component/index",
        "style": {
            "navigationBarTitleText": "組件"
        }
    }, {
        "path": "pages/API/index",
        "style": {
            "navigationBarTitleText": "接口"
        }
    }, {
        "path": "pages/component/view/index",
        "style": {
            "navigationBarTitleText": "view"
        }
    }],
    "condition": { //模式配置，僅開(kāi)發(fā)期間生效
        "current": 0, //當(dāng)前激活的模式（list 的索引項(xiàng)）
        "list": [{
            "name": "test", //模式名稱
            "path": "pages/component/view/index" //啟動(dòng)頁(yè)面，必選
        }]
    },
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "演示",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8",
        "usingComponents":{
            "collapse-tree-item":"/components/collapse-tree-item"
        },
        "renderingMode": "seperated", // 僅微信小程序，webrtc 無(wú)法正常時(shí)嘗試強(qiáng)制關(guān)閉同層渲染
        "pageOrientation": "portrait"//橫屏配置，全局屏幕旋轉(zhuǎn)設(shè)置(僅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
    },
    "tabBar": {
        "color": "#7A7E83",
        "selectedColor": "#3cc51f",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "height": "50px",
        "fontSize": "10px",
        "iconWidth": "24px",
        "spacing": "3px",
        "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"
        }
    },
  "easycom": {
    "autoscan": true, //是否自動(dòng)掃描組件
    "custom": {//自定義掃描規(guī)則
      "uni-(.*)": "@/components/uni-$1.vue"
    }
  }
}

mainfest.json

mainfest.json文件是應(yīng)用的配置文件，用于指定應(yīng)用的名稱、圖標(biāo)、權(quán)限等。

配置項(xiàng)列表:

package.json

通過(guò)在package.json文件中增加uni-app擴(kuò)展節(jié)點(diǎn)，可實(shí)現(xiàn)自定義條件編譯平臺(tái)。

package.json擴(kuò)展配置用法:

{
    /**
     package.json其它原有配置 
     */
    "uni-app": {// 擴(kuò)展配置
        "scripts": {
            "custom-platform": { //自定義編譯平臺(tái)配置，可通過(guò)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 //自定義條件編譯常量，建議為大寫(xiě)
                }
            }
        }    
    }
}