fix(diy-recommend-code): 修复小程序分享图仍为全屏截图

之前的方案是用户点"立即分享"按钮时,onShareClick 异步调
generateSharePoster() 生成海报后写 storage。但这有问题:

微信小程序 <button open-type="share"> 流程:
1. 用户点 button → 同步触发页面级 onShareAppMessage
2. onShareAppMessage 同步返回 shareData(必须含 imageUrl)
3. 微信用这个 imageUrl 展示分享面板

onShareClick 的异步 generateSharePoster 永远来不及,onShareAppMessage
读取 storage 时海报还没生成,所以微信用全屏截图。

修复:预生成海报。
- 在 loadCode 成功回调里,推荐码拿到后立即调 _prepareSharePoster()
  异步生成海报,生成完写入 _recommendShareData storage
- loadQrcodeIfNeeded 成功回调里也再调一次,确保带二维码海报覆盖
  不带二维码的占位版

_prepareSharePoster():
- #ifdef MP-WEIXIN 包住,仅小程序执行
- 调 generateSharePoster 拿 tempFilePath
- 写入 _recommendSharePoster 缓存 + _recommendShareData 当前值
- 用户点分享时,storage 已经有最新海报,onShareAppMessage
  读取后返回 imageUrl,微信用这个图展示分享面板
This commit is contained in:
2026-08-08 11:46:23 +08:00
parent 4a92d9bec2
commit 551d6c103d

View File

@@ -1121,7 +1121,9 @@ export default {
if (consent) {
uni.showToast && uni.showToast({ title: '获取成功', icon: 'success' });
}
// 拿到码后如果 showQR=true,顺便调 getMyQrcode(占位接口)
// 拿到码后立即预生成分享海报(不等二维码,先占位;二维码拿到后会再次更新)
try { vm._prepareSharePoster(); } catch(e){}
// 拿到码后如果 showQR=true,顺便调 getMyQrcode(占位接口)
try { vm.loadQrcodeIfNeeded(); } catch(e){}
},
fail: function(err){
@@ -1214,10 +1216,43 @@ export default {
if (res && res.code === 0 && res.data && res.data.qrcode_url) {
vm.qrcodeUrl = String(res.data.qrcode_url);
}
// 拿到二维码后立即预生成「仅推荐码组件」分享海报
// 这样用户点"立即分享"时,storage 里已有海报,页面级 onShareAppMessage
// 同步读取后返回 imageUrl,微信就不会用全屏截图
try { vm._prepareSharePoster(); } catch(e) {}
}
});
} catch (e) {}
},
/**
* 预生成分享海报(异步,完成后写入 _recommendShareData storage)
* 小程序端:onShareAppMessage 读取这个 storage 拿到 imageUrl
* 非小程序端:跳过,onShareClick 不依赖它
*/
_prepareSharePoster() {
const vm = this;
// 仅小程序需要这个(其他端 onShareClick 不依赖 storage)
// #ifdef MP-WEIXIN
if (!this.code) return;
try {
this.generateSharePoster().then(function(posterPath) {
if (!posterPath) return;
try {
uni.setStorageSync('_recommendSharePoster', posterPath);
const data = {
title: (vm.nc && (vm.nc.shareTitle || vm.nc.title)) || '邀您入驻低空经济产业平台',
path: vm.extractMiniProgramPath(),
imageUrl: posterPath
};
uni.setStorageSync('_recommendShareData', JSON.stringify(data));
console.log('[推荐码分享]海报预生成完成');
} catch(e) {}
}).catch(function(err) {
console.warn('[推荐码分享]海报预生成失败', err);
});
} catch(e) {}
// #endif
},
onShareClick() {
console.log('[推荐码分享]点击分享按钮,完整推广链接:', this.formatShareLink,'当前推荐码:',this.code);
@@ -1259,14 +1294,37 @@ onShareClick() {
console.log('分享链接准备,原始配置', v);
console.log('生成的分享完整路径:', this.extractMiniProgramPath());
// 先用上次缓存的海报路径占位(避免用户快速二次分享时空白)
var cachedPoster = '';
try { cachedPoster = uni.getStorageSync('_recommendSharePoster') || ''; } catch(e) {}
try {
var shareData = {
title: v.shareTitle || v.title || '邀您入驻低空经济产业平台',
path: this.extractMiniProgramPath(),
imageUrl: v.shareImageUrl || ''
imageUrl: cachedPoster || v.shareImageUrl || ''
};
uni.setStorageSync('_recommendShareData', JSON.stringify(shareData));
} catch(e) {}
// 异步生成「仅推荐码组件」的海报图,生成后更新 storage
// 微信端:onShareAppMessage 触发时 _recommendShareData 中已是新海报
this.generateSharePoster().then(function(posterPath) {
if (!posterPath) return;
try {
// 缓存本次海报,下次分享时直接用
uni.setStorageSync('_recommendSharePoster', posterPath);
var data = {
title: v.shareTitle || v.title || '邀您入驻低空经济产业平台',
path: vm.extractMiniProgramPath(),
imageUrl: posterPath
};
uni.setStorageSync('_recommendShareData', JSON.stringify(data));
console.log('[推荐码分享]海报已生成并写入 storage', posterPath);
} catch(e) {}
}).catch(function(err) {
console.warn('[推荐码分享]海报生成失败,使用 fallback', err);
});
return;
// #endif
},