### 碼文不易啊，轉載請帶上本文連結呀，感謝感謝 https://www.cnblogs.com/echoyya/p/14429616.html [toc] ### uni的生命週期 #### [應用生命週期](https://uniapp.dcloud.io/collocation/frame/lifecycle?id=應用生命週期) - 生命週期的概念：一個物件從建立，執行，銷燬的整個過程被稱為生命週期 - 生命週期函式：在生命週期中每個階段會觸發一個函式，這些函式被稱為生命週期函式 - 應用生命週期僅可在`App.vue`中監聽，在其它頁面監聽無效。 `uni-app` 支援如下應用生命週期函式： | 函式名 | 說明 | | :------- | :--------------------------------------------- | | onLaunch | 當`uni-app` 初始化完成時觸發（全域性只觸發一次） | | onShow | 當 `uni-app` 啟動，或從後臺進入前臺顯示 | | onHide | 當 `uni-app` 從前臺進入後臺 | | onError | 當 `uni-app` 報錯時觸發 | ```html ``` #### [頁面生命週期](https://uniapp.dcloud.io/collocation/frame/lifecycle?id=頁面生命週期) `uni-app` 常用的頁面生命週期函式： | 函式名 | 說明 | | :------- | :----------------------------------------------------------- | | onLoad | 監聽頁面載入，其引數為上個頁面傳遞的資料，引數型別為 Object（用於頁面傳參） | | onShow | 監聽頁面顯示。頁面每次出現在螢幕上都觸發，包括從下級頁面點返回露出當前頁面 | | onReady | 監聽頁面初次渲染完成。注意如果渲染速度快，會在頁面進入動畫完成前觸發 | | onHide | 監聽頁面隱藏 | | onUnload | 監聽頁面解除安裝 | ``` ``` ### 導航跳轉和傳參 #### 宣告式導航：[navigator](https://uniapp.dcloud.io/component/navigator?id=navigator) 該元件類似HTML中的``元件，但只能跳轉本地頁面。目標頁面必須在pages.json中註冊。 常用屬性： | 屬性名 | 說明 | | :-------- | :----------------------------------------------------------- | | url | 應用內的跳轉連結，值為相對或絕對路徑，不需要加 `.vue` 字尾 | | open-type | 跳轉方式 預設值：navigate，而跳轉tabbar頁面時，需設定為switchTab | ```html ``` #### 程式設計式導航： ##### [uni.navigateTo(obj)](https://uniapp.dcloud.io/api/router?id=navigateto) 保留當前頁面，跳轉到應用內的某個頁面，使用`uni.navigateBack`可以返回到原頁面。 **obj必傳引數說明**：`url`,需要跳轉的應用內`非 tabBar `的頁面的相對或絕對路徑，路徑後可以帶引數，下一個頁面的`onLoad函式`可得到傳遞的引數 **跳轉到 tabBar 頁面只能使用 switchTab 跳轉** ``` //在跳轉到detail.vue頁面並傳遞引數 uni.navigateTo({ url: '../detail/detail?id=1&name=Echoyya' }); ``` ##### [uni.redirectTo(obj)](https://uniapp.dcloud.io/api/router?id=redirectto) 關閉當前頁面，跳轉到應用內的某個頁面。 **obj必傳引數說明**：`url`,需要跳轉的應用內`非 tabBar `的頁面的相對或絕對路徑，路徑後可以帶引數，下一個頁面的`onLoad函式`可得到傳遞的引數 ``` uni.redirectTo({ url: '../detail/detail?id=1' }); ``` ##### [uni.switchTab(obj)](https://uniapp.dcloud.io/api/router?id=switchtab) **跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面。** 但 如果呼叫了 [uni.preloadPage(OBJECT)](https://uniapp.dcloud.net.cn/api/preload-page) 不會關閉，僅觸發生命週期 `onHide` **obj必傳引數說明**：`url`,需要跳轉的` tabBar `的頁面的相對或絕對路徑，（需在 pages.json 的 tabBar 欄位定義的頁面），路徑後不能帶引數 **pages.json** ``` "tabBar":{ "color":"#8a8a8a", "selectedColor":"#d81e06", "list":[ { "text":"首頁", "pagePath": "pages/index/index", "iconPath":"static/tabs/home.png", "selectedIconPath":"static/tabs/home-active.png" }, { "text":"我們", "pagePath": "pages/us/us", "iconPath":"static/tabs/us.png", "selectedIconPath":"static/tabs/us-active.png" } ] } ``` **index.vue** ``` uni.switchTab({ url: '/pages/us/us' }); ``` #### 獲取引數 導航跳轉傳參，在目標頁面`onLoad`生命週期中，可以接受一個引數options，即為傳遞的引數 **detail.vue** ``` onLoad(options) { console.log(options.id) // 80 } ``` ### 建立元件，元件通訊 首先在uni-app中，建立元件的方法與Vue中一模一樣，**新建元件 -> import引入 -> components中宣告**，相信大家對Vue都比較熟悉，此處不再贅述，主要簡述一下元件間的通訊，與Vue中略有不同， - 父向子，子向父 同Vue，可參考我之前總結過的一篇博文有非常詳細的描述及案例[Vue2.0 多種元件傳值方法-不過如此的 Vuex](https://www.cnblogs.com/echoyya/p/14404397.html) - 兄弟元件傳值，與Vue略有不同 [uni.$emit(eventName,obj)](https://uniapp.dcloud.io/api/window/communication?id=emit)：觸發全域性的自定義事件，附加引數都會傳給監聽器回撥函式。 | 屬性 | 型別 | 描述 | | --------- | ------ | ---------------------- | | eventName | String | 事件名 | | OBJECT | Object | 觸發事件攜帶的附加引數 | [uni.\$on(eventName,callback)](https://uniapp.dcloud.io/api/window/communication?id=on)：監聽全域性的自定義事件，事件由 `uni.$emit` 觸發，回撥函式會接收事件觸發函式的傳入引數。 | 屬性 | 型別 | 描述 | | --------- | -------- | -------------- | | eventName | String | 事件名 | | callback | Function | 事件的回撥函式 |   ### 下拉重新整理 onPullDownRefresh #### 開啟下拉重新整理的兩種方式： 1. 需要在 `pages.json` 裡，找到的當前頁面的pages節點，並在 `style` 選項中開啟 `enablePullDownRefresh`。 ``` { "pages": [ { "path": "pages/index/index", "style": { "enablePullDownRefresh": true } } ] } ``` 2. `uni.startPullDownRefresh(obj)`方法，觸發該方法從而實現下拉重新整理，效果與使用者手動下拉重新整理一致。引數可接受回撥函式 ```javascript // 僅做示例，實際開發中延時根據需求來使用。 export default { onLoad: function (options) { uni.startPullDownRefresh(); }, } ``` #### 監聽下拉重新整理 在 JS 中定義 `onPullDownRefresh` 處理函式（和onLoad等生命週期函式同級），監聽該頁面使用者下拉重新整理事件。 ``` export default { onPullDownRefresh() { console.log('監聽下拉重新整理'); } } ``` #### 關閉下拉重新整理 處理完資料重新整理後，`uni.stopPullDownRefresh` 可以停止當前頁面的下拉重新整理。 ``` export default { onPullDownRefresh() { console.log('監聽下拉重新整理'); setTimeout(()=>{ uni.stopPullDownRefresh() }, 1000) } } ``` ### 上拉載入 (頁面觸底載入) #### 監聽頁面觸底 1. 在 JS 中定義 `onReachBottom`處理函式（和onLoad等生命週期函式同級），監聽該頁面上拉觸底事件。常用於觸底載入下一頁資料 ``` ``` 2. 需要在 `pages.json` 裡，找到的當前頁面的pages節點，並在 `style` 選項中開啟 `onReachBottomDistance`。頁面上拉觸底事件觸發時距頁面底部距離（Number型別） - 也可設定`globalStyle`下的觸底距離，若同時設定，page節點下的style會覆蓋全域性配置 ``` { "pages": [ { "path": "pages/index/index", "style": { "onReachBottomDistance": 200 } } ], "globalStyle": { // 全域性配置 "navigationBarTextStyle": "white", "navigationBarTitleText": "hello-uni-app", "navigationBarBackgroundColor": "#8470FF", "backgroundColor": "#8DEEEE", "onReachBottomDistance": 200 } } ``` ### 資料快取 (操作storage) #### 同步（推薦） - `uni.setStorageSync(key,data)` - `uni.getStorageSync(key)` - `uni.removeStorageSync(key)` ``` ``` #### 非同步 - `uni.setStorage(obj)`：包括儲存的key，data，以及成功失敗的回撥函式 - `uni.getStorage(obj)`：包括儲存的key，以及成功失敗的回撥函式 - `uni.removeStorage(obj)`：包括儲存的key，以及成功失敗的回撥函式 ``` ``` ### 上傳、預覽圖片 圖片操作，常用到以下兩個方法： - `uni.chooseImage(obj)`：上傳圖片，從本地相簿選擇圖片或使用相機拍照。 | 引數名 | 型別 | 說明 | | :------ | :------- | :----------------------------------------------- | | count | Number | 最多可以選擇的圖片張數，預設9 | | success | Function | 必填項，成功則返回圖片的本地檔案路徑列表` tempFilePaths` | - `uni.previewImage(obj)`：預覽圖片 | 引數名 | 型別 | 說明 | | :------ | :------- | :----------------------------------------------- | | current | String/Number | 為當前顯示圖片的連結/索引值，不填或填寫的值無效則為 urls 的第一張。有些app版本為必填 | | urls | Array | 必填項，需要預覽的圖片連結列表 | ````````` ``