前端uni-app框架簡介(二）

應用生命週期

 

函數名	說明
onLaunch	當uni-app 初始化完成時觸發（全局只觸發一次）
onShow	當 uni-app 啓動，或從後臺進入前臺顯示
onHide	當 uni-app 從前臺進入後臺
onError	當 uni-app 報錯時觸發
onUniNViewMessage	對 nvue 頁面發送的數據進行監聽，可參考 nvue 向 vue 通訊

注意

• 應用生命週期僅可在App.vue中監聽，在其它頁面監聽無效。

---

頁面生命週期

大可能性會用到的onLoad、onShow、 onReady、 onHide、 onPullDownRefresh、 onReachBottom、
onTabltemTap、onShareAppMessage、 onPageScroll 

函數名	說明	平臺差異說明	最低版本
onLoad	監聽頁面加載，其參數爲上個頁面傳遞的數據，參數類型爲Object（用於頁面傳參），參考示例
onShow	監聽頁面顯示。頁面每次出現在屏幕上都觸發，包括從下級頁面點返回露出當前頁面
onReady	監聽頁面初次渲染完成。注意如果渲染速度快，會在頁面進入動畫完成前觸發
onHide	監聽頁面隱藏
onUnload	監聽頁面卸載
onResize	監聽窗口尺寸變化	App、微信小程序
onPullDownRefresh	監聽用戶下拉動作，一般用於下拉刷新，參考示例
onReachBottom	頁面滾動到底部的事件（不是scroll-view滾到底），常用於下拉下一頁數據。具體見下方注意事項
onTabItemTap	點擊 tab 時觸發，參數爲Object，具體見下方注意事項	微信小程序、支付寶小程序、百度小程序、H5、App（自定義組件模式）
onShareAppMessage	用戶點擊右上角分享	微信小程序、百度小程序、字節跳動小程序、支付寶小程序
onPageScroll	監聽頁面滾動，參數爲Object	nvue暫不支持

注意點 —— onLaunch只能在App.vue裏寫

---

組件生命週期

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

這裏沒有頁面級的onLoad等生命週期。

---

路由

注意點：初學可能會遇到的問題，新建一個頁面， 訪問不到，因爲沒有配對pages.json文件， 需要用到的頁面一定要在pages.json裏配， 第一個配置項就是啓動頁。pages.json能加tabbar，如果不需要他的tabbar，就需要自己自定義一個tabbar組件。

pages.json所有配置選項：

pages爲路由

condition爲啓動模式配置僅開發期間生效，用於模擬直達頁面的場景，如：小程序轉發後，用戶點擊所打開的頁面；

globalStyle用於設置應用的狀態欄、導航條、標題、窗口背景色等

tabBar： tabBar 配置項指定 tab 欄的表現

easycom傳統vue組件，需要安裝、引用、註冊，三個步驟後才能使用組件。easycom將其精簡爲一步。 只要組件安裝在項目的components目錄下，並符合components/組件名稱/組件名稱.vue目錄結構。就可以不用引用、註冊，直接在頁面中使用

{
    "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"
        },
        "renderingMode": "seperated", // 僅微信小程序，webrtc 無法正常時嘗試強制關閉同層渲染
        "pageOrientation": "portrait"//橫屏配置，全局屏幕旋轉設置(僅 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, //是否自動掃描組件
    "custom": {//自定義掃描規則
      "uni-(.*)": "@/components/uni-$1.vue"
    }
  }
}

路由跳轉

uni.navigateTo(OBJECT)

保留當前頁面，跳轉到應用內的某個頁面，使用uni.navigateBack可以返回到原頁面。

//在起始頁面跳轉到test.vue頁面並傳遞參數
uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});

// 在test.vue頁面接受參數
export default {
    onLoad: function (option) { //option爲object類型，會序列化上個頁面傳遞的參數
        console.log(option.id); //打印出上個頁面傳遞的參數。
        console.log(option.name); //打印出上個頁面傳遞的參數。
    }
}

uni.redirectTo(OBJECT)

關閉當前頁面，跳轉到應用內的某個頁面。

uni.redirectTo({
    url: 'test?id=1'
});

 

uni.reLaunch(OBJECT)

關閉所有頁面，打開到應用內的某個頁面。

uni.reLaunch({
    url: 'test?id=1'
});
export default {
    onLoad: function (option) {
        console.log(option.id);
    }
}

 

uni.switchTab(OBJECT)

跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面。

pages.json：

{
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    },{
      "pagePath": "pages/other/other",
      "text": "其他"
    }]
  }
}

other.vue

uni.switchTab({
    url: '/pages/index/index'
});

 

uni.navigateBack(OBJECT)

關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。

// 注意：調用 navigateTo 跳轉時，調用該方法的頁面會被加入堆棧，而 redirectTo 方法則不會。見下方示例代碼

// 此處是A頁面
uni.navigateTo({
    url: 'B?id=1'
});

// 此處是B頁面
uni.navigateTo({
    url: 'C?id=1'
});

// 在C頁面內 navigateBack，將返回A頁面
uni.navigateBack({
    delta: 2
});

 

運行環境判斷：

這個和vue差不多的， 可以用來區分環境，你本地運行會用開發環境，打包會自動用生產環境

---

頁面樣式與佈局

uni-app內有個自己提供的動態單位upx，寬度定死750個upx，這樣就可以用類似百分比的方式設置寬高了; vh是視窗高度百分比

動態修改upx需要使用uni.upx2px函數，否則無法生效

Flex佈局是真的好用，學會了這個感覺至少靜態佈局上都沒什麼難度了，uni-app也推薦使用這種佈局

推薦學習flex網址：https://blog.csdn.net/Allenyhy/article/details/81605547

支持npm安裝第三方包

小程序組件支持——有一定規範，需要自定義寫對應組件的要看看這個