微信自定义分享可以设置分享图标宽高吗

微信自定义分享可以设置分享图标宽高吗?

jweixin.updateAppMessageShareData({
      desc: '',
      title: '', // 分享标题
      link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名
      imgUrl: '', // 分享图标
      success: function () {},
    });

该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下:
微信自定义分享可以设置分享图标的宽高,但需要先将图片下载到本地,然后使用图片处理库对图片进行处理,最后再将处理后的图片作为分享图标传递给微信。

在 Vue.js 中,您可以使用类似以下的代码来设置分享图标的宽高:

import imageProcessingLibrary from 'image-processing-library'; // 导入图片处理库

// 下载图片并进行处理
let img = new Image();
img.src = '分享图标的 URL';
img.onload = function() {
  let processedImage = imageProcessingLibrary(img, {
    width: '100px',
    height: '100px'
  }); // 通过图片处理库对图片进行处理
  jweixin.updateAppMessageShareData({
    desc: '',
    title: '', // 分享标题
    link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名
    imgUrl: processedImage.src, // 分享图标
    success: function () {},
  });
};

其中,imageProcessingLibrary 库可以是任何一款支持图片处理的 JavaScript 库,例如 canvaspicasharp 等。在本例中,我们假设 imageProcessingLibrary 是一款可以设置图片宽高的图片处理库。

需要注意的是,在处理图片时,请注意保持图片的比例,以免出现拉伸或压缩的情况。同时,为了提高用户体验,建议在下载和处理图片期间显示加载动画或者占位图,以减少用户等待时间。


如果以上回答对您有所帮助,点击一下采纳该答案~谢谢

  • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7562756
  • 我还给你找了一篇非常好的博客,你可以看看是否有帮助,链接:<canvas>直接设置宽高和通过样式设置宽高的问题
  • 除此之外, 这篇博客: 微信小程序动态获取和设置元素宽高中的 解决方法 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
    1. 设置要动态修改宽高的元素。
    <view class="top">
    	……
    </view>
    <view :style="{ height: viewHeight + 'px' }">
    	……
    </view>
    
    export default {
    	data() {
    		return {
    			……
    			viewHeight: '',
    		};
    	}
    
    1. 先动态获取屏幕的宽高和元素的宽高。
    onLoad() {
    	_self = this;
    	uni.getSystemInfo({
    		success: function(res) {
    			console.log(res);
    			let info = uni.createSelectorQuery().select('.top');(单引号里的是元素的类名,即class)
    			info.boundingClientRect(function(data) {
    				//res - 屏幕的所以参数
    				//data - 该类名所对应的元素的各种参数
    				//可以在这里进行加减乘除计算,并将值进行绑定
    				_self.viewHeight = (res.windowHeight - data.height) / 3;
    			}).exec();
    		}
    	});
    	},
    

    最后,如本文有错误的地方,欢迎指正!!

  • 您还可以看一下 朱学超老师的微信小程序广告位开发及经验分享课程中的 如何提高激励视频广告收益小节, 巩固相关知识点