UI布局：
<!--pages/image/image.wxml-->
<view class="page__hd">
<text class="page__title">image</text>
<text class="page__desc">图片</text>
</view>
<view class="page__bd">
<view class="section section_gap" wx:for="{{array}}" wx:for-item="item">
<view class="section__title">{{item.text}}</view>
<view class="section__ctn">
<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>
</view>
</view>
</view>
数据模型& 控制
// pages/image/image.js
Page({
/**
* 页面的初始数据
*/
data: {
array: [{
mode: 'scaleToFill',
text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
}, {
mode: 'aspectFit',
text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
}, {
mode: 'aspectFill',
text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
}, {
mode: 'top',
text: 'top：不缩放图片，只显示图片的顶部区域'
}, {
mode: 'bottom',
text: 'bottom：不缩放图片，只显示图片的底部区域'
}, {
mode: 'center',
text: 'center：不缩放图片，只显示图片的中间区域'
}, {
mode: 'left',
text: 'left：不缩放图片，只显示图片的左边区域'
}, {
mode: 'right',
text: 'right：不缩放图片，只显示图片的右边边区域'
}, {
mode: 'top left',
text: 'top left：不缩放图片，只显示图片的左上边区域'
}, {
mode: 'top right',
text: 'top right：不缩放图片，只显示图片的右上边区域'
}, {
mode: 'bottom left',
text: 'bottom left：不缩放图片，只显示图片的左下边区域'
}, {
mode: 'bottom right',
text: 'bottom right：不缩放图片，只显示图片的右下边区域'
}],
src: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'
},
imageError: function(e) {
console.log('image3发生error事件，携带值为', e.detail.errMsg)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
功能描述
图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。
属性说明
属性 类型 默认值 必填 说明 最低版本 src string 否 图片资源地址 1.0.0
mode string scaleToFill 否 图片裁剪、缩放的模式 1.0.0 合法值 说明 最低版本 scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 2.10.3 top 裁剪模式，不缩放图片，只显示图片的顶部区域 bottom 裁剪模式，不缩放图片，只显示图片的底部区域 center 裁剪模式，不缩放图片，只显示图片的中间区域 left 裁剪模式，不缩放图片，只显示图片的左边区域 right 裁剪模式，不缩放图片，只显示图片的右边区域 top left 裁剪模式，不缩放图片，只显示图片的左上边区域 top right 裁剪模式，不缩放图片，只显示图片的右上边区域 bottom left 裁剪模式，不缩放图片，只显示图片的左下边区域 bottom right 裁剪模式，不缩放图片，只显示图片的右下边区域
webp boolean false 否 默认不解析 webP 格式，只支持网络资源 2.9.0
lazy-load boolean false 否 图片懒加载，在即将进入一定范围（上下三屏）时才开始加载 1.5.0
show-menu-by-longpress boolean false 否 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。 2.7.0
binderror eventhandle 否 当错误发生时触发，event.detail = {errMsg} 1.0.0
bindload eventhandle 否 当图片载入完毕时触发，event.detail = {height, width} 1.0.0
支持长按识别的码 类型 说明 最低版本 小程序码 微信个人码 2.18.0
企业微信个人码 2.18.0
普通群码 指仅包含微信用户的群 2.18.0
互通群码 指既有微信用户也有企业微信用户的群 2.18.0
公众号二维码 2.18.0
好用的Api工具推荐
历时一年半多开发终于smartApi-v1.0.0版本在2023-09-15晚十点正式上线 smartApi是一款对标国外的postman的api调试开发工具，由于开发人力就作者一个所以人力有限，因此v1.0.0版本功能进行精简，大功能项有：
- api参数填写
- api请求响应数据展示
- PDF形式的分享文档
- Mock本地化解决方案
- api列表数据本地化处理
- 再加上UI方面的打磨
本地运行，性能优越，高效，快捷
下面是一段smartApi使用介绍：
