主题
微信小程序基础与组件（二）
本页对应 微信小程序基础与组件，共 7 段视频，约 1 小时 6 分。
学习目标
能在 app.json 中完成 tabBar 配置（list 项数 2–5、pagePath、text、iconPath/selectedIconPath、颜色项与 list 同级），并能根据编译警告定位并修正“缺少 list”“项数不足”“颜色写进 list 内不生效”等常见错误。
能使用 rpx 编写自适应布局，说明 750rpx 与设计稿 1:1 的换算关系，并在开发者工具中切换 iPhone 6/7/8、iPhone 5、iPad 等机型，验证同一元素占屏比例保持一致。
能使用 navigator 组件完成普通页面跳转、跳转到 tabBar 页（open-type="switchTab"）与返回上一页（open-type="navigateBack"），并能解释 tabBar 页不加 open-type 时“无报错但点不动”的原因。
能使用 image 组件通过样式设定宽高，并用 mode（如 aspectFit、aspectFill）解决图片变形问题；能说明图片容器默认宽高导致变形的原因，并按需配置 lazy-load、webp 等属性。
能区分组件文档中的通用属性、webview 专属属性与 skyline 专属属性，说明当前项目为何只使用 webview 相关属性，并能通过悬停/跳转文档自行查阅某个属性的作用与取值。
能使用 swiper + swiper-item 搭建轮播图，在父容器上配置 indicator-dots、indicator-active-color、autoplay、circular 等属性，并通过为 swiper 与内部 image 同时设置 rpx 宽高消除默认高度造成的变形。
知识点
这一节只做一件事：把微信开发者工具装好、登录、建项目，并能在真机看到页面。转写稿里与“安装/登录/创建项目”直接对应的细节不多，能借用的主要是工具内新建页面、控制台报错和模拟器调试经验；下面只采用这些能支撑本节的内容，不把后续 tabBar、rpx、组件配置混进来。
下载并安装微信开发者工具
为什么需要：后续所有小程序页面、配置、组件调试都要在微信开发者工具里完成；工具没装好，后面的代码和预览都无从谈起。
怎么想：先拿到官方稳定版安装包，再按系统引导安装，不急着创建项目。
怎么做：打开下载微信开发者工具，下载稳定版；下载完成后双击安装程序，根据引导完成安装。
易错点：不要从非官方渠道下载；安装时按默认引导走即可，不要在中途随意改路径导致后续找不到程序。转写稿里多次提到“工具里搜索会遮挡”“控制台会报错”，说明工具本身是后续调试入口，先把安装这一步做稳。
启动工具并扫码登录
为什么需要：开发者工具需要识别开发者身份，登录后才能创建、打开和预览小程序项目。
怎么想：安装完成后直接启动程序，登录动作放在创建项目之前，避免建项目时被登录打断。
怎么做：启动安装后的程序，使用微信扫码登录；电脑需要联网。
易错点：电脑断网时扫码登录会失败；不要用来源不明的二维码。转写稿中“配置”在组件语境里多指 page 根节点，“微信ML/微信SS”应理解为 WXML/WXSS，但本节先不展开，登录阶段只关注工具能否正常进入。
创建小程序项目
为什么需要：只有创建项目，工具才会生成小程序目录结构和基础文件，后续才能在正确的位置写页面、改配置。
怎么想：创建时要把“代码放哪里、用哪个 AppID、项目叫什么、用什么模板、是否用云服务”一次选清楚，避免建完再搬目录。
怎么做：在工具里创建小程序，指定代码位置，填写 AppID，填写项目名称，选择基础模板，并选择“不使用云服务”。
易错点：代码位置不要随手选到桌面或已有杂项目录里，建议单独建一个空目录；AppID 要按实际项目填写；基础模板按学习需要选；云服务按笔记要求选“不使用”。转写稿提到新建页面时可以“复制一份再改”，这属于项目建好后的操作习惯；也提到控制台会报错，建完项目若控制台有红字，先检查项目根目录和配置文件是否在正确位置，不要先改业务代码。转写稿里的“APVP”是 app.json 的同音误写，实际应看 app.json。
点预览并在真机查看效果
为什么需要：模拟器能看结构，但不等于真机效果；颜色、尺寸、机型适配等问题要以真机为准。
怎么想：先在工具里点预览，再按提示在真机中打开查看；如果模拟器和真机不一致，优先信真机。
怎么做：在小程序开发工具中点击“预览”，按工具提示在真机中查看小程序效果。
易错点：转写稿明确提到“模拟器它有些时候并不准确”“在手机上面就看不到颜色效果”，所以不要只看模拟器；转写稿还演示了切换 iPhone、iPad 等机型观察比例变化，说明预览前可切换机型辅助检查，但最终仍要真机确认。若预览打不开，先检查电脑联网、登录状态和项目是否创建成功，再排查代码与配置。
页面布局：先认识一个页面的四个文件
为什么需要：小程序页面不是只写一个 HTML 就完事，结构、样式、逻辑、配置要分开存放，后续维护和编译都依赖这套约定。怎么想：先把它类比网页，但不要直接套 HTML 标签；网页里的 div、span 在小程序里要换成小程序认识的组件。怎么做：一个完整页面通常包含 .wxml 定义结构，类似 .html；.wxss 定义样式，类似 .css；.js 定义逻辑，监听事件、发起请求等；.json 定义页面配置，如页面标题等。页面结构里，view 定义块级区域，相当于网页中的 div；text 定义行内区域，相当于网页中的 span。页面样式仍可用类选择器、标签选择器等，大部分 CSS 样式可以用到小程序中。易错点：不要把网页标签原样搬进来；结构、样式、逻辑、配置各归其位，别把配置写进 .js 或把逻辑写进 .wxml。
逻辑处理：Page、data、setData 与事件绑定
为什么需要：页面要有数据变化和交互，必须通过小程序规定的注册与更新方式，否则页面内容不会按预期渲染。怎么想：每个页面都必须要调用 Page 函数来注册页面，否则看不到页面的任何内容；并且要传入对象类型的参数。data 用来初始化页面数据，setData 用来更新数据，{{}} 插值语法可以实现数据渲染，bind:事件类型=事件回调 用来绑定事件。怎么做：先写初始数据，再在事件回调里用 this.setData 改数据。示例代码保留如下：
javascript
Page({
data: {
message: '大家好，这是我的第一个小程序!'
},
changeMessage() {
this.setData({
message: 'Hello everyone this is my first miniprogram!'
})
}
})xml
<button bind:tap="changeMessage" type="primary" size="mini">点我试试</button>易错点：不要直接写 this.data.message = ... 代替 setData；事件名和回调名要对应；Page 的参数必须是对象。转写稿复习时也强调，小程序逻辑和 Vue 有点像，但 data 这里不是函数而是对象，这类细节要按小程序规则来。
全局配置：pages、window 与 tabBar
为什么需要：页面路径、窗口表现、底部 Tab 栏等不是页面内部样式能完全解决的，尤其 tabBar 是全局导航结构，必须由配置生成。怎么想：先分清全局配置和页面配置。全局配置针对所有页面生效，页面配置只针对当前页生效；页面配置大部分与全局配置中的 window 重叠，且页面配置优先级大于全局配置。怎么做：pages 配置页面路径，未配置路径的页面无法被访问到：
json
{
"pages": [
"pages/index/index",
"pages/logs/logs"
]
}entryPath 配置小程序默认的启动页面（首页）；window 配置窗口表现：
json
{
"pages": [],
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#f5a11c",
"navigationBarTitleText": "学习小程序",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": false,
"navigationStyle": "default"
}
}tabBar 配置底部 Tab 栏，且 tabBar 中的页面必须配置在 pages 中：
json
{
"pages": [],
"window": {},
"tabBar": {
"color": "pink",
"selectedColor": "#e93b3d",
"list": [
{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "static/tabbar/home-default.png",
"selectedIconPath": "static/tabbar/home-active.png"
},
{
"text": "日志",
"pagePath": "pages/logs/logs",
"iconPath": "static/tabbar/logs-default.png",
"selectedIconPath": "static/tabbar/logs-active.png"
},
{
"text": "我的",
"pagePath": "pages/my/index",
"iconPath": "static/tabbar/face-default.png",
"selectedIconPath": "static/tabbar/face-active.png"
}
]
},
}页面配置里，disableScroll 只能用在页面配置中，用于禁用页面滚动；usingComponents 后续学到自定义组件时再介绍。易错点：tabBar 必须写在全局配置里，不要写到页面配置；tabBar 与 window、pages 等同级，不要嵌套错；list 是数组，至少两项、最多五项；color、selectedColor 等文本颜色写在 list 同级，不要写进每个 list 项里。转写稿里“type半、他爸、太棒”都是 tabBar 的口误，“历史”是 list，“闭点”是“必填”。
tabBar 的推导与调试：从报错到能切换
为什么需要：tabBar 配置项多，只抄代码很容易出现“保存了但没效果”的情况。怎么想：按文档逐层写，先满足必填项，再看模拟器效果。怎么做：在全局配置里写 tabBar: {} 后，工具会提示缺少 list；补上数组后，如果只写一项会报“至少两项”，因为底部切换至少要有两个入口。配置两项后底部出现 Tab，可点击切换。若某个页面已变成 tabBar 页，再用 navigator 跳它时，默认普通跳转可能“不报错但跳不动”，此时要加 open-type="switchTab"。易错点：图标路径只能是本地路径，尺寸建议按文档要求处理；颜色类型要符合文档要求，转写稿特别提醒颜色尽量用十六进制，否则手机端可能看不到效果；不要直接截图抄代码，应该对照文档确认属性层级和必填项。
长度单位：px 的局限与 rpx 的 750 设计稿
为什么需要：小程序运行在不同手机屏幕上，网页端常用固定 px 做一套版型，到了小程序容易在大屏上留白、小屏上溢出。怎么想：rpx 是小程序特殊长度单位，r 可理解为 responsive，响应式像素；它把屏幕宽度划分为 750 份，不管屏幕多大都按比例换算。怎么做：除了支持 px，小程序支持 rpx。实际使用中把设计稿调整为 750px 宽，然后按 1:1 比例写长度，单位用 rpx：设计稿中某个区域大小为 180*90px，写成 180*90rpx。转写稿演示时，375px 在 iPhone 6/7/8 上刚好占满，但换到 iPhone XR、iPad 就不合适；改成接近 750rpx 后，不同机型按比例缩放，审查元素还能看到它最终换算成的像素值。易错点：上述 1:1 规则仅适用于设计稿宽度为 750px；不要以为 rpx 可以脱离设计稿乱写；虽然 100vw 也能做适配，但换算不如 750 设计稿直观。
组件学习总览
小程序内置组件比网页标签更贴近移动端场景。前面学过 view、text，本节继续看 navigator、image、swiper、表单组件和 scroll-view。学习时不要只记属性，而要按“为什么需要 → 怎么想 → 怎么做 → 易错点”去练：先明确组件解决什么交互，再想结构和样式，最后查文档核对属性。调试时重点观察模拟器切换机型、控制台报错和默认尺寸。
navigator 页面跳转
为什么需要：小程序页面之间要跳转，不能只靠用户点返回。navigator 相当于网页里的 a 标签。
怎么想：先确定目标页是普通页还是 tabBar 页；普通页默认 navigate，tabBar 页必须用 switchTab。
怎么做：写 url，支持相对/绝对路径；用 hover-class 控制点击态，none 表示禁用点击效果。
易错点：url 为空会报错；配置 tabBar 后，原来能跳的 navigator 可能“不报错但跳不动”，此时要加 open-type="switchTab"。转写稿中反复调试的就是这个点。
image 图片显示
为什么需要：页面要展示商品图、头像、轮播图等，但小程序 image 不是网页 img，它默认有占位容器。
怎么想：先看占位容器与图片实际宽高比是否一致；不一致时不能只改宽高，还要选 mode。
怎么做：image 默认尺寸为 320*240px；scaleToFill 拉伸铺满，aspectFit 长边完整显示、可能留白，aspectFill 短边完整显示、可能裁切。一般按设计稿设宽高，比例不一致时用 mode="aspectFill"。
易错点：单词是 image 不是 img；不设宽高容易变形；默认 scaleToFill 会拉伸。转写稿中演示了设固定宽高后变形更明显，改用 aspectFit 留白、aspectFill 裁切的过程。
swiper 轮播图
为什么需要：轮播图、滑动卡片是移动端常见交互，小程序已封装滑动结构。
怎么想：swiper 是滑块容器，内部只能嵌套 swiper-item；属性统一写在父容器上。
怎么做：swiper 默认高度 150px，swiper-item 内可放 image 等任意内容；常用 indicator-dots 显示指示点、autoplay 自动切换、circular 衔接滑动。
易错点：不设样式时默认高度可能不合适；只写多个 swiper-item 时默认只显示第一张，需要滑动或自动播放；图片仍需单独设宽高，避免变形。
表单相关组件
为什么需要：登记、搜索、选择等场景需要输入和选择控件。
怎么想：按网页表单对应关系记：input 对应输入框，radio-group/radio 对应单选框，checkbox-group/checkbox 对应复选框，picker 对应 select。
怎么做：input 用 type 指定类型、placeholder 写占位文字；radio、checkbox 用 value 定义数据、checked 定义选中；picker 用 mode，如 region 省市县联动、date 时间选择。下面保留本节准备样式和结构，练习时直接粘贴：
css
/* 提前准备的样式代码 */
page {
padding: 40rpx 0;
box-sizing: border-box;
background-color: #f7f8fa;
}
.legend {
padding-left: 40rpx;
font-size: 36rpx;
color: #333;
font-weight: 500;
}
.form-field {
display: flex;
margin-top: 20rpx;
padding: 0 40rpx;
height: 88rpx;
background-color: #fff;
line-height: 88rpx;
color: #333;
}
.form-field label {
width: 120rpx;
}
.form-field .field {
flex: 1;
}
.form-field input {
height: 100%;
}xml
<!-- 提前准备好的布局结构代码 -->
<view class="register">
<view class="legend">信息登记:</view>
<view class="form-field">
<label for="">姓名:</label>
<view class="field">...</view>
</view>
<view class="form-field">
<label for="">性别:</label>
<view class="field">...</view>
</view>
<view class="form-field">
<label for="">爱好:</label>
<view class="field">...</view>
</view>
<view class="form-field">
<label for="">籍贯:</label>
<view class="field">...</view>
</view>
<view class="form-field">
<label for="">生日:</label>
<view class="field">...</view>
</view>
</view>易错点：单选框、复选框要配合 group 使用；value 与 checked 别混；picker 的 mode 不写就不是想要的选择器。
scroll-view 滚动区域
为什么需要：页面局部需要滚动，且要支持下拉刷新等高级交互时，用普通 view 不够。
怎么想：先判断滚动方向，再保证内容有溢出；垂直滚动必须给 scroll-view 指定高度。
怎么做：用 scroll-x 控制水平滚动、scroll-y 控制垂直滚动、refresher-enable 开启下拉刷新。下面保留本节准备代码：
css
/* 提前准备的样式代码 */
page {
background-color: #f2f2f2;
}
.search-bar {
padding: 20rpx 30rpx;
background-color:#fff;
}
.search-bar input {
padding: 14rpx 20rpx 10rpx 40rpx;
border: 1rpx solid #eee;
border-radius: 70rpx;
font-size: 28rpx;
color: #333;
}
.page-body {
height: 700rpx;
display: flex;
margin-top: 20rpx;
}
.page-body .aside {
width: 200rpx;
padding: 20rpx;
background-color: #fff;
}
.page-body .aside .item {
height: 60rpx;
margin-bottom: 20rpx;
border-radius: 10rpx;
background-color: #eee
}
.page-body .aside .active {
background-color: pink;
}
.page-body .content {
flex: 1;
padding: 20rpx;
margin-left: 20rpx;
background-color: #fff;
}
.page-body .content .item {
float: left;
width: 215rpx;
height: 215rpx;
margin: 0 20rpx 20rpx 0;
border-radius: 10rpx;
background-color: #eee;
}
.page-body .content .item:nth-child(even) {
margin-right: 0;
}xml
<!-- 提前准备好的布局结构代码 -->
<!-- 搜索框 -->
<view class="search-bar">
<input type="text" placeholder="输入搜索关键字" />
</view>
<!-- 页面主体 -->
<view class="page-body">
<view class="aside">
<view class="item"></view>
<view class="item"></view>
<view class="item"></view>
</view>
<view class="content">
<view class="item"></view>
<view class="item"></view>
<view class="item"></view>
</view>
</view>易错点：内容没有溢出不会滚动；垂直滚动不设高度常导致“看起来没效果”；不要把 scroll-view 当成普通页面容器滥用。
调试与收束
转写稿里还补充了两个调试经验：一是 tabBar 配置后，navigator 跳 tabBar 页要指定 open-type="switchTab"；二是图片、轮播图默认尺寸会受容器影响，需用 rpx 或样式明确宽高。遇到属性不确定时，直接查文档并悬停看说明，不要死记。这样练，组件才能从“认识标签”变成“会做页面”。
课件图示
代码示例
示例 1：app.json 全局配置 + tabBar
json
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/my/index"
],
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#f5a11c",
"navigationBarTitleText": "学习小程序",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": false,
"navigationStyle": "default"
},
"tabBar": {
"color": "pink",
"selectedColor": "#e93b3d",
"list": [
{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "static/tabbar/home-default.png",
"selectedIconPath": "static/tabbar/home-active.png"
},
{
"text": "日志",
"pagePath": "pages/logs/logs",
"iconPath": "static/tabbar/logs-default.png",
"selectedIconPath": "static/tabbar/logs-active.png"
},
{
"text": "我的",
"pagePath": "pages/my/index",
"iconPath": "static/tabbar/face-default.png",
"selectedIconPath": "static/tabbar/face-active.png"
}
]
}
}要点 / 易错点
tabBar只能写在全局app.json中，且必须与pages、window同级，写成嵌套就不生效。list为数组，最少 2 项、最多 5 项，少写一项启动即报错；每项是对象，含pagePath、text、iconPath、selectedIconPath。color/selectedColor与list同级，不能写进 list 的数组项里（写进去一定不生效）。- 颜色类型要求十六进制，示例中
"pink"在真机上可能看不到效果，实际开发请写#999999这类值。 - 图标只能是本地路径，不支持网络图片；尺寸建议 81×81，避免缩放变形。
- 出现在
tabBar.list里的页面，必须同时在pages中配置过，否则无法访问。 - 页面一旦变成 tabBar 页，
navigator默认跳不动（也不报错），必须加open-type="switchTab"。
示例 2：页面四件套 + rpx + Page 逻辑 + navigator
xml
<!-- pages/index/index.wxml -->
<view class="box"></view>
<text>{{ message }}</text>
<button bind:tap="changeMessage" type="primary" size="mini">点我试试</button>
<!-- 跳普通页：绝对路径，写错路径会在控制台报错 -->
<navigator url="/pages/demo/demo" hover-class="none">去 demo 页（无点击态）</navigator>
<!-- 跳 tabBar 页：必须指定 open-type="switchTab"，否则跳不动 -->
<navigator url="/pages/logs/logs" open-type="switchTab">去日志页</navigator>css
/* pages/index/index.wxss */
.box {
width: 750rpx; /* 750rpx = 屏幕宽度，自动适配不同机型 */
height: 200rpx;
background-color: pink;
}javascript
// pages/index/index.js
Page({
data: {
message: '大家好，这是我的第一个小程序!'
},
changeMessage() {
this.setData({
message: 'Hello everyone this is my first miniprogram!'
})
}
})要点 / 易错点
- 一个页面由 4 个文件组成：
.wxml结构（≈html）、.wxss样式（≈css）、.js逻辑、.json配置；view相当于div，text相当于span。 - 页面必须调用
Page函数注册，否则页面一片空白；参数是对象。 data在小程序里是对象，不是函数；更新数据必须用this.setData()，直接this.data.message = ...不会渲染。- 数据渲染用
{{}}插值；事件绑定用bind:事件类型="回调"，如bind:tap="changeMessage"。 rpx把屏幕宽度等分成 750 份：设计稿按 750px 出图时，量到多少 px 就写多少 rpx（1:1）；换成 iPhone XR / iPad 时比例依然占满，而写px会留白。navigator的url为空会报错；建议写/开头的绝对路径，方便代码提示与目录移动。hover-class="none"取消点击变灰效果，也可以指定成自己的类名。
示例 3：swiper 轮播图 + image 缩放模式
xml
<!-- pages/demo/demo.wxml -->
<swiper class="banner" indicator-dots autoplay circular
indicator-color="#ffffff" indicator-active-color="#e93b3d">
<swiper-item>
<image src="/static/upload/slide-1.png" mode="aspectFill" lazy-load />
</swiper-item>
<swiper-item>
<image src="/static/upload/slide-2.png" mode="aspectFill" lazy-load />
</swiper-item>
<swiper-item>
<image src="/static/upload/slide-3.png" mode="aspectFill" lazy-load />
</swiper-item>
</swiper>css
/* pages/demo/demo.wxss */
.banner {
width: 750rpx; /* 图片原图 750×320，按 rpx 1:1 写，适配不拉伸 */
height: 320rpx;
}
.banner image {
width: 100%;
height: 100%;
background-color: #eee; /* 占位底色，方便观察留白/裁切 */
}要点 / 易错点
swiper内部只能嵌套swiper-item，swiper-item里再放image等任意内容；不写宽度时默认高度 150px，不响应式，必须自己设宽高。- 控制轮播的属性（
indicator-dots、autoplay、circular）统一写在父级swiper上，不是写在swiper-item上。 circular是衔接滑动：不写时滑到最后一张会弹回，写了才能循环。image不是img，默认占位容器 320×240px，容器与图片宽高比不一致时图片会被拉伸变形。mode三个常用值：scaleToFill（默认，拉伸铺满，易变形）、aspectFit（长边完整，容器留白）、aspectFill（短边完整，图片可能被裁切）——按设计稿设好宽高后，一般配mode="aspectFill"。lazy-load在长列表场景建议加上，减少图片请求压力。- 示例里的图片路径需替换成自己
static素材目录下的真实文件，路径写错图片不显示且可能无提示。
常见错误
1. tabBar 写错文件 现象：配置完 tabBar 后底部没有任何变化，也不报错。 原因：把配置写进了页面级 xxx.json，而 tabBar 只认全局 app.json。 修法：把整段 tabBar 剪切到 app.json，与 pages、window 同级，不要嵌进 window 里。
2. 文字颜色写进 list 项 现象："color" / "selectedColor" 写了但底部文字颜色不变。 原因：这两个属性属于 tabBar 本身，list 数组项只接受 pagePath、text、iconPath、selectedIconPath。 修法：把颜色提到 tabBar 层级，与 list 平级；list 项里删掉多余的颜色字段。
3. list 数量不合法 现象：编译直接报错，提示至少两项 / 最多五项。 原因：tabBar.list 是必填项且有 2～5 个的数量约束。 修法：先补齐到 2 项再预览；只有 1 个页面时不要急着配 tabBar。
4. tabBar 页跳转"静默失败" 现象：navigator 的 url 指向 tabBar 页面，不报错但点击无反应。 原因：默认 open-type="navigate" 只能打开普通页面。 修法：加上 open-type="switchTab"；顺带检查 url 是否为空，空路径会直接报错。
5. 图标不显示 现象：底部只有文字没有图标，或图标糊/变形。 原因：iconPath 写了网络地址（只支持本地路径）、路径拼错，或图片尺寸与 81×81 差距过大。 修法：把图标放进项目目录（如 static/tabbar/），用 / 开头的绝对路径配合代码提示补全；按 81×81 准备素材。
6. 尺寸单位用错 现象：在 iPhone 6/7/8 上刚好占满，换大屏机型就留一大片空白。 原因：用了 px，它不随屏幕缩放。 修法：设计稿按 750px 出图，量多少写多少 rpx；只有 1px 边框、字体下限等少数场景才用 px。若设计稿不是 750，先换算再写。
7. 图片变形 现象：image 一放上去就被拉伸/压扁，换机型更明显。 原因：image 自带 320×240 的占位容器，默认 scaleToFill 会把图拉满这个框。 修法：先按设计稿给 image 设宽高，再按需求选 mode——要完整显示用 aspectFit（会留白），要铺满不留白用 aspectFill（会裁切）。
8. swiper 属性加错层级 现象：autoplay、indicator-dots、circular 写了没效果。 原因：写到了 swiper-item 上，这些是容器的统一控制属性。 修法：全部移到 swiper 标签上；同时记得给 swiper 和内部 image 都设宽高（默认高度仅 150px）。
练习
练习 1：修一个坏掉的 tabBar 给你的项目配一个三项 tabBar（首页 / 日志 / 我的）。要求：文字未选中灰色、选中主题色；图标放本地目录；配完后分别用底部点击和页面内 navigator 两种方式切到"日志"页，都能成功。做完后故意把 selectedColor 挪进 list 项里，观察现象并改回。
练习 2：rpx 适配验证 写一个 width: 700rpx; height: 200rpx; 的色块，在模拟器里依次切换 iPhone 5、iPhone 6/7/8、iPhone XR、iPad，记录每种机型下它占屏宽的比例，并截图对比。然后把它改成 700px 再走一遍，说明差异原因。
练习 3：图片三种模式对比 准备一张明显非正方形的图（如 750×320 的 banner），放进三个同为 200rpx × 200rpx 的 image，分别用默认、aspectFit、aspectFill，给容器加浅灰背景以便观察留白与裁切，然后判断哪种模式适合"商品列表缩略图"、哪种适合"图片全屏预览"。
练习 4：轮播图 用 3 张 750×320 的图做轮播：显示指示点、自动播放、可循环衔接，宽高用 rpx 保证不随屏幕变形。完成后把 autoplay 和 indicator-dots 移到 swiper-item 上，观察失效现象并修正。
练习 5（综合）：把表单塞进滚动区 用课前给的 .register 表单结构和 .page-body 布局，做两件事：① 表单区用 scroll-view 包裹，垂直滚动，并开启下拉刷新；② 左侧列表 .item 点击后加 active 类高亮。要求全程只用 rpx，且在 iPhone 5 与 iPad 上都不出现横向滚动条。
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | 小程序tabBar配置 | 14:38 |
| 2 | 小程序尺寸单位rpx | 07:49 |
| 3 | 小程序组件-navigator | 12:26 |
| 4 | 上午复习 | 06:26 |
| 5 | 小程序组件-image | 12:58 |
| 6 | 组件通用属性和webView | 05:03 |
| 7 | 小程序组件-swiper | 07:33 |
小结
tabBar是全局配置，位置错了不会报错、只会静默不生效——"没效果"时先查配置文件，再查层级。- 记住
tabBar的两层结构：颜色/背景是容器级统一配置，路径/文字/图标才是list 项级配置，两者不能互换。 - 一旦页面进了 tabBar，它就是"特殊页"：所有跳转到它的
navigator都必须带open-type="switchTab"，这是配置 tabBar 后必然要连带处理的事。 rpx的本质是把屏宽等分为 750 份，它的价值不在"新单位"，而在让设计稿 750px 与代码 1:1 对应，从而省掉换算。image是"相框 + 相片"两层概念，先定框（宽高），再定显示方式（mode）；不设宽高几乎一定会变形。swiper的结构和属性都由框架封装好了，难点不在写法，而在样式：容器和内部图片都要显式给宽高，否则默认尺寸会毁掉效果。- 小程序组件属性数量庞大，正确的学习路径是"写标签 → 悬停看文档 → 查属性说明"，而不是背下来；本课真正要带走的是这套查文档的方法。
- 所有配置类和组件类问题的排查顺序固定为：文件对不对 → 层级对不对 → 必填项齐不齐 → 属性是否属于该层。