微信小程序-onShareAppMessage转发gif图不展示问题

太过爱你忘了你带给我的痛 2023-05-22 10:24 11阅读 0赞

>    现场报道事故现场，发现在用ios转发分享自定义图片(imageUrl)所带的 gif 图是可以看到，但是使用Android机测试，并没有显示，偶然性？还是必然性？于是拿借了几台苹果和安卓机分别进行测试，结果还是一样！无奈之及，结果在文档中找到了我想要的答案！

### 问题描述： ###

在使用onShareAppMessage分享时，imageUrl附带的是gif图，在IOS手机上能正常显示图片，但Android手机上就不行了！

### 代码说明： ###

onShareAppMessage: function (res) {
        if (res.from === 'button') {
          // 来自页面内转发按钮
          console.log(res.target)
        }
        return {
          title: this.data.nickName + '邀请您加入',
          path: 'pages/index/login/login?studentId=' + this.data.teacherId,
          imageUrl: this.data.image + '/teacherIcon.jpg',
          success: function (res) {
            console.log(res)
            // 转发成功之后的回调
            if (res.errMsg == 'shareAppMessage:ok') {
              wx.showToast({
                title: '分享成功',
                icon: 'none'
              })
            }
          },
          fail: function () {
            // 转发失败之后的回调
            if (res.errMsg == 'shareAppMessage:fail cancel') {
              wx.showToast({
                title: '分享失败',
                icon: 'none'
              })
              // 用户取消转发
            } else if (res.errMsg == 'shareAppMessage:fail') {
              // 转发失败，其中 detail message 为详细失败信息
              wx.showToast({
                title: '分享失败',
                icon: 'none'
              })
            }
          },
          complete: function () {
            // 转发结束之后的回调（转发成不成功都会执行）
            wx.showToast({
              title: '分享完成',
              icon: 'none'
            })
            console.log("success")
            wx.navigateBack({
              delta: -1
            })
          }
        }
      },

### 官文档阐述: ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw_size_16_color_FFFFFF_t_70][]

官文：[https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html\#onshareappmessageobject-object][https_developers.weixin.qq.com_miniprogram_dev_reference_api_Page.html_onshareappmessageobject-object]

### 解决思路: ###

建议按照微信小程序开发文档说明来，将gif或者其他的格式图片统一转成 png 或者jpg ,避免出现不可控的bug！

> 切记不要直接修改图片后缀来达到图片格式转换！推荐通过图片格式转换工具！在线转换工具众多，就不推荐了 ！
> 
> 毕竟这个坑我也踩过了，直接通过把gif格式改成了png，图片在分享转发时还是无展示！

--------------------

### 往期回顾： ###

【1】[js数组的拷贝赋值复制，你真的懂？][js]

【2】[怎么防止用户表单二次提交，你知道吗？][Link 1]

【3】[页面如何调用组件内置方法？][Link 2]

--------------------

> ❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ
> 
> ❤如果喜欢大白兔分享的文章，就给大白兔点个关注吧！(๑′ᴗ‵๑)づ╭❤～
> 
> ❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号：708072830】
> 
> ❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复讨论（请勿发表攻击言论）。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw_size_16_color_FFFFFF_t_70]: /images/20230521/b887246760f64707b7bea74a41e9a8a5.png
[https_developers.weixin.qq.com_miniprogram_dev_reference_api_Page.html_onshareappmessageobject-object]: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onshareappmessageobject-object
[js]: https://blog.csdn.net/weixin_43970743/article/details/105528806
[Link 1]: https://blog.csdn.net/weixin_43970743/article/details/105366271
[Link 2]: https://blog.csdn.net/weixin_43970743/article/details/105382576