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

46 0

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

并且域名可以配置端口。

0
  • 本文分类:UNI-APP
  • 本文标签:多端下载
  • 流行热度:已超过 46 人围观了本文
  • 发布日期:2020年05月27日 - 22时13分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。

评论(0)

微信收款码
微信收款码