uni-app 小红书小程序分享微信群里无法自定义标题和图片
uni-app 小红书小程序分享微信群里无法自定义标题和图片
产品分类:
uniapp/小程序/微信
PC开发环境操作系统:
Windows
PC开发环境操作系统版本号:
10
HBuilderX类型:
正式
HBuilderX版本号:
4.04
第三方开发者工具版本号:
0.0.0
基础库版本号:
0.0.0
项目创建方式:
HBuilderX
示例代码:
<template>
<view>
测
</view>
</template>
<script>
export default {
name: "Product",
components: {},
data() {
return {};
},
onPageScroll(e) {},
async onShow() {},
onUnload() {},
onShareAppMessage() {
return {
title: '测试',
imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png',
};
},
onShareChat() {
return {
title: '测试',
imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png',
};
},
onShareTimeline() {
return {
title: '测试',
imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png',
};
},
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
操作步骤:
onShareAppMessage() {
return {
title: '测试',
imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png',
};
},
onShareChat() {
return {
title: '测试',
imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png',
};
},
onShareTimeline() {
return {
title: '测试',
imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png',
};
},
预期结果:
希望onShareChat能够正常自定义图片和标题
实际结果:
无法更改
bug描述:
描述:通过uniapp和vue2开发的小红书小程序,在分享中,onShareChat分享无法自定义标题和图片,和onShareTimeline一样的配置,但onShareTimeline分享朋友圈就可以,onShareChat始终是小程序默认值。
HBuilderX 4.31.2024102414-alpha 已修复。
经过测试,更新到4.31.2024102414-alpha 这个bug还是存在的
4.45.2025010702-alpha编译出来的/mp-xhs/common/vendor.js文件中也不带有onShareChat,而且,onShareAppMessage不止2处
更新 这是一个临时方案,后续会修复。打开小红书编辑器,打开编译产物 dist/dev/mp-xhs/common/vendor.js
你搜索 ‘onShareAppMessage’, 应该可以找到两个结果,两个都追加一个 ‘onShareChat’
感谢反馈,我测试发现 onShareChat 方法在模拟器可以正常被调用,可以打印信息,看你提供的 demo,编译之后的源码有而没有缺失信息。你可以尝试编写原生 demo 小红书小程序是否可以正常展示 sharechat 从而判断是 uniapp 还是小红书的问题。
如果你有进展,欢迎回复我或者私信我
您好,打印和触发确实没有问题是分享到微信群聊不行,通过我的测试,在小红书的演示小程序中可以正常自定义标题和图片,但经过cli新建的uniapp小红书模版项目,没有业务代码的,确实是不行,朋友圈都没有问题,就是分享群聊一直是默认的值。目前看来应该是uniapp的问题,麻烦看看他和分享朋友圈的有什么区别。导致有差异。
通过和小红书的技术沟通得知,onShareChat只要保证在Page里面框架测就可以识别了,目前来看我在他的演示小程序中确实是这样的,但uniapp创建的小程序没有发现,可能是后面编译的问题,麻烦看看编译后是否是在Page下面。
回复 h***@baozun.com: 嗯,私聊沟通一下吧,技术沟通的原始内容也发我看看
回复 h***@baozun.com: 你好,请按照我说的方案,测试一下。这是一个临时方案,后续会修复。打开小红书编辑器,打开编译产物 dist/dev/mp-xhs/common/vendor.js
你搜索 ‘onShareAppMessage’, 应该可以找到两个结果,两个都追加一个 ‘onShareChat’
然后再测试一下
回复 DCloud_UNI_OttoJi: 如果好了,或者没有好,请告诉我
回复 DCloud_UNI_OttoJi: 通过临时方案可以解决,目前标题和图片可以正常自定义了,感谢大佬。
回复 h***@baozun.com: 看置顶评论
这是两个语法的小程序截图
问题已解决。在dist/dev/mp-xhs/common/vendor.js里面搜索 ‘onShareAppMessage’,可以找到两个结果,两个都追加一个 'onShareChat’后就可以自定义标题和图片了。后续等待官方发布新版本修复。
在开发uni-app小红书小程序时,遇到分享到微信群无法自定义标题和图片的问题,这通常是由于微信小程序平台的限制和uni-app框架的实现方式导致的。微信小程序在分享功能上确实存在一些限制,特别是在自定义分享内容方面。不过,我们可以通过一些代码技巧和配置来尽可能优化分享效果。
1. 配置manifest.json
首先,确保在manifest.json
中正确配置了微信小程序的相关信息,包括appid
等。
{
"mp-weixin": {
"appid": "your-app-id",
"setting": {
"urlCheck": false
}
}
}
2. 使用onShareAppMessage
和onShareTimeline
在uni-app中,可以通过页面生命周期函数onShareAppMessage
和onShareTimeline
来自定义分享内容。但需要注意的是,这些自定义内容在微信群分享中可能不被支持。
Page({
onShareAppMessage: function (res) {
return {
title: '自定义分享标题',
path: '/page/user?id=123',
imageUrl: '/static/images/share.jpg'
};
},
onShareTimeline: function () {
return {
title: '自定义转发到朋友圈的标题',
query: '/page/user?id=123',
imageUrl: '/static/images/share.jpg'
};
}
});
3. 微信群分享的替代方案
由于微信群分享不支持自定义标题和图片,我们可以考虑以下替代方案:
- 引导用户点击链接:在分享链接的文案中引导用户点击链接查看具体内容,这样用户点击后会跳转到小程序页面,页面内可以展示自定义的标题和图片。
- 利用小程序卡片:通过生成小程序卡片(如使用微信开放平台的接口生成)来分享,但这种方式通常需要后端支持,并且有一定的操作复杂度。
4. 注意事项
- 确保分享的链接在小程序内是可访问的,即路径和参数都是正确的。
- 分享的图片链接需要是小程序可访问的合法域名下的图片。
- 由于微信群分享的限制,自定义内容可能无法完全生效,需要做好用户引导和体验优化。
通过上述配置和代码,可以在一定程度上优化uni-app小红书小程序在微信群中的分享效果,但完全自定义标题和图片可能仍然受限。开发者需要根据实际情况做出调整和妥协。