微信小程序页面分享

微信小程序页面分享

分享方式

• 使用u-button open-type=“share” 进行分享

• 使用uni.share的第三方进行调用分享

前端实现

使用open-type

页面处理

<!-- 底部二维码区域 -->
<view class="qrcode-section">
	<view class="qrcode-container">
		<image :src="'data:image/png;base64,'+detailInfo.qrCode" class="qrcode-img" mode="widthFix" />
		<text class="qrcode-text">扫描二维码查看钱币详情</text>
	</view>
	<!-- 新增分享按钮  open-type="share"-->
	<u-button class="share-btn" @click="handleShare" open-type="share">
		<u-icon name="share" :color="themeColor" size="44"></u-icon>
		<text class="share-text">分享给朋友</text>
	</u-button>
</view>

页面处理方法

// 添加页面特定的分享配置（覆盖全局分享）
onShareAppMessage(res) {
	// 页面分享（右上角菜单分享）
	return {
		title: `钱币成交详情：${this.detailInfo.auctionName}`,
		// path: `/pages/report/reportDetail?auctionId=${encodeURIComponent(JSON.stringify(this.detailInfo.auctionId))}`,
		path: `/pages/report/reportDetail?auctionId=${this.detailInfo.auctionId}`,
		imageUrl: this.swiperList[0]?.url || '/static/img/share.jpg'
	}
},
onShareTimeline() {
	// 分享到朋友圈
	return {
		title: `钱币成交详情：${this.detailInfo.auctionName}`,
		query: `auctionId=${this.detailInfo.auctionId}`,
		imageUrl: this.swiperList[0]?.url || '/static/img/share.jpg'
	}
},

这里直接覆盖全局的方法，在详情页点击分享触发详情页的分享，在其他地方触发小程序的分享

好友分享

朋友圈分享

查看分享页回调是否正常

全局分享处理

// 修改全局分享配置
onShareAppMessage(res) {
	// 获取当前页面实例
	const pages = getCurrentPages();
	const currentPage = pages[pages.length - 1];

	// 检查是否在详情页
	if (currentPage.route === 'pages/reportDetail/reportDetail') {
		// 详情页的分享配置
		const detailInfo = currentPage.$vm.detailInfo;
		return {
			title: `钱币成交详情：${detailInfo.auctionName}`,
			path: `/pages/reportDetail/reportDetail?auctionId=${encodeURIComponent(JSON.stringify(detailInfo.auctionId))}`,
			imageUrl: detailInfo.swiperList?.[0]?.url || '/static/img/share.jpg'
		}
	}

	// 默认全局分享配置
	return {
		title: '我在使用"江南站成交行情查询工具"小程序，你也要不要试试呢~',
		path: 'pages/report/report',
		imageUrl: '/static/img/share.jpg'
	}
},

onShareTimeline(res) {
	// 获取当前页面实例
	const pages = getCurrentPages();
	const currentPage = pages[pages.length - 1];

	// 检查是否在详情页
	if (currentPage.route === 'pages/reportDetail/reportDetail') {
		// 详情页的分享配置
		const detailInfo = currentPage.$vm.detailInfo;
		return {
			title: `钱币成交详情：${detailInfo.auctionName}`,
			query: `auctionId=${encodeURIComponent(JSON.stringify(detailInfo.auctionId))}`,
			imageUrl: detailInfo.swiperList?.[0]?.url || '/static/img/share.jpg'
		}
	}

	// 默认全局分享配置
	return {
		title: '我在使用"江南站成交行情查询工具"小程序，你也要不要试试呢~',
		path: 'pages/report/report',
		imageUrl: '/static/img/share.jpg'
	}
}

这里做兼容，判断是否有详情页，如果没有就返回全局的分享页

async onLoad(options) {
	// 处理扫码进入的场景
	if (options.scene) {
		console.log("记录id：" + options.scene);
		await this.getDetail(options.scene);
	}
	// list跳转详情页场景
	else if (options.item) {
		this.detailInfo = JSON.parse(decodeURIComponent(options.item));
		await this.getDetail(this.detailInfo.auctionId);
	}
	// 分享直接传入id查询场景
	else if (options.auctionId) {
		await this.getDetail(options.auctionId);
	}
	await this.$store.dispatch('user/loadUserInfo')
},

使用uni.share

注意：这里只能是app使用

系统配置

manifest.json 中配置分享的小程序id

检查二维码图片

async handleShare() {
	// 确保二维码数据存在
	if (!this.detailInfo.qrCode) {
		uni.showToast({
			title: "二维码加载中，请稍后",
			icon: "none"
		});
		return;
	}

	try {
		// 将base64转换为临时文件路径（同步操作）
		const filePath = await this.base64ToTempFilePath(this.detailInfo.qrCode);

		// 立即执行分享操作
		this.directShare(filePath);
	} catch (error) {
		console.error("分享处理错误:", error);
		uni.showToast({
			title: "分享处理失败",
			icon: "none"
		});
		//
		this.shareWithImage(filePath);
	}
},

调用文件分享

// 直接分享方法（同步执行）
directShare(filePath) {
	// 优先使用微信专用API
	if (uni.canIUse('shareFileMessage')) {
		uni.shareFileMessage({
			filePath,
			success: () => {
				uni.showToast({
					title: "分享成功",
					icon: "success"
				});
			},
			fail: (err) => {
				console.error("文件分享失败:", err);
				this.shareWithImage(filePath);
			}
		});
	} else {
		// 其他环境使用通用分享
		this.shareWithImage(filePath);
	}
},

图片分享兜底

// 通用图片分享方法
shareWithImage(filePath) {
	uni.share({
		provider: "weixin",
		scene: "WXSceneSession",
		type: 0,
		imageUrl: filePath,
		success: () => {
			uni.showToast({
				title: "分享成功",
				icon: "success"
			});
		},
		fail: (err) => {
			console.error("图片分享失败:", err);

			// 终极解决方案：保存图片到相册
			uni.saveImageToPhotosAlbum({
				filePath,
				success: () => {
					uni.showToast({
						title: "图片已保存到相册，请手动分享",
						icon: "none",
						duration: 3000
					});
				},
				fail: (saveErr) => {
					console.error("保存图片失败:", saveErr);
					uni.showToast({
						title: "分享失败，请截图保存二维码",
						icon: "none"
					});
				}
			});
		}
	});
},

直接调用分享实现

async handleShare() {
	try {
		// 1. 将base64转换为临时文件路径
		const base64 = this.detailInfo.qrCode;
		const filePath = await this.base64ToTempFilePath(base64);

		// 2. 调用分享API
		uni.share({
			provider: "weixin",
			scene: "WXSceneSession", // 分享到聊天界面
			type: 2, // 2分享图片
			imageUrl: filePath,
			title: "钱币成交详情分享",
			summary: `钱币名称：${this.detailInfo.auctionName}，成交价：￥${this.formatCurrency(this.detailInfo.amount)}`,
			success: () => {
				uni.showToast({
					title: "分享成功",
					icon: "success"
				});
			},
			fail: (err) => {
				console.error("分享失败:", err);
				uni.showToast({
					title: "分享失败",
					icon: "none"
				});
			}
		});
	} catch (error) {
		console.error("分享处理错误:", error);
		uni.showToast({
			title: "分享处理失败",
			icon: "none"
		});
	}
},

// 新增：base64转临时文件路径
base64ToTempFilePath(base64) {
	return new Promise((resolve, reject) => {
		const fsm = uni.getFileSystemManager();
		const FILE_BASE_NAME = 'tmp_share_img';

		// 生成临时路径
		const filePath = `${uni.env.USER_DATA_PATH}/${FILE_BASE_NAME}.jpg`;

		// 写入文件
		fsm.writeFile({
			filePath,
			data: base64,
			encoding: 'base64',
			success: () => resolve(filePath),
			fail: reject
		});
	});
},

注意：
小程序分享需要使用真机调试