uniapp常用

1.下载文件带进度提示

<template>
    <view>
        <button @click="startDownload">下载文件</button>
        <progress :percent="progress" stroke-width="3" />
    </view>
</template>

<script setup>
    import {
        ref
    } from 'vue';

    // 定义进度条数据
    const progress = ref(0);

    // 下载文件方法
    const startDownload = () => {
        const downloadTask = uni.downloadFile({
            url: "http://localhost:5140/api/File/download", // 替换为你的API地址
            success: (res) => {
                console.log(res);
                if (res.statusCode === 200) {
                    uni.showToast({
                        title: "下载成功",
                        icon: "success",
                    });
                    // 打开文件（根据文件类型选择打开方式）
                    uni.openDocument({
                        filePath: res.tempFilePath,
                        showMenu: true,
                    });
                } else {
                    uni.showToast({
                        title: "下载失败",
                        icon: "none",
                    });
                }
            },
            fail: (err) => {
                console.error("下载失败", err);
                uni.showToast({
                    title: "下载失败",
                    icon: "none",
                });
            },
        });

        // 监听下载进度
        downloadTask.onProgressUpdate((res) => {
            progress.value = res.progress; // 更新进度条
        });
    };
</script>

<style>
    progress {
        margin-top: 20px;
    }
</style>