一、案例简介
本案例是微信小程序图片组件的实战练习，核心学习image组件的mode属性。
小程序运行后，页面从上到下依次展示同一张图片的 14 种显示模式，每种模式配一段文字说明，滚动页面即可对比不同模式下图片的裁剪、缩放效果。
本次作业在基础案例之上，在每个显示模式的文字说明上方，增加了该模式的编号（第 1 种～第 14 种），方便对照查看。
二、学习知识点
表格
| 知识点 | 作用说明 |
|---|---|
image | 图片组件，通过src绑定图片地址 |
mode | 控制图片裁剪、缩放的模式，共 14 种 |
wx:for | 列表渲染，循环生成 14 个图片块 |
| 缩放模式 | scaleToFill / aspectFit / aspectFill / widthFix / heightFix |
| 裁剪模式 | top / bottom / center / left / right / top left / top right / bottom left / bottom right |
14 种 mode 分两类：缩放模式改变图片尺寸，裁剪模式不缩放、只显示图片的某个区域。
三、开发步骤
- 新建不使用云服务、不使用模板的小程序项目。
- 准备一张图片（本地 images 文件夹或网络地址），在
data.src中配置。 - 在
index.js的data.imgArray中定义 14 个对象，每个对象含id（编号）、mode（模式名）、text（说明）。 - 在
index.wxml用wx:for循环渲染，<image mode="{{item.mode}}">。 - 在图片下方、文字说明上方，用
{{shturl.}}显示编号（作业新增）。 - 编写样式，编译预览测试。
四、核心代码
1. 页面结构index.wxml
<view class="container"> <view class="item" wx:for="{{imgArray}}" wx:key="mode"> <image class="pic" src="{{src}}" mode="{{item.mode}}"></image> <!-- 作业新增：编号显示在文字说明上方 --> <view class="num">第 {{shturl.}} 种（{{item.mode}}）</view> <view class="text">{{item.text}}</view> </view> </view>2. 逻辑index.js
Page({ data: { src: 'https://picsum.photos/375/200', imgArray: [ { id: 1, mode: 'scaleToFill', text: 'scaleToFill：不保持纵横比缩放，使图片完全填满' }, { id: 2, mode: 'aspectFit', text: 'aspectFit：保持纵横比缩放，长边完整显示' }, { id: 3, mode: 'aspectFill', text: 'aspectFill：保持纵横比缩放，短边完整显示' }, { id: 4, mode: 'widthFix', text: 'widthFix：宽度不变，高度自动变化' }, { id: 5, mode: 'heightFix', text: 'heightFix：高度不变，宽度自动变化' }, { id: 6, mode: 'top', text: 'top：不缩放，只显示图片顶部区域' }, { id: 7, mode: 'bottom', text: 'bottom：不缩放，只显示图片底部区域' }, { id: 8, mode: 'center', text: 'center：不缩放，只显示图片中间区域' }, { id: 9, mode: 'left', text: 'left：不缩放，只显示图片左边区域' }, { id: 10, mode: 'right', text: 'right：不缩放，只显示图片右边区域' }, { id: 11, mode: 'top left', text: 'top left：不缩放，只显示左上方区域' }, { id: 12, mode: 'top right', text: 'top right：不缩放，只显示右上方区域' }, { id: 13, mode: 'bottom left', text: 'bottom left：不缩放，只显示左下方区域' }, { id: 14, mode: 'bottom right',text: 'bottom right：不缩放，只显示右下方区域' } ] } })3. 样式index.wxss
.item { background: #fff; border-radius: 12rpx; padding: 20rpx; margin-bottom: 24rpx; } .pic { width: 100%; height: 200rpx; background: #eee; } .num { font-size: 28rpx; color: #07c160; font-weight: bold; margin-top: 16rpx; } .text { font-size: 28rpx; color: #333; margin-top: 8rpx; }五、遇到的问题与解决方案
问题 1：图片不显示。原因：src路径写错，或网络图片未在开发者工具勾选「不校验合法域名」。 解决：确认图片地址正确；本地图片放在 images 文件夹并写相对路径，网络图片在详情本地设置里勾选不校验域名。
问题 2：14 段代码重复写 14 个 image。原因：没用列表渲染。 解决：把 14 种模式放进数组，用wx:for循环渲染，只写一个 image 标签。
问题 3：编号没显示。原因：数组里没有id字段。 解决：在每个对象里加id: 1~14，WXML 中用{{shturl.}}输出。
六、运行效果
页面滚动展示 14 张卡片，每张卡片上方是同一图片在对应 mode 下的效果，中间绿色编号「第 N 种（mode 名）」，下方是模式说明文字；作业要求的编号已加在文字说明正上方。
七、案例总结
通过本案例系统掌握了image组件 14 种mode显示模式的差异，理解了缩放模式与裁剪模式的区别，并熟练运用wx:for把数据数组批量渲染成界面。新增的编号字段让每种模式一目了然，也加深了对数据驱动视图的理解。
