当前位置: 首页 > 工具软件 > data_location > 使用案例 >

微信小程序webview中H5的window.location下载安卓失效问题(wx.env.USER_DATA_PATH报错,wx.openDocument安卓转发文件打不开)

顾俊誉
2023-12-01

一、背景

  • 项目是使用微信小程序组件封装的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]
});

小程序代码

//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)
            }
        })
    },

    //   },
})

三、踩坑指南

坑一:

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,
}
 

坑二:

使用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
})
}
});
}
})

坑三:

使用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
})
}
});
}
})
 类似资料: