navigator

在UniApp中，navigator 組件用于頁面跳轉和應用內導航。

基本使用

• 屬性：
  • url: 需要跳轉的目標頁面路徑，路徑可以是相對路徑或絕對路徑。
  • open-type: 跳轉的方式，默認為 navigateTo。其他可選值包括：redirectTo, switchTab, reLaunch, navigateBack。

open-type

1. navigateTo: 推入目標頁面到棧頂，即打開新頁面（默認）。

   • 示例: <navigator url="/pages/index/index" open-type="navigate-to">跳轉到首頁</navigator>

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

   • 示例: <navigator url="/pages/index/index" open-type="redirect-to">重定向到首頁</navigator>

3. switchTab: 跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面。

   • 示例: <navigator url="/pages/tabBarPagePath" open-type="switch-tab">切換到tabBar頁面</navigator>

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

   • 示例: <navigator url="/pages/reLaunchPagePath" open-type="reLaunch">重啟并跳轉到指定頁面</navigator>

5. navigateBack: 返回上一頁面或多級頁面。

   • 可以通過 delta 屬性指定返回的層級，默認為1。
   • 示例: <navigator open-type="navigate-back" delta="2">返回上兩級</navigator>

注意事項

• 使用 navigator 時，確保目標頁面已經在 pages.json 中注冊。
• 當使用 switchTab 作為 open-type 時，url 參數需要是一個已經定義在 tabBar 列表中的路徑。
• 在小程序環境中，頁面棧的最大深度是有限制的（通常是10層），超過限制后無法繼續使用 navigateTo 進行跳轉。

事件

• tap: 點擊事件，可以用來處理點擊跳轉前的邏輯。
• success: 成功后的回調函數。
• fail: 失敗后的回調函數。
• complete: 不管成功或失敗都會執行的回調函數。

1. uni.setStorage(OBJECT)

將數據存儲到本地緩存中指定的key中，會覆蓋掉原來該key對應的內容，這是一個異步接口。

• 參數:
  • key: String 類型，必填，指定存儲的鍵。
  • data: Any 類型，必填，需要存儲的數據，只支持原生類型及能夠通過JSON.stringify序列化的對象。
  • success: Function 類型，選填，接口調用成功的回調函數。
  • fail: Function 類型，選填，接口調用失敗的回調函數。
  • complete: Function 類型，選填，接口調用結束的回調函數（無論成功或失敗都會執行）。

uni.setStorage({key: 'storage_key',data: 'hello',success: function () {console.log('success');}
});

注意：避免使用以uni-、uni_、dcloud-、dcloud_為前綴的key，這些是系統保留的關鍵字。

同步版本為uni.setStorageSync(KEY, DATA)。

2. uni.getStorage(OBJECT)

從本地緩存中異步獲取指定key對應的內容。

• 參數:
  • key: String 類型，必填，指定要獲取的鍵。
  • success: Function 類型，必填，接口調用成功的回調函數，返回值包含data字段。
  • fail: Function 類型，選填，接口調用失敗的回調函數。
  • complete: Function 類型，選填，接口調用結束的回調函數。

uni.getStorage({key: 'storage_key',success: function (res) {console.log(res.data);}
});

同步版本為uni.getStorageSync(KEY)。

3. uni.getStorageInfo(OBJECT)

異步獲取當前storage的相關信息，包括所有key、當前占用空間大小以及限制的空間大小。

• 參數:
  • success: Function 類型，必填，接口調用成功的回調函數，返回值包含keys、currentSize和limitSize字段。
  • fail: Function 類型，選填，接口調用失敗的回調函數。
  • complete: Function 類型，選填，接口調用結束的回調函數。

uni.getStorageInfo({success: function (res) {console.log(res.keys);console.log(res.currentSize);console.log(res.limitSize);}
});

同步版本為uni.getStorageInfoSync()。

4. uni.removeStorage(OBJECT)

從本地緩存中異步移除指定key的數據。

• 參數:
  • key: String 類型，必填，指定要移除的鍵。
  • success: Function 類型，必填，接口調用成功的回調函數。
  • fail: Function 類型，選填，接口調用失敗的回調函數。
  • complete: Function 類型，選填，接口調用結束的回調函數。

uni.removeStorage({key: 'storage_key',success: function (res) {console.log('success');}
});

同步版本為uni.removeStorageSync(KEY)。

5. 清理本地數據緩存

• 異步清理：uni.clearStorage()
• 同步清理：uni.clearStorageSync()

網絡請求

在UniApp中進行網絡請求是一個核心的功能，它允許開發者與服務器進行數據交互。UniApp提供了多種方式進行網絡請求，主要包括uni.request、uni.uploadFile和uni.downloadFile等方法。

1. 使用 uni.request 發起網絡請求

uni.request 是 UniApp 提供的一個用于發起 HTTP 請求的方法，支持 GET、POST 等常見的 HTTP 方法。該方法可以配置請求頭、請求參數，并處理響應數據。

uni.request({url: '請求URL', // 必填，請求的URL地址method: 'GET', // 可選，默認為GETheader: {'content-type': 'application/json' // 默認值},data: {// 請求的數據},success: function(res) {console.log('請求成功', res.data);},fail: function(err) {console.error('請求失敗', err);}
});

• url: 開發者服務器接口地址。
• data: 請求的參數。對于GET方法，會轉換成query string；對于POST方法且header[‘content-type’]為application/json的數據，會進行JSON序列化。
• header: 設置請求頭信息，例如設置Content-Type來指定請求體格式。
• method: 支持包括GET、POST在內的常見HTTP方法。不同平臺對某些方法的支持可能有所不同，請參照官方文檔。
• timeout: 超時時間，單位ms。H5端需要HBuilderX 2.9.9+版本支持。
• success: 請求成功的回調函數，包含返回的數據、狀態碼及響應頭等信息。
• fail: 請求失敗的回調函數，提供錯誤代碼、消息等信息。

2. 文件上傳：使用 uni.uploadFile

當需要上傳文件時，可以使用 uni.uploadFile 方法。它可以用來上傳圖片、音頻等多媒體文件。

uni.uploadFile({url: '上傳URL',filePath: '要上傳的文件路徑',name: '上傳文件對應的key',formData: {'user': 'test'},success: function(res) {console.log('上傳成功', res.data);}
});

3. 文件下載：使用 uni.downloadFile

對于需要從服務器下載文件的情況，可以使用 uni.downloadFile 方法。

uni.downloadFile({url: '下載URL',success: function(res) {if (res.statusCode === 200) {console.log('下載成功');}}
});

4. 封裝網絡請求

為了簡化代碼和提高復用性，通常會對網絡請求進行封裝。例如，可以創建一個 request.js 文件來統一管理所有的網絡請求邏輯。

export const request = (options) => {return new Promise((resolve, reject) => {uni.request({...options,success: resolve,fail: reject});});
};

然后，在頁面中可以通過這種方式調用：

import { request } from '@/utils/request.js';async function fetchData() {try {const response = await request({url: '/api/data',method: 'GET'});console.log(response);} catch (error) {console.error(error);}
}