更新于

uni h5端+小程序 实现多端下载

发布于 / 分类: UNI-APP / 暂无评论 / 阅读量: 94

uni不支持h5下载,因为其api不支持,所以我们只能用h5的办法来解决这个问题。

最简单的办法就是利用a链接,因为只用处理手机端,所以本来更合适pc+移动端的axios方案可以不用。

封装一个下载方法:

saveFile: function(url, success) {
    const dA = document.createElement("a");
    dA.download = ''; // 设置下载的文件名,默认是'下载'
    dA.href = url;
    document.body.appendChild(dA);
    dA.click();
    dA.remove(); // 下载之后把创建的元素删除
    success(); //运行回调
}

如果有样式的问题,可以自己设置style,前端样式这种小问题就不多说了,原理应该也是一看就明白了。

两个参数,一个是链接,一个是回调,回调也不是真正意义上的回调,不过也有点用就是了。

注意

链接要是本地地址。

operator() {
    uni.showActionSheet({
        itemList: ["保存图片"],
        success: (res) => {
            if (res.tapIndex === 0) { //数组下标
                uni.showLoading({
                    mask: true,
                    title: "下载中..."
                });
                uni.downloadFile({
                    url: this.cover,
                    success: (res) => {
                        const fileUrl = res.tempFilePath;
                        // #ifdef H5
                        this.saveFile(fileUrl, () => {
                            uni.hideLoading();
                        });
                        // #endif
                        // #ifndef H5
                        uni.saveImageToPhotosAlbum({
                            filePath: fileUrl,
                            success: () => {
                                uni.showToast({
                                    title: "下载成功"
                                });
                            },
                            complete: () => {
                                uni.hideLoading();
                            }
                        });
                        // #endif
                    }
                })
            }
        }
    })
}

通过触摸长按触发operator方法,触摸事件为@longpress;触发后调出上滑菜单,判断index来确定点击的是保存按钮。

uni.downloadFile将文件下载到本地临时存储,然后success回调返回一个本地链接地址,然后利用这个链接地址,用区分平台的注释分平台使用不同的方法。

h5端直接用封装的saveFile,其他平台用api的方法uni.saveImageToPhotosAlbum

微信平台:

微信的下载需要配置一个https的下载域名才行,也就是说你下载的内容地址必须要和这个配置的域名相同,所以,要注意了,方法是没有问题的,但是微信安全环境可能需要自己配置一下。

并且域名可以配置端口。

暂无评论

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了261篇文章

共有393条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
Catalog
目录树
设置
配色方案

布局

购买