企业官网建设流程全解析

一、前言

在小程序开发中，图片展示是高频业务场景。很多开发者会遇到图片拉伸变形、图片显示不全、裁剪模式不生效等问题，本质是没有正确使用image组件的mode属性。

小程序image组件一共提供14 种显示模式：

• 缩放模式（5 种）：对图片进行缩放处理，适配容器大小
• 裁剪模式（9 种）：不缩放原图，截取图片局部区域展示，仅 webview 渲染器支持

本次实战项目实现以下能力：

1. 使用wx:for循环遍历全部 14 种图片模式
2. 通过index+1实现自动序号编号展示
3. 每一种模式附带官方说明文案
4. 统一图片容器尺寸，灰色占位背景，页面布局规整
5. 兼容 webview 渲染模式，保证裁剪模式正常运行

二、核心知识点

1. 列表循环渲染：wx:for遍历数组，wx:key保证列表渲染性能
2. image mode 属性：区分缩放模式、裁剪模式的底层原理
3. 渲染器配置：裁剪模式依赖renderer:"webview"，不配置会失效
4. WXSS 语法规范：注释规则、禁止使用单行注释，避免隐形编译报错
5. 动态数据绑定：JS 数组数据驱动 WXML 页面渲染

三、项目文件结构

├── pages │ └── index │ ├── index.js │ ├── index.wxml │ ├── index.wxss │ └── index.json ├── images │ └── daxinganling.jpg //测试图片 ├── app.json ├── app.wxss

⚠️注意：图片文件夹images需要创建在项目根目录。

四、完整源码实现

1. app.json

关键配置：renderer:"webview"，开启后裁剪模式才会生效

{ "pages": [ "pages/index/index" ], "window": { "navigationBarTextStyle": "black", "navigationStyle": "custom" }, "style": "v2", "renderer": "webview", "rendererOptions": { } }

2. pages/index/index.json

{ "usingComponents": {} }

3. pages/index/index.js

定义 14 种模式数组，包含 mode 名称与功能描述，通过数据驱动页面渲染

//index.js Page({ data:{ //图片路径 src:'/images/daxinganling.jpg', //显示图片模式及文字说明数组 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 支持' } ] } })

4. pages/index/index.wxml

<!--index.wxml--> <navigation-bar title="image组件" back="{{false}}" color="black" background="#FFF"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <view class="title">图片的不同显示模式</view> <block wx:for="{{imgArray}}" wx:key="mode"> <!-- 作业扩充：输出编号：显示模式编号：{{index+1}} --> <view>显示模式编号：{{index+1}}</view> <view>{{item.text}}</view> <view class="img-layout"> <image src="{{src}}" mode="{{item.mode}}"></image> </view> </block> </view> </scroll-view>

5. pages/index/index.wxss

重要：WXSS 不支持//单行注释，注释必须写在文件最顶部，不能插入选择器和大括号中间

/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .img-layout { text-align: center; margin-top: 20rpx; margin-bottom: 40rpx; } image { width: 480rpx; height: 480rpx; background-color: #eee; }

6. app.wxss

/**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } /**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; }

五、部署运行说明

1. 在项目根目录新建images文件夹，放入测试图片daxinganling.jpg
2. 确认app.json中配置"renderer":"webview"，裁剪模式必须开启该配置，否则不会生效
3. 代码所有标点符号必须为英文半角符号，避免编译报错
4. 图片路径使用绝对路径/images/daxinganling.jpg，不要写错斜杠

六、14 种模式原理详解

🔹缩放模式（5 种）

表格

🔹裁剪模式（9 种）

特性：不会缩放原图，只截取图片的局部区域展示；必须开启 webview 渲染器才生效

表格

七、高频踩坑 & 报错解决

1. 裁剪模式完全没有效果

✅原因：没有配置app.json的"renderer":"webview"
✅解决方案：在 app.json 顶层添加"renderer":"webview"

2. image 图片空白不显示

✅原因：图片路径错误，图片没有放到根目录 images 文件夹
✅解决方案：路径写/images/daxinganling.jpg，保证图片文件存在。

3. WXSS 编译报错，控制台报样式错误

1. WXSS不支持//单行注释，只能使用/** 注释 **/
2. 注释不能写在选择器和大括号中间，必须放在文件最开头
3. 禁止使用中文全角大括号、中文标点符号

❌错误写法

/* 错误：注释插在选择器和大括号之间 */ .container /* 这里不能写注释 */ { padding:20rpx; }

✅正确写法

/** 写在文件最顶部 **/ .container { padding:20rpx; }

八、效果展示