Uniapp丨微信小程序自定义分享文件至好友

微信小程序自定义分享文件至好友

1、获取网络文件: 使用uni.downloadFileAPI下载网络文件。
2、保存文件到本地: 将下载的文件保存到本地。
3、使用微信小程序的分享功能: 调用微信小程序的分享API，将本地文件发送给好友。

1. 下载网络文件

async downloadFile(url) {
   	return new Promise((resolve, reject) => {
   			uni.downloadFile({
   				url: url,
   				success: (res) => {
   					if (res.statusCode === 200) {
   						resolve(res.tempFilePath);
   					} else {
   						reject(new Error('下载失败'));
   					}
   				},
   				fail: (err) => reject(err)
   			});
   	});
},

2. 保存文件到本地

saveFile(tempFilePath) {
	return new Promise((resolve, reject) => {
		wx.getFileSystemManager().saveFile({
			tempFilePath: tempFilePath,
			success: (res) => {
				resolve(res.savedFilePath);
			},
			fail: (err) => reject(err)
		});
	});
}

3. 调用微信小程序分享API

注：这里使用的的是uviewUI，以此为例。

首先安排一个按钮，点击触发 getFile 方法

<u-button type="primary" shape="circle" text="发送至聊天" @click="getFile"></u-button>

async getFile() {
	// 获取到文件的下载链接 url 以http或https开头的下载链接
	let url = "文件的下载链接"
	// 调用步骤1的文件下载方法
	const tempFilePath = await this.downloadFile(url);
	// 调用步骤2的保存文件到本地的方法
	this.savedFilePath = await this.saveFile(tempFilePath);
	console.log('文件保存成功，文件路径为：', this.savedFilePath);
	// 若你的下载地址是通过后端接口获取，要通过弹框的方式来中转一下，调起微信分享好友的API，因为该API不支持在回调中，会导致失败。点击确定调 shareFile 方法
	uni.showModal({
		title: '文件分享',
		content: '自定义弹框内容',
		success: (res) => {
			if (res.confirm) {
				console.log('用户点击确定');
				this.shareFile();
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
},

shareFile() {
	let arr = this.savedFilePath.split('.');
	uni.shareFileMessage({
		filePath: this.savedFilePath,
		fileName: '自定义分享的文件名' + `.${arr[1]}`,
		success: () => {
			console.log(err, '分享文件成功');
		},
		fail: (err) => {
			console.log(err, '分享文件失败');
		}
	});
},

结尾（完整代码）

<template>
	<u-button type="primary" shape="circle" text="发送至聊天" @click="getFile"></u-button>
</template>

methods: {
		async getFile() {
			let url = "文件的下载链接"
			const tempFilePath = await this.downloadFile(url);
			this.savedFilePath = await this.saveFile(tempFilePath);
			console.log('文件保存成功，文件路径为：', this.savedFilePath);
			uni.showModal({
				title: '文件分享',
				content: '自定义弹框内容',
				success: (res) => {
					if (res.confirm) {
						this.shareFile();
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		// 分享至好友
		shareFile() {
			let arr = this.savedFilePath.split('.');
			uni.shareFileMessage({
				filePath: this.savedFilePath,
				fileName: fileName: '自定义分享的文件名' + `.${arr[1]}`,
				success: () => {
					this.close();
				},
				fail: (err) => {
					console.log(err, '分享文件失败');
				}
			});
		},
		// 下载网络文件
		async downloadFile(url) {
			return new Promise((resolve, reject) => {
				uni.downloadFile({
					url: url,
					success: (res) => {
						if (res.statusCode === 200) {
							resolve(res.tempFilePath);
						} else {
							console.log(res, '-------');
							reject(new Error('下载失败'));
						}
					},
					fail: (err) => reject(err)
				});
			});
		},
		// 保存文件到本地
		saveFile(tempFilePath) {
			return new Promise((resolve, reject) => {
				wx.getFileSystemManager().saveFile({
					tempFilePath: tempFilePath,
					success: (res) => {
						resolve(res.savedFilePath);
					},
					fail: (err) => reject(err)
				});
			});
		}
}

浅浅记录一下，当然也可以进一步封装一下，更具清晰性。如有不足，欢迎指出…😊😊😊