uni-app 小红书小程序分享微信群里无法自定义标题和图片

发布于 1周前 作者 vueper 来自 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始终是小程序默认值。

bug图片


17 回复

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: 看置顶评论

回复 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. 使用onShareAppMessageonShareTimeline

在uni-app中,可以通过页面生命周期函数onShareAppMessageonShareTimeline来自定义分享内容。但需要注意的是,这些自定义内容在微信群分享中可能不被支持。

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小红书小程序在微信群中的分享效果,但完全自定义标题和图片可能仍然受限。开发者需要根据实际情况做出调整和妥协。

回到顶部