Table of contents
1. How to implement the download function in H5
2. Wechat applets are very different from H5 in realizing the function of downloading resources
4. Image preview, save, forward, and favorite: uni.previewImage()
1. How to implement the download function in H5
1. Yes, it is very simple to implement resource download on the browser page: just wrap a layer of <a href="#"></a> around the resource and add a link inside, and you're done!
2. Wechat applets are very different from H5 in realizing the function of downloading resources
1. When I first started to download resources in uni-app, I simply thought that it was the same as the PC side, just put a tag on it.
However, an error will be reported when it is packaged and compiled with the WeChat developer tool, because it packages and compiles the a tag into a navigator tag. And this component is similar to the component in HTML
<a>, but it can only jump to the local page. Target pages must be registered in pages.json.
2. Put a tag, run it on Google Chrome, and click to pick it up to download:
3. The same code runs on the WeChat developer tool, but the code changes and an error is reported, because the link is not a local page but a picture link obtained by a remote service.
3. The WeChat applet implements the function of downloading files (doc, pdf, etc., not pictures) (download->save->preview)
1. Download (cache, it is a temporary file, not saved): uni.downloadFile()
2. Save to local (automatically save after download): uni.getFileSystemManager().saveFile()
3. Preview the file (after previewing, you can choose to save it manually): uni.openDocument()
1. uni.downloadFile() is saved in a temporary file
Files downloaded by this API are stored in a temporary folder, and will be deleted after a while if not manually deleted. Taking WeChat developer tools as an example, the downloaded file is saved in:
......\WeChat Developer Tools\User Data\59e9af1112483f5e41772e86ada7c016\WeappSimulator\WeappFileSystem\o6zAJszSPKIKNM8ZZHjQ_ay2z8pg\wx0fbdc7498b76fad7\tmp
The tmp file is a special place to save temporary files.
Therefore, other methods are needed to meet the needs of long-term preservation.
2. Preview temporary files and preview long-term saved files
uni.downloadFile()+uni.openDocument() - preview files under temporary files (only saved in tmp folder);
uni.downloadFile()+uni.getFileSystemManager().saveFile()+uni.openDocument()
—— Preview the files under long-term files (only saved in the store folder).
3. Code example
download(file) {
uni.showLoading({
title: '下载中'
});
//下载文件
uni.downloadFile({ //只能是GET请求
url: file, //请求地址(后台返回的码流地址)
success: (res) => {
//下载成功
if (res.statusCode === 200) {
//保存文件
let tempFile = res.tempFilePath;
//保存成功之后 打开文件
uni.getFileSystemManager().saveFile({
tempFilePath: tempFile,
// filePath: wx.env.USER_DATA_PATH + '/' + '上传成员.pdf',//自定义文件名
success(res) {
console.log(res)
uni.openDocument({
filePath: res.savedFilePath,
showMenu: true, //是否可以分享
success: (res) => {
uni.hideLoading()
console.log(res);
},
fail: (e) => {
uni.showToast({
title: '打开失败',
icon: "error"
})
}
})
}
})
}
},
fail: (e) => {
console.log(e, '文件下载失败')
uni.showToast({
title: '文件下载失败',
icon: "error",
})
}
});
}4. Image preview, save, forward, and favorite: uni.previewImage()
1. Similarly, in the process of browser debugging on the PC side, the preview and download of pictures can be realized through the a tag, but the WeChat applet is completely different, and it is more complicated.
2. Code example. Note that the urls attribute type is an array, and a picture link is placed
methods: {
pictureReview(arr) {
uni.previewImage({
urls: [arr],
longPressActions: {
itemList: ['发送给朋友', '保存图片', '收藏'],
success: function(data) {
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
},
fail: function(err) {
console.log(err.errMsg);
}
}
});
}
}5. I am currently encountering a problem with the 'About file preview uni.openDocument()' API, welcome to discuss in the comment area
The code is packaged and compiled in the WeChat developer tool, and it can be adjusted, and the mobile phone (ios\Android) real machine debugging can also be adjusted. However, when the PC-side WeChat applet is debugged on the real machine, it can be saved but the preview fails. I have been looking for the reason for a long time but failed, does anyone know the reason?