微信小程序页面分享
分享方式
- 使用u-button open-type="share" 进行分享
- 使用uni.share的第三方进行调用分享
前端实现
使用open-type
页面处理
java
<!-- 底部二维码区域 -->
<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>
页面处理方法
java
// 添加页面特定的分享配置（覆盖全局分享）
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'
}
},这里直接覆盖全局的方法，在详情页点击分享触发详情页的分享，在其他地方触发小程序的分享
好友分享
朋友圈分享
查看分享页回调是否正常
全局分享处理
java
// 修改全局分享配置
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'
}
}这里做兼容，判断是否有详情页，如果没有就返回全局的分享页
java
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
检查二维码图片
java
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);
}
},调用文件分享
java
// 直接分享方法（同步执行）
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);
}
},图片分享兜底
java
// 通用图片分享方法
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"
});
}
});
}
});
},直接调用分享实现
java
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"
});
}
},
java
// 新增：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
});
});
},注意：
小程序分享需要使用真机调试