uniapp中的路由、本地存储与网络请求

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', // 可选，默认为GET
    header: {
        '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);
    }
}