一、实验目的掌握小程序image图片组件mode属性的 14 种显示模式理解缩放模式与裁剪模式的区别练习wx:for列表渲染完成作业拓展为每一种模式增加顺序编号了解webview渲染引擎对裁剪模式的支持。知识点image 组件 mode 属性分为缩放模式、裁剪模式部分裁剪模式仅 webview 渲染引擎支持。wx:for列表渲染循环下标index实现自动生成序号。本地图片资源引用项目内图片路径写法。app.json 配置渲染引擎renderer:webview。二、实验环境微信开发者工具新建空白小程序项目不使用云服务、不使用模板。本项目使用本地图片shanchuanheliu.jpg仅一张图片通过 mode 属性实现 14 种不同显示效果。三、项目目录结构image组件 ├─images # 存放本地图片与pages同级 │ └─shanchuanheliu.jpg ├─pages │ └─index │ ├─index.js │ ├─index.json │ ├─index.wxml │ └─index.wxss ├─app.js ├─app.json └─app.wxss四、代码实现1.index.wxml使用wx:for循环遍历图片模式数组作业拓展利用index1生成从 1‑14 的模式编号。!--index.wxml-- scroll-view classscrollarea scroll-y typelist view classbox view classtitle图片的不同显示模式/view block wx:for{{imgArray}} wx:keymode !--作业拓展增加模式编号index从0开始index1得到1开始的序号-- view classnum-text显示模式编号{{index1}}/view view{{item.text}}/view view classimg-layout image src{{src}} mode{{item.mode}}/image /view /block /view /scroll-view2.index.jssrc指定本地图片路径imgArray数组存放全部 14 种 mode 模式与文字说明。// index.js Page({ data: { //本地图片路径图片名称shanchuanheliu.jpg src: /images/shanchuanheliu.jpg, //显示图片模式及文字说明数组共14种模式 imgArray: [{ mode: scaleToFill, text: scaleToFill: 缩放模式不保持纵横比缩放图片使图片的宽高完全拉伸至填满 image 元素 }, { mode: aspectFit, text: aspectFit: 缩放模式保持纵横比缩放图片使图片的长边能完全显示出来。也就是说可以完整地将图片显示出来 }, { mode: aspectFill, text: aspectFill: 缩放模式保持纵横比缩放图片只保证图片的短边能完全显示出来。也就是说图片通常只在水平或垂直方向是完整的另一个方向将会发生截取 }, { mode: widthFix, text: widthFix: 缩放模式宽度不变高度自动变化保持原图宽高比不变 }, { mode: heightFix, text: heightFix: 缩放模式高度不变宽度自动变化保持原图宽高比不变 }, { mode: top, text: top: 裁剪模式不缩放图片只显示图片的顶部区域。仅 webview 支持 }, { mode: bottom, text: bottom: 裁剪模式不缩放图片只显示图片的底部区域。仅 webview 支持 }, { mode: center, text: center: 裁剪模式不缩放图片只显示图片的中间区域。仅 webview 支持 }, { mode: left, text: left: 裁剪模式不缩放图片只显示图片的左边区域。仅 webview 支持 }, { mode: right, text: right: 裁剪模式不缩放图片只显示图片的右边区域。仅 webview 支持 }, { mode: top left, text: top left: 裁剪模式不缩放图片只显示图片的左上边区域。仅 webview 支持 }, { mode: top right, text: top right: 裁剪模式不缩放图片只显示图片的右上边区域。仅 webview 支持 }, { mode: bottom left, text: bottom left: 裁剪模式不缩放图片只显示图片的左下边区域。仅 webview 支持 }, { mode: bottom right, text: bottom right: 裁剪模式不缩放图片只显示图片的右下边区域。仅 webview 支持 }] } })3.index.wxss新增.num‑text样式用于显示红色模式编号设置 image 固定宽高灰色背景。/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } /*作业新增模式编号样式红色加粗*/ .num-text{ font-size:34rpx; color:red; margin-top:20rpx; font-weight:bold; } .img-layout { text-align: center; margin-top: 20rpx; margin-bottom: 40rpx; } image { width: 480rpx; height: 480rpx; background-color: #eee; }4.app.wxss 全局样式/**app.wxss**/ .box { /* 设置外边距 */ margin: 20rpx; /* 设置内边距 */ padding: 20rpx; /* 设置边框 */ border: 2rpx solid silver; } .title { /* 设置字体大小 */ font-size: 40rpx; /* 设置字体加粗 */ font-weight: bolder; /* 设置居中对齐 */ text-align: center; /* 设置下外边框 */ margin-bottom: 30rpx; /* 设置字体颜色 */ color: red; }5.app.json重要配置设置renderer:webview裁剪类模式top、bottom、left 等才可以正常生效。{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black }, style: v2, renderer: webview, rendererOptions: {} }五、运行效果页面标题为红色 “图片的不同显示模式”循环展示 14 种图片显示方案每一项最上方红色文字输出显示模式编号1、显示模式编号2…… 一直到 14使用同一张shanchuanheliu.jpg图片依靠 mode 属性分别展示缩放、裁剪不同视觉效果页面支持纵向滚动可以浏览全部 14 个案例。六、实验总结image 组件mode属性分为缩放模式与裁剪模式top/bottom/left/right 这类裁剪模式必须 webview 渲染引擎才生效skyline 不支持。wx:for循环内置index下标下标从 0 开始想要从 1 开始编号表达式写index1完成本次作业拓展。本地图片路径写法/images/图片名.jpg最开头的/代表从项目根目录开始查找图片斜杠丢失会导致图片加载失败。本案例仅使用一张图片通过更换 mode 属性就实现十几种不同展示效果不需要准备多张图片。常见问题排查图片空白检查 images 文件夹位置、文件名拼写shanchuanheliu.jpg、路径开头斜杠。裁剪模式没有效果确认 app.json 配置renderer:webview修改配置后清缓存重新编译。看不到编号确认 wxml 中写好了view classnum-text显示模式编号{{index1}}/view。