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:
@@ -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
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user