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

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

并且域名可以配置端口。