uni-app onShareAppMessage 支付宝小程序分享字段不兼容

发布于 1周前 作者 itying888 来自 Uni-App

uni-app onShareAppMessage 支付宝小程序分享字段不兼容

类别 信息
产品分类 uniapp/小程序/阿里
PC开发环境 Windows
操作系统版本 22H2
HBuilderX类型 正式
HBuilderX版本 4.29
工具版本 3.9.22
基础库版本 2.9.60
项目创建方式 HBuilderX

操作步骤:

```javascript
onShareAppMessage(res) {  
    return {  
        title: '标题',  
        path: 'pages/index/index',  
        bgImgUrl: 'bgImgUrl.png',  
        scImgUrl: 'scImgUrl.png',  
    }  
},

预期结果:

支持配置scImgUrl 字段

实际结果:

不支持配置 scImgUrl 字段

bug描述:

```javascript
onShareAppMessage(res) {  
    return {  
        title: '标题',  
        path: 'pages/index/index',  
        bgImgUrl: 'bgImgUrl.png',  
        scImgUrl: 'scImgUrl.png',  
    }  
},

支付宝小程序开发文档已经在2022年支持分享scImgUrl字段
这是支付宝社区相关问答详情链接

后面发现uni-app官方文档并不支持 scImgUrl 该字段

下面是支付宝小程序文档 分享相关字段


9 回复

文档不支持你试试直接写会不会生效呢?有可能是更新不及时但是不影响使用


肯定是试过的啊,要是可以那我也不会来这提问了

经过我测试, vue3 支付宝小程序分享给支付宝用户,传递 scImage功能是正常的,参考下面代码,如果你是说文档没有更新,后续文档会更新说明
onShareAppMessage(res) {
console.log(‘on share app message’, res);

        return {  
            title: '标题345',  
            desc: '这是描述123',  
            path: '/pages/index/alipay-share',  
            bgImgUrl: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/hello-uniappx-qrcode.png',  
            scImgUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png',  
        }  
    }<br>

我用的vue2,设置scImgUrl没生效

回复 d***@163.com: scImageUrl 是分享给支付宝好友时候的图片,我测试是好的,vue2 vue3 到支付宝真机都正常。展示效果为我上面贴的 uniapp 的宣传语。你确定使用我给的 demo 了吗

回复 d***@163.com: 这个api 到具体用法我在上面给出了案例,如果你确定有问题,新建一个工程,上传到这里,我跑一下你给到 demo

回复 DCloud_UNI_OttoJi: onShareAppMessage(res) { let portal = uni.getStorageSync(“portal”) || {} return { title: portal.applicationName, path: ‘pages/interpage/interpage’, bgImgUrl: config.basePath + config.pathname + ‘static/image/1hMIYHoa/share_bgImgUrl.png’, scImgUrl: config.basePath + config.pathname + ‘static/image/1hMIYHoa/share_scImgUrl.png’, } }, 我这边代码和你提供的差不多 在支付宝小程序中确实只有 bgImgUrl生效了, scImgUrl字段没生效

回复 d***@163.com: 你写个工程,发出来我对比一下。scImgUrl 在哪里体现你知道吧,在支付宝好友的消息里。我自测 vue2/vud3 是生效的,给工程吧

在uni-app开发过程中,针对支付宝小程序分享功能的实现,确实可能会遇到一些字段不兼容的问题。onShareAppMessage 是uni-app提供的一个生命周期函数,用于处理页面分享的逻辑。然而,不同的小程序平台(如微信、支付宝等)在分享接口的实现上会有一些差异,这就导致了开发者在编写分享功能时需要针对不同平台进行适配。

以下是一个针对uni-app在支付宝小程序中实现分享功能的代码案例,以及如何处理字段不兼容的问题:

// 在页面的 script 部分定义 onShareAppMessage 函数
export default {
  onShareAppMessage(res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '分享标题', // 分享的标题
      path: '/pages/index/index', // 分享路径
      imageUrl: '/static/share_image.png', // 分享图标
      success: function (res) {
        // 转发成功
        console.log('转发成功', res)
      },
      fail: function (err) {
        // 转发失败
        console.error('转发失败', err)
      }
    }
  },
  onLoad() {
    // 判断当前平台,如果是支付宝小程序,则进行特殊处理
    #ifdef MP-ALIPAY
      // 支付宝小程序特有的处理逻辑,比如调整分享字段
      uni.getSystemInfoSync().platform === 'alipay' && this.alipayShareConfig();
    #endif
  },
  methods: {
    alipayShareConfig() {
      // 支付宝小程序分享字段的兼容处理
      // 示例:如果支付宝小程序不支持 imageUrl 字段,则可以在这里进行移除或替换
      const shareData = {
        title: '分享标题(支付宝版)',
        path: '/pages/index/index',
        // imageUrl: 在支付宝小程序中可能不支持,可以注释掉或替换为其他逻辑
        // imageUrl: '/static/share_image.png',
        success: function (res) {
          console.log('支付宝小程序转发成功', res)
        },
        fail: function (err) {
          console.error('支付宝小程序转发失败', err)
        }
      };

      // 这里可以动态设置分享数据,或者根据平台特性调整分享逻辑
      // 例如,如果需要在支付宝小程序中分享时附带特定参数,可以在这里处理
      // shareData.query = { ... };

      // 注意:这里的代码并未直接修改 onShareAppMessage 的返回值,
      // 因为 onShareAppMessage 的返回值是固定的格式,且需要在函数内部直接返回。
      // 此处仅为展示如何在不同平台下处理分享数据的逻辑。
      // 实际使用时,可能需要结合其他方式(如全局变量、Vuex等)来动态调整分享数据。
    }
  }
}

在上述代码中,我们通过条件编译指令 #ifdef MP-ALIPAY 来判断当前是否为支付宝小程序平台,并在 alipayShareConfig 方法中进行了分享字段的兼容处理。需要注意的是,onShareAppMessage 的返回值格式是固定的,且需要在函数内部直接返回,因此我们不能直接在 alipayShareConfig 方法中修改它的返回值。实际使用时,可以结合其他方式(如全局变量、Vuex等)来动态调整分享数据。

回到顶部