uniapp转发分享到微信时的链接不显示缩略图问题

问题描述

发现分享到微信时链接的缩略图偶尔显示偶尔不显示

原因分析：

一顿查找发现是我使用的图片太大了，比例也不对。

然后我使用我们的小logo作为缩略图就能每次都显示了。

我这里是推荐使用1：1、100*100大小的图片来作为缩略图

那么，问题来了，uni如何压缩图片并将图片裁剪为1：1大小且图片不变形状呢

解决方案：

方案一： uni.compressImage

uni.compressImage({
  src: res,
  quality: 80,              // 压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）
  compressedWidth: 100,     //压缩后图片的宽度，单位为px
  compressedHeight: 100,    // 压缩后图片的高度，单位为px
  success: r => {
    // 上传图片方法
    uniCloudUploadFile([r.tempFilePath], 2)
  }
})

方案二：uniCloud

第二种方法是因为我这边上传图片是直接放到uniCloud中了，所以可以直接通过url来实现图片的压缩、裁剪等....具体的大家可以看看uniCloud官方中所描述的，我这里展示一下我的代码片段

const share = (scene:string) => {
  // 默认第一个标签为分享的标题
  let title = handleCircle.value.hotTags?'#'+handleCircle.value.hotTags.replace(/#/g, '').split(',')[0]:"#推荐#"
  
  let shareParam:any = {
    provider: "weixin",
    type: handleCircle.value.videoPath?4:0,   //0-图文 1-纯文字 2-纯图片 3-音乐 4-视频  5-小程序
    title: title, // 分享的标题
    scene: scene,
    summary: handleCircle.value.contentText || "这个内容太棒了，快来get吧~",
    // '?imageView2/1/w/<LongEdge>/h/<ShortEdge>'  限定缩略图的宽最少为`<LongEdge>`，高最少为`<ShortEdge>`，进行等比缩放，居中裁剪；如果只指定 w 参数或只指定 h 参数，代表限定为长宽相等的正方图。
    imageUrl: imgUrl + '?imageView2/1/w/100',  // 图片：缩略图链接
    mediaUrl: netConfig.base_h5URL + "/pages/circle/index?id=" + handleCircle.value.id,  // 视频：视频链接  type=4 必填
    href: netConfig.base_h5URL + "/pages/circle/index?id=" + handleCircle.value.id, // 邦圈链接 type=0 必填
  };
  uni.share({
    ...shareParam,
    success: function (res: any) {
      // console.log("success:" + JSON.stringify(res));
    },
    fail: function (err: any) {
      // console.log("fail:" + JSON.stringify(err));
    }
  });
}