更新记录

1.0.2(2020-12-06) 下载此版本

  • 本次更新调整较多, 我只测试了我的本地环境 如果您已经投入使用请务必测试当前版本组件是否正常运行! 如有问题还望告知!
  • 更改props宽高的默认值null, 如果 没有设置高度&没有开启自动调整尺寸 默认显示88rpx
  • 更改props图片模式名默认由之前的aspectFill 改为 aspectFit (web端显示效果较差 大图片会缩小居中, 导致两边空白 放弃)
  • 更改测试案例(现在功能参数较多, 使用多个参数展示)
  • 更新文档说明
  • 同步image组件的属性(方法没用到暂时没有同步)
  • 添加缓存存储的唯一标识(之前缓存的文件会重新进行缓存) (更改此项是为了避免缓存产生冲突)
  • 添加组件的工具函数(可单独使用, 后期可能会添加新的方法 如果更改建议复制一份 避免后期更新替换问题)
  • 添加图片压缩质量功能(compressQuality) 以plus方法实现 详细可以查看测试页面
  • 添加图片自动调整尺寸功能(会显示图片的原大小, 如果超过会 最大长度以750rpx,计算其同比例高度显示. 功能和mode中的aspectFit 类似. 显示效果会好一些)

1.0.1(2020-11-22) 下载此版本

  • [x] 添加图片懒加载
  • [x] 完善图片缓存功能
  • [x] 添加条件编译
  • [x] 精简代码\添加注释

平台兼容性

app-image

一个封装自uniapp的图片小组件


使用方法

<app-image src="https://img.cdn.aliyun.dcloud.net.cn/uni-app/doc/run1x9.jpg"></app-image>

此时用到

  1. 自动调整图片的尺寸大小
  2. 错误图片自动替换
  3. 图片开启懒加载
  4. 图片模式名aspectFill

功能简述

注:

  1. 目前缓存功能只在app上面进行了实现
  2. 组件内使用了 uni.getImageInfo uni.saveFile 方法 , 其方法本身有一定限制, 请提前了解一下是否适合您的使用场景
  3. 2020/12/2 更新功能 (图片质量压缩) 使用了plus
  4. 插件用在每个人不同场景 一定会存在或多或少的未知问题 有问题还望告知 一起讨论解决问题

组件参数

使用前提 参数名 类型 默认值 添加时间 使用平台
width(宽度) [String, Number] 88 初始功能 通用
height(高度) [String, Number] 88 初始功能 通用
mode(图片模式名) String aspectFill 初始功能 通用
src(图片的地址) String 初始功能 通用
imgStyle(图片的自定义样式) String 初始功能 通用
imgClass(图片的自定义样式名) String 初始功能 通用
imgUnit(图片的大小单位) String rpx 初始功能 通用
autoCheckImage(是否开启图片自检、替换) Boolean true 初始功能 通用
lazyLoad(图片懒加载) Boolean true 初始功能 只针对page与scroll-view下的image有效(详细请查看image组件中关于此属性的介绍)
fadeShow(图片显示动画效果) Boolean true 2020/12/6 仅App-nvue 2.3.4+ Android有效
webp Boolean false 2020/12/6 默认不解析 webP 格式,只支持网络资源
showMenuByLongpress(开启长按图片显示识别小程序码菜单) Boolean false 2020/12/6 微信小程序2.7.0
开启autoCheckImage replaceImgIndex(如果图片出错, 使用哪个默认图片进行替换) Number 0 初始功能 通用
开启autoCheckImage isCatch(图片是否进行缓存) Boolean false 初始功能 限app(即Android\ios)
开启autoCheckImage compressQuality(压缩图片质量的大小) [Number, String] 0 2020/12/2 限app
开启autoCheckImage isProportion(是否开启自动调整图片尺寸) Boolean true 2020/12/6 限app

建议使用前阅读的文档

  1. https://uniapp.dcloud.io/component/image uni-app中的image组件, 组件的核心
  2. http://www.html5plus.org/doc/zh_cn/zip.html#plus.zip.compressImage JSON对象,配置图片压缩转换的参数

更新日志

2020/12/6

  • 本次更新调整较多, 我只测试了我的本地环境 如果您已经投入使用请务必测试当前版本组件是否正常运行! 如有问题还望告知!
  • 更改props宽高的默认值null, 如果 没有设置高度&没有开启自动调整尺寸 默认显示88rpx
  • 更改props图片模式名默认由之前的aspectFill 改为 aspectFit (web端显示效果较差 大图片会缩小居中, 导致两边空白 放弃)
  • 更改测试案例(现在功能参数较多, 使用多个参数展示)
  • 更新文档说明
  • 同步image组件的属性(方法没用到暂时没有同步)
  • 添加缓存存储的唯一标识(之前缓存的文件会重新进行缓存) (更改此项是为了避免缓存产生冲突)
  • 添加组件的工具函数(可单独使用, 后期可能会添加新的方法 如果更改建议复制一份 避免后期更新替换问题)
  • 添加图片压缩质量功能(compressQuality) 以plus方法实现 详细可以查看测试页面
  • 添加图片自动调整尺寸功能(会显示图片的原大小, 如果超过会 最大长度以750rpx,计算其同比例高度显示. 功能和mode中的aspectFit 类似. 显示效果会好一些)

2020/12/2

  • 图片压缩质量功能初步完成
  • 更新文档

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问