uni-app 3.2.15 nvue中 uni.share 微信分享不支持120*120以上的图片

uni-app 3.2.15 nvue中 uni.share 微信分享不支持120*120以上的图片

开发环境 版本号 项目创建方式
PC macOS Big Sur 11.2.3 HBuilderX
手机 iOS
iOS 15
模拟器
iPhone 13 
产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

手机系统：iOS

手机系统版本号：iOS 15

手机厂商：模拟器

手机机型：iPhone 13

页面类型：nvue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

```html
<template>  
  <view>  
    <text>图文分享测试 200*200图片尺寸</text>  
    <button @click="onShare('weixin', 'WXSceneSession')">微信</button>  
    <button @click="onShare('weixin', 'WXSceneSession')">微信朋友圈</button>  
    <button @click="onShare('qq')">QQ</button>  
    <button @click="onShare('sinaweibo')">新浪微博</button>  
  </view>  
</template>  

<script>  
export default {  
  methods: {  
    async onShare(provider = '', scene = '') {  
      // 200 * 200 尺寸微信不显示图片  
      const path = await getImagePath('https://img.cdn.huabbao.com/case/20211119/619783302b806_0.png?x-oss-process=image/resize,w_200,h_200,m_fill')  
      // 120 * 120 尺寸正常  
      // const path = await getImagePath('https://img.cdn.huabbao.com/case/20211119/619783302b806_0.png?x-oss-process=image/resize,w_120,h_120,m_fill')  
      // 分享参数  
      const params = {  
        type: 0,  
        scene,  
        provider,  
        title: '分享标题',  
        summary: '分享内容',  
        imageUrl: path,  
        href: 'https://m.huabbao.com',  
      }  
      console.log(params)  
      uni.share(params)  
    },  
  },  
}  

async function getImagePath(src) {  
  const [err, info] = await uni.getImageInfo({ src })  
  return err ? '' : info.path  
}  
</script>

更多关于uni-app 3.2.15 nvue中 uni.share 微信分享不支持120*120以上的图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复

猜测是图片地址问题 在手机中下载的是png 80KB左右 未达到预期

更多关于uni-app 3.2.15 nvue中 uni.share 微信分享不支持120*120以上的图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html


补一个问题，安卓微博分享，如果是网络图片，授权成功后，第二次没有拉起微博，用 getImagePath 后才能分享

你代码可以跑一下看下，这个200的*200的图片是很小的，不会比80KB大

回复 青阳_1900: pc上Chrome浏览器是webp格式 大小符合预期。不过手机端下载不是 你可以找个手机试下

安卓微博分享，如果是网络图片会失败，但是文档里没有说明，且iOS是正常分享的
安卓微博分享失败提示 {
“errMsg”: “share:fail 分享图片仅支持本地路径”,
“errCode”: 15,
“code”: 15
} uni.share({
type: 0,
provider: ‘sinaweibo’,
title: ‘分享标题’,
summary: ‘分享内容’,
imageUrl: ‘https://img.cdn.huabbao.com/case/20211119/619783302b806_0.png?x-oss-process=image/resize,w_750’,
href: ‘https://m.huabbao.com’,
fail: e => console.log(‘失败’, e),
success: () => console.log(‘成功’),
})

文档说的不够明确 这个我们会尽快标注清楚。目前图片大小20KB，新浪分享android现在是不支持 后续我们会支持配置网络地址

刚测试反馈一个BUG，部分安卓QQ分享不支持本地图片
本地图片显示：MIX 2S 安卓10 MIUI 12.5 本地图片不显示：oneplus 7t pro 安卓11

用HX3.2.16默认基座能复现吗

回复 DCloud_Android_ST: 能的

回复 青阳_1900: 好的 我们找设备测试下 地址有什么需要注意的 相册地址还是资源地址

回复 DCloud_Android_ST: uni.getImageInfo取出来的path， file:/// 这个路径

根据你的描述，这是一个已知的微信分享图片尺寸限制问题。在uni-app的nvue页面中，使用uni.share进行微信分享时，图片尺寸确实存在限制。

问题分析：

  1. 微信SDK限制：微信官方对分享图片有明确的尺寸要求，通常建议使用120*120像素的图片。超过这个尺寸可能会导致图片无法正常显示。
  2. 平台差异：这个限制主要出现在iOS平台的nvue页面中，Android平台可能表现不同。
  3. 云端打包配置：云端打包时使用的微信SDK版本也可能影响这个限制。

解决方案：

  1. 压缩图片尺寸：最直接的解决方案是将图片压缩到120*120像素以内。你可以在代码中动态处理图片尺寸：
// 使用uni.compressImage压缩图片
async function compressImage(src) {
  const [err, res] = await uni.compressImage({
    src,
    quality: 80,
    width: 120,
    height: 120
  })
  return err ? '' : res.tempFilePath
}
  1. 使用本地图片：将图片下载到本地并确保尺寸符合要求：
async function prepareShareImage(url) {
  // 下载图片
  const [downloadErr, downloadRes] = await uni.downloadFile({ url })
  if (downloadErr) return ''
  
  // 压缩图片
  const [compressErr, compressRes] = await uni.compressImage({
    src: downloadRes.tempFilePath,
    width: 120,
    height: 120,
    quality: 80
  })
  
  return compressErr ? '' : compressRes.tempFilePath
}
  1. 服务端处理：在图片URL中添加尺寸参数，让服务端返回合适尺寸的图片：
const imageUrl = 'https://example.com/image.png?width=120&height=120'
回到顶部