企业官网建设流程全解析

一、image 组件：

小程序里展示图片用的是image组件，它最核心的就是mode属性

1. 先搭个演示项目

准备一张图放进项目根目录images/daxinganling.jpg，然后在index.js里维护一个模式数组：

// 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 支持' }] } })

2. WXML 循环渲染，带编号

<scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <view class="title">图片的不同显示模式</view> <block wx:for="{{imgArray}}"> <view>显示模式编号：{{index + 1}}</view> <view>{{item.text}}</view> <view class="img-layout"> <image src="{{src}}" mode="{{item.mode}}" /> </view> </block> </view> </scroll-view>

💡 用wx:for的默认下标index加上index + 1，就能在每行文字上方显示"显示模式编号：1、2、3……"，方便对照。

3. 样式（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; } /* index.wxss */ .img-layout { text-align: center; margin-top: 20rpx; margin-bottom: 40rpx; } image { width: 480rpx; height: 480rpx; background-color: #eee; }

4. 两种模式怎么选？

• 缩放模式：图片会按规则伸缩填满容器。scaleToFill会变形拉伸；aspectFit完整显示但可能留白；aspectFill铺满但会裁边；widthFix/heightFix按单边自适应。
• 裁剪模式（top / bottom / center / left / right 及四角组合）：不缩放，只显示图片的某个区域，而且仅 Webview 引擎支持。

二、Skyline 引擎：性能虽香，兼容要命

1. Skyline 和 WebView 到底差在哪？

小程序有两套渲染引擎：

性能上 Skyline 更香，但它对CSS 兼容性和部分原生组件和旧 WebView 有差异。

2. 怎么全局切回 WebView？

打开项目根目录的app.json，找到renderer字段，改成webview：

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