微信小程序webview中H5的window.location下载安卓失效问题（wx.env.USER_DATA_PATH报错，wx.openDocument安卓转发文件打不开）_window.location.protocol.split 这个在小程序中不生效 用什么能代替

一、背景

• 项目是使用微信小程序组件封装的H5页面
• 小程序环境下，安卓机无法使用打开链接下载
• webview不支持window.location下载文件
• 封装的代码不支持微信小程序的下载方法
• 所以迂回方案在H5点击链接的时候跳转回小程序，使用小程序的方式下载打开链接

注意：H5使用小程序之前需要引入JSSDK

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1

二、代码展示

• wx.downloadFile的使用方式可参照

https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html

• wx.saveFile的使用方式可参照

这里是引用https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.saveFile.html

• wx.openDocument的使用方式可参照

这里是引用https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html

H5代码

let arr = fileurl.split("?");
wx.miniProgram.navigateTo({
// 小程序路由参数里面不能带问号会被解析
url: "/pages/showFile/showFile?link=" + arr[0] + "&" + arr[1]
});
1
2
3
4
5

小程序代码

//showFiles.js
Page({
    data: {
        waitWord: '请稍等正在打开文件'
    },
    onShow: function () {},
    onLoad: function (options) {
        let that = this;
        // console.log("222", options.name)
        wx.downloadFile({//微信下载文件方法
            url: options.link + '?name=' + options.name + '&path=' + options.path + '&review=' + options.review,
            dataType: "pdf",
            success(res) {
                wx.saveFile({//微信保存文件，这个存储有点复杂
                    // 临时存储路径，先有临时存储路径方可使用wx官方的存储本地路径（ wx.env.USER_DATA_PATH ）
                    tempFilePath: res.tempFilePath,
                    //定义本地的存储路径及名称
                    filePath: wx.env.USER_DATA_PATH + '/' + options.name,
                    success(res) {
                        const savedFilePath = res.savedFilePath;
                        wx.openDocument({//微信打开文件
                            filePath: savedFilePath,
                            showMenu: true,
                            success: function (res) {
                                that.setData({
                                    waitWord: '返回请点击左上角',
                                });
                            },
                            fail: function (err) {
                                console.log(res)
                                wx.showToast({
                                    title: '文件预览失败,请稍后重试',
                                    icon: 'none',
                                    duration: 1500
                                })
                            }
                        });
                    }
                })
            },
            fail(err) {
                wx.showToast({
                    title: '文件下载失败,请稍后重试',
                    icon: 'none',
                    duration: 1500
                })
                console.log(err)
            }
        })
    },

    //   },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

三、踩坑指南

坑一：

H5跳转 路由传参 参数被解析
原因：路由带的参数是字符串链接，链接里面有?&这些字符，容易被微信解析使用
解决：将参数字符串截成几段，再upload方法里面取路由参数拼接

//H5代码:
let arr = fileurl.split("?");
wx.miniProgram.navigateTo({
// 小程序路由参数里面不能带问号会被解析
// url: "/pages/showFile/showFile?link=" + fileurl
url: "/pages/showFile/showFile?link=" + arr[0] + "&" + arr[1]
});
 
//小程序代码：
onLoad: function (options) {
//根据传参链接特点再将参数进行拼接
url: options.link + '?name=' + options.name + '&path=' + options.path + '&review=' + options.review,
}
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

坑二：

使用wx.openDocument,安卓机的转发，转发文件打不开
原因：临时文件名字太长，转发的时候导致后缀名被忽略，故打不开文件
解决：从临时文件名字入手，可以先使用 wx.saveFile 保存到本地（文件可自己命名），再打开文件

wx.saveFile({
//定义本地的存储路径及名称
filePath: wx.env.USER_DATA_PATH + '/' + options.name,
success(res) {
const savedFilePath = res.savedFilePath;
wx.openDocument({
filePath: savedFilePath,
showMenu: true,
success: function (res) {
that.setData({
waitWord: '返回请点击左上角',
});
},
fail: function (err) {
console.log(res)
wx.showToast({
title: '文件预览失败,请稍后重试',
icon: 'none',
duration: 1500
})
}
});
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

坑三：

使用wx.env.USER_DATA_PATH报错（VM544:1 saveFile:fail parameter error: parameter.tempFilePath should be String instead of Undefined;）
原因：是因为这个存储本地找不到径导致的
解决：先将临时内容存储起来再使用官方的保存方式wx.env.USER_DATA_PATH

wx.saveFile({
// 临时存储路径，先有临时存储路径方可使用wx官方的存储本地路径（ wx.env.USER_DATA_PATH ）
tempFilePath: res.tempFilePath,
//定义本地的存储路径及名称
filePath: wx.env.USER_DATA_PATH + '/' + options.name,
success(res) {
const savedFilePath = res.savedFilePath;
wx.openDocument({
filePath: savedFilePath,
showMenu: true,
success: function (res) {
that.setData({
waitWord: '返回请点击左上角',
});
},
fail: function (err) {
console.log(res)
wx.showToast({
title: '文件预览失败,请稍后重试',
icon: 'none',
duration: 1500
})
}
});
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26