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