实验目的1. 掌握小程序 image 组件理解 mode 属性14种图片裁剪缩放模式2. 学会使用 wx:for 列表渲染遍历数组批量渲染组件3. 学习本地图片资源引入方式掌握项目目录规范4. 理解 webview 渲染引擎部分裁剪mode仅webview支持5. 作业拓展为每一种图片显示模式增加序号编号。重要提示部分裁剪模式top、bottom、center、left、right等仅webview渲染引擎支持app.json需要设置 renderer:webview skyline会导致部分mode失效。创建项目打开微信开发者工具新建小程序项目- 项目名称 image组件- 后端服务不使用云服务- 模板选择不使用模板准备图片资源在项目根目录新建文件夹命名 images 把图片 daxinganling.jpg 放入该文件夹。路径 /images/daxinganling.jpg完整代码展示1. pages/index/index.wxml要点1. wx:for 循环遍历 imgArray 数组 index 是循环下标从0开始所以编号写 index1 实现从1开始编号2. wx:keymode 提高列表渲染性能mode值唯一3. src 绑定本地图片路径 mode{{item.mode}} 动态绑定图片显示模式。2. pages/index/index.wxss3. app.wxss全局公共样式4. pages/index/index.js业务完整代码14种mode5.修改app.json核心知识点讲解1. image组件mode属性分为两大类1. 缩放模式 scaleToFill 、 aspectFit 、 aspectFill 、 widthFix 、 heightFix 图片会做缩放处理。2. 裁剪模式 top/bottom/center/left/right 以及组合方位仅webview渲染引擎生效不缩放原图只截取局部画面。2. wx:for列表渲染- wx:for{{imgArray}} 循环数组 item 代表数组每一项对象- index 代表循环索引从0开始作业编号需要从1开始写 {{index1}} - wx:key 建议绑定唯一属性提升渲染性能- block 是包装容器不会生成真实DOM节点适合循环。3. 本地图片路径图片放在根目录 images 路径写绝对路径 /images/daxinganling.jpg 。4. 作业实现思路在循环内部说明文字上方新增view输出 显示模式编号{{index1}} 增加少量css设置红色加粗字体。JS不需要修改直接复用原有数组。踩坑记录1. ❌忘记设置 renderer:webview → top/bottom等裁剪模式完全失效2. ❌图片路径写错图片空白本地图片使用 /images/xxx.jpg 3. ❌编号直接写 {{index}} 编号从0开始需要 index1 4. ❌不写 wx:key 控制台报