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

/ 前端
# uniapp

navigator

在UniApp中，navigator 组件用于页面跳转和应用内导航。

基本使用

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>

注意事项

事件

1. uni.setStorage(OBJECT)

将数据存储到本地缓存中指定的key中，会覆盖掉原来该key对应的内容，这是一个异步接口。

1
2
3
4
5
6
7
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对应的内容。

1
2
3
4
5
6
uni.getStorage({
    key: 'storage_key',
    success: function (res) {
        console.log(res.data);
    }
});

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

3. uni.getStorageInfo(OBJECT)

异步获取当前storage的相关信息，包括所有key、当前占用空间大小以及限制的空间大小。

1
2
3
4
5
6
7
uni.getStorageInfo({
    success: function (res) {
        console.log(res.keys);
        console.log(res.currentSize);
        console.log(res.limitSize);
    }
});

同步版本为uni.getStorageInfoSync()。

4. uni.removeStorage(OBJECT)

从本地缓存中异步移除指定key的数据。

1
2
3
4
5
6
uni.removeStorage({
    key: 'storage_key',
    success: function (res) {
        console.log('success');
    }
});

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

5. 清理本地数据缓存

网络请求

在UniApp中进行网络请求是一个核心的功能，它允许开发者与服务器进行数据交互。UniApp提供了多种方式进行网络请求，主要包括uni.request、uni.uploadFile和uni.downloadFile等方法。

1. 使用 uni.request 发起网络请求

uni.request 是 UniApp 提供的一个用于发起 HTTP 请求的方法，支持 GET、POST 等常见的 HTTP 方法。该方法可以配置请求头、请求参数，并处理响应数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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);
    }
});

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

当需要上传文件时，可以使用 uni.uploadFile 方法。它可以用来上传图片、音频等多媒体文件。

1
2
3
4
5
6
7
8
9
10
11
uni.uploadFile({
    url: '上传URL',
    filePath: '要上传的文件路径',
    name: '上传文件对应的key',
    formData: {
        'user': 'test'
    },
    success: function(res) {
        console.log('上传成功', res.data);
    }
});

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

对于需要从服务器下载文件的情况，可以使用 uni.downloadFile 方法。

1
2
3
4
5
6
7
8
uni.downloadFile({
    url: '下载URL',
    success: function(res) {
        if (res.statusCode === 200) {
            console.log('下载成功');
        }
    }
});

4. 封装网络请求

为了简化代码和提高复用性，通常会对网络请求进行封装。例如，可以创建一个 request.js 文件来统一管理所有的网络请求逻辑。

1
2
3
4
5
6
7
8
9
export const request = (options) => {
    return new Promise((resolve, reject) => {
        uni.request({
            ...options,
            success: resolve,
            fail: reject
        });
    });
};

然后，在页面中可以通过这种方式调用：

1
2
3
4
5
6
7
8
9
10
11
12
13
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);
    }
}