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

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

目錄

• 碼文不易啊，轉載請帶上本文鏈接呀，感謝感謝 https://www.cnblogs.com/echoyya/p/14429616.html
• uni的生命周期
  • 應用生命周期
  • 頁面生命周期
• 導航跳轉和傳參
  • 聲明式導航：navigator
  • 編程式導航：
    • uni.navigateTo(obj)
    • uni.redirectTo(obj)
    • uni.switchTab(obj)
  • 獲取參數
• 創建組件，組件通訊
• 下拉刷新 onPullDownRefresh
  • 開啟下拉刷新的兩種方式：
  • 監聽下拉刷新
  • 關閉下拉刷新
• 上拉加載 (頁面觸底加載)
  • 監聽頁面觸底
• 數據緩存 (操作storage)
  • 同步（推薦）
  • 異步
• 上傳、預覽圖片
• 前情提要：uni-app小白入門自學筆記（一）

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	事件的回調函數

下拉刷新 onPullDownRefresh

開啟下拉刷新的兩種方式：

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

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

2. 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)
    }
}

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

監聽頁面觸底

1. 在 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>

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)

<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小白入門自學筆記（一）