uniapp 小程序分享onShareAppMessage图片

实现 UniApp 小程序分享时自定义分享图片
在 UniApp 中，onShareAppMessage 方法用于配置页面的转发行为。为了实现自定义分享图片的功能，可以通过 imageUrl 属性指定要显示的缩略图地址。
当需要异步获取资源（如保存图片），应确保这些操作完成后再返回分享信息对象。下面是一个完整的例子展示如何通过 Promise 处理图像保存逻辑，并将其应用于分享链接：
// 定义 saveImage 函数作为 promise 返回结果
function saveImage() {
return new Promise((resolve, reject) => {
// 假设这里执行一些网络请求或其他异步任务来保存图片
setTimeout(() => {
resolve({ code: 200 }); // 成功状态码模拟
}, 1000);
});
}

export default {
methods: {
async onShareAppMessage() {
try {
const saveRes = await saveImage();
if (saveRes.code === 200) {
return {
title: '这是一个测试标题',
path: '/pages/index', // 跳转路径
imageUrl: 'https://example.com/path/to/image.jpg' // 自定义分享封面图URL
};
}
} catch (error) {
console.error('Failed to get image:', error);
}
}
}
}
登录后复制
此代码片段展示了如何创建一个名为 saveImage 的辅助函数，它会返回一个新的 Promise 对象，在这个案例里简单地使用了定时器来模仿实际场景下的延迟加载过程；接着是在组件的方法属性下定义了一个带有 async/await 关键字修饰符版本的 onShareAppMessage() 方法，用来等待上述提到的操作完成后才给出最终的结果给微信小程序平台去渲染分享卡片[^1]。
需要注意的是，imageUrl 应指向有效的远程 URL 或者本地静态资源路径，这样才能保证用户能够看到预期中的预览效果。此外，还可以根据业务需求调整其他字段比如 title, path 来定制更丰富的用户体验[^2]。