uni-app小白入門自學筆記（二）

Echoyya、發表於2021-02-22

碼文不易啊，轉載請帶上本文連結呀，感謝感謝 https://www.cnblogs.com/echoyya/p/14429616.html

uni的生命週期

應用生命週期

生命週期的概念：一個物件從建立，執行，銷燬的整個過程被稱為生命週期
生命週期函式：在生命週期中每個階段會觸發一個函式，這些函式被稱為生命週期函式
應用生命週期僅可在App.vue中監聽，在其它頁面監聽無效。

uni-app 支援如下應用生命週期函式：

函式名	說明
onLaunch	當`uni-app` 初始化完成時觸發（全域性只觸發一次）
onShow	當 `uni-app` 啟動，或從後臺進入前臺顯示
onHide	當 `uni-app` 從前臺進入後臺
onError	當 `uni-app` 報錯時觸發

<script>
    // 只能在App.vue裡監聽應用的生命週期
    export default {
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
          },
        onError: function(err) {
            console.log(err)
        }
    }
</script>

頁面生命週期

uni-app 常用的頁面生命週期函式：

函式名	說明
onLoad	監聽頁面載入，其引數為上個頁面傳遞的資料，引數型別為 Object（用於頁面傳參）
onShow	監聽頁面顯示。頁面每次出現在螢幕上都觸發，包括從下級頁面點返回露出當前頁面
onReady	監聽頁面初次渲染完成。注意如果渲染速度快，會在頁面進入動畫完成前觸發
onHide	監聽頁面隱藏
onUnload	監聽頁面解除安裝

<script>
    export default {
        onLoad: function(option) {
            console.log('頁面載入',option)
        },
        onShow: function() {
            console.log('頁面顯示')
        },
        onReady: function() {
            console.log('頁面初次渲染')
          },
        onHide: function() {
            console.log('頁面隱藏')
        }
    }
</script>

導航跳轉和傳參

宣告式導航：navigator

該元件類似HTML中的<a>元件，但只能跳轉本地頁面。目標頁面必須在pages.json中註冊。

常用屬性：

屬性名	說明
url	應用內的跳轉連結，值為相對或絕對路徑，不需要加 `.vue` 字尾
open-type	跳轉方式預設值：navigate，而跳轉tabbar頁面時，需設定為switchTab

<template>
  <view class="">
    <!-- 跳轉到普通頁面 並傳參 -->
    <navigator url="/pages/detail/detail?id=80">跳轉詳情</navigator>
		
    <!-- 跳轉到tabbar頁面 -->
    <navigator url="/pages/us/us" open-type="switchTab">關於我們</navigator>
  </view>
</template>

程式設計式導航：

uni.navigateTo(obj)

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

obj必傳引數說明：url,需要跳轉的應用內非 tabBar 的頁面的相對或絕對路徑，路徑後可以帶引數，下一個頁面的onLoad函式可得到傳遞的引數

跳轉到 tabBar 頁面只能使用 switchTab 跳轉

//在跳轉到detail.vue頁面並傳遞引數
uni.navigateTo({
    url: '../detail/detail?id=1&name=Echoyya'
});

uni.redirectTo(obj)

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

obj必傳引數說明：url,需要跳轉的應用內非 tabBar 的頁面的相對或絕對路徑，路徑後可以帶引數，下一個頁面的onLoad函式可得到傳遞的引數

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

uni.switchTab(obj)

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

但如果呼叫了 uni.preloadPage(OBJECT) 不會關閉，僅觸發生命週期 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
兄弟元件傳值，與Vue略有不同

uni.$emit(eventName,obj)：觸發全域性的自定義事件，附加引數都會傳給監聽器回撥函式。

屬性型別描述

eventName String 事件名

OBJECT Object 觸發事件攜帶的附加引數

uni.$on(eventName,callback)：監聽全域性的自定義事件，事件由 uni.$emit 觸發，回撥函式會接收事件觸發函式的傳入引數。

屬性型別描述

eventName String 事件名

callback Function 事件的回撥函式

屬性	型別	描述
eventName	String	事件名
OBJECT	Object	觸發事件攜帶的附加引數

屬性	型別	描述
eventName	String	事件名
callback	Function	事件的回撥函式

下拉重新整理 onPullDownRefresh

開啟下拉重新整理的兩種方式：

需要在 pages.json 裡，找到的當前頁面的pages節點，並在 style 選項中開啟 enablePullDownRefresh。

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "enablePullDownRefresh": true
            }
        }
    ]
}

uni.startPullDownRefresh(obj)方法，觸發該方法從而實現下拉重新整理，效果與使用者手動下拉重新整理一致。引數可接受回撥函式

// 僅做示例，實際開發中延時根據需求來使用。
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)
    }
}

上拉載入 (頁面觸底載入)

監聽頁面觸底

在 JS 中定義 onReachBottom處理函式（和onLoad等生命週期函式同級），監聽該頁面上拉觸底事件。常用於觸底載入下一頁資料

   <template>
     <view>
   	  <view class="box3" v-for="(item,index) in listNum" :key="index">
   	    {{item}}
   	  </view>
     </view>
   </template>
   
   <script>
   	export default {
   	  data() {
   	    return {
   	      listNum:10
   	    }
   	  },
   	  onReachBottom(){
            console.log('頁面觸底');
            this.listNum +=5
          }
   	}
   </script>
   
   <style>
   .box{
   	height: 100px;
   	line-height: 100px;
   	text-align: center;
   }
   </style>

需要在 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)

<template>
  <view class="">
    <button type="primary" @click="setStorageSync">同步儲存資料</button>
    <button type="primary" @click="getStorageSync">同步獲取資料</button>
    <button type="primary" @click="removeStorageSync">同步移除資料</button>
  </view>
</template>

<script>
  export default {
    methods: {
      setStorageSync() {
        uni.setStorageSync('name', 'Echoyya');
      },
      getStorageSync() {
        console.log(uni.getStorageSync('name')) 	
      },
      removeStorageSync() {
        uni.removeStorageSync('name')
      }
    }
  }
</script>

非同步

uni.setStorage(obj)：包括儲存的key，data，以及成功失敗的回撥函式
uni.getStorage(obj)：包括儲存的key，以及成功失敗的回撥函式
uni.removeStorage(obj)：包括儲存的key，以及成功失敗的回撥函式

<template>
  <view class="">
    <button type="warn" @click="setStorage">非同步儲存資料</button>
    <button type="warn" @click="getStorage">非同步獲取資料</button>
    <button type="warn" @click="removeStorage">非同步移除資料</button>
  </view>
</template>

<script>
  export default {
    methods: {
      setStorage() {
        uni.setStorage({
          key: 'name',
          data: 'Echoyya',
          success: function() {
            console.log('儲存成功');
          }
        })
      },
      getStorage() {
        uni.getStorage({
          key: 'name',
          success: function(res) {
            console.log(res.data);
          }
        })
      },
      removeStorage() {
        uni.removeStorage({
          key: 'name',
          success: function(res) {
            console.log('移除成功');
          }
        })
      },
    }
  }
</script>

上傳、預覽圖片

圖片操作，常用到以下兩個方法：

uni.chooseImage(obj)：上傳圖片，從本地相簿選擇圖片或使用相機拍照。

引數名	型別	說明
count	Number	最多可以選擇的圖片張數，預設9
success	Function	必填項，成功則返回圖片的本地檔案路徑列表 `tempFilePaths`

uni.previewImage(obj)：預覽圖片

引數名	型別	說明
current	String/Number	為當前顯示圖片的連結/索引值，不填或填寫的值無效則為 urls 的第一張。有些app版本為必填
urls	Array	必填項，需要預覽的圖片連結列表

<template>
  <view class="">
    <button type="default" @click="chooseImage">圖片上傳</button>
    <!-- 點選圖片預覽 -->
    <image v-for="(item,index) in imgArr" :key="index" :src="item" @click="previewImage(item)"></image>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        imgArr: []
      }
    },
    methods: {
      chooseImage() {
        uni.chooseImage({
          count: 5,
          success: (res) => {
            this.imgArr = res.tempFilePaths
          }
        })
      },
      previewImage(current) {
        uni.previewImage({
          current,
          urls: this.imgArr
        })
      }
    }
  }
</script>

uni-app小白入門自學筆記（一）
2021-02-21
APP筆記
Electron小白入門自學筆記（一）
2021-01-19
筆記
TypeScript 入門自學筆記 — 型別斷言（二）
2021-04-28
TypeScript筆記型別
TypeScript 入門自學筆記（一）
2021-03-16
TypeScript筆記
Flutter 高效自學筆記（二）
2019-05-26
Flutter筆記
HTML入門學習筆記（二）
2019-02-16
HTML筆記
JS高度融合入門筆記(二)
2018-08-24
JS筆記
後端小白的VUE入門筆記, 前端高能慎入
2019-08-05
後端Vue筆記前端
Python基礎入門筆記（二）
2019-03-01
Python筆記
Spark下載與入門（Spark自學二）
2017-10-11
Spark
webpack4入門學習筆記(二)
2019-04-21
Web筆記
uni-app 入門之 nvue (weex) 爬坑記
2019-02-22
APPVue
uni-app 快速入門
2022-06-13
APP
自學PHP筆記（二）PHP資料型別
2021-04-06
PHP筆記資料型別
小白筆記
2016-09-29
筆記
Java自學筆記⑪
2020-12-04
Java筆記
ClickHouse入門筆記
2021-08-03
筆記
vue入門筆記
2018-10-17
Vue筆記
Docker 入門筆記
2018-02-07
Docker筆記
spark入門筆記
2018-01-22
Spark筆記
Redis入門筆記
2018-07-05
Redis筆記
NPM入門筆記
2017-01-20
NPM筆記
NSIS入門筆記
2024-08-29
筆記
Go入門筆記
2024-09-03
Go筆記
DFS入門筆記
2024-11-23
筆記
自學Java如何入門？
2021-02-25
Java
自學機器學習入門指南
2017-10-31
機器學習
《Unity Shader入門精要》自學筆記（五）第八章透明效果
2020-11-21
Unity筆記
Pwn入門筆記（二）a little棧基礎知識
2020-11-23
筆記
Docker 入門學習筆記二：常用命令
2017-03-04
Docker筆記
JAVA自學筆記（4）
2020-05-30
Java筆記
Kotlin 自學筆記
2017-12-23
Kotlin筆記
linux入門筆記
2019-03-14
Linux筆記
Python入門筆記
2019-03-10
Python筆記
Python 入門筆記
2019-07-16
Python筆記
selenium 入門筆記
2018-10-09
筆記
ByteBuddy入門筆記
2023-04-27
筆記
Haskell 入門筆記(四)
2016-10-09
Haskell筆記