微信小程序入门学习教程，从入门到精通，微信小程序核心组件详解与使用方法(12）

微信小程序核心组件详解与使用方法

一、视图容器组件

1. 基础视图容器 <view>

语法知识点：

• <view> 是块级容器，用于布局分组。
• 支持 class、style、bindtap 等通用属性。
• 默认为 display: block，可设置 flex 布局。

案例代码：

<!-- index.wxml -->
<view class="container"><view style="background-color: #f0f0f0; padding: 20rpx; margin-bottom: 10rpx;">这是一个基础视图容器</view><view bindtap="onViewClick">点击我触发事件</view>
</view>

/* index.wxss */
.container {padding: 20rpx;display: flex;flex-direction: column;
}

// index.js
Page({onViewClick() {wx.showToast({ title: 'View被点击了' });}
});

---

2. 滑块视图容器 <swiper>

语法知识点：

• 实现轮播图效果。
• 子组件为 <swiper-item>。
• 常用属性：indicator-dots、autoplay、interval、duration、circular。

案例代码：

<!-- swiper.wxml -->
<swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="3000" duration="500" circular="{{true}}"bindchange="onSwiperChange"style="height: 300rpx;"><swiper-item><image src="/images/banner1.jpg" mode="widthFix" style="width:100%"/></swiper-item><swiper-item><view style="background-color: red; height: 300rpx; display: flex; align-items: center; justify-content: center;">第二页</view></swiper-item><swiper-item><text>第三页内容</text></swiper-item>
</swiper>

// swiper.js
Page({onSwiperChange(e) {console.log('当前轮播图索引:', e.detail.current);}
});

---

3. 可滚动视图容器 <scroll-view>

语法知识点：

• 实现横向或纵向滚动。
• 属性：scroll-x、scroll-y、scroll-top、scroll-left、enable-back-to-top。
• 需设置固定宽高才能滚动。

案例代码（横向滚动）：

<!-- scroll.wxml -->
<scroll-view scroll-x="true" class="scroll-container"><view wx:for="{{items}}" wx:key="index" class="scroll-item">{{item}}</view>
</scroll-view>

/* scroll.wxss */
.scroll-container {white-space: nowrap;width: 100%;border: 1px solid #ddd;padding: 10rpx 0;
}.scroll-item {display: inline-block;width: 200rpx;height: 150rpx;margin: 0 20rpx;background-color: #e0f7fa;text-align: center;line-height: 150rpx;
}

// scroll.js
Page({data: {items: ['项目1', '项目2', '项目3', '项目4', '项目5']}
});

---

4. 可移动视图容器 <movable-view>

语法知识点：

• 可拖动或双指缩放的视图。
• 需包裹在 <movable-area> 中。
• 属性：x、y、direction、inertia、scale、scale-min、scale-max。

案例代码：

<!-- movable.wxml -->
<movable-area style="height: 300rpx; width: 100%; background: #f0f0f0;"><movable-view x="{{x}}" y="{{y}}" direction="all" inertia scale="{{true}}" scale-min="0.5" scale-max="2"bindchange="onMoveChange">可拖动视图</movable-view>
</movable-area><button bindtap="resetPosition">重置位置</button>

// movable.js
Page({data: {x: 0,y: 0},onMoveChange(e) {console.log('当前位置:', e.detail.x, e.detail.y);},resetPosition() {this.setData({ x: 0, y: 0 });}
});

---

5. 原生视图容器 <cover-view>

语法知识点：

• 用于覆盖在原生组件（如地图、视频）上的视图。
• 不受层级限制，可覆盖 <map>、<video>。
• 支持嵌套 <cover-image>。

案例代码：

<!-- cover.wxml -->
<map longitude="116.397026" latitude="39.909090" scale="14" style="width: 100%; height: 400rpx;"><!-- 覆盖在地图上的按钮 --><cover-view class="map-overlay"><cover-view>北京</cover-view><cover-image src="/images/location.png" style="width:40rpx;height:40rpx;"></cover-image></cover-view></map>

/* cover.wxss */
.map-overlay {position: absolute;top: 20rpx;left: 20rpx;background: rgba(0,0,0,0.6);color: white;padding: 10rpx 20rpx;border-radius: 10rpx;display: flex;align-items: center;
}

---

二、基础组件

1. 文本组件 <text>

语法知识点：

• 显示文本，支持长按选中、复制。
• 属性：selectable、space、decode。
• space="emsp" 可显示空格。

案例代码：

<text selectable="{{true}}" space="emsp">这是一段可选中的文本，&nbsp;&nbsp;这里有两个空格。
</text>

---

2. 富文本组件 <rich-text>

语法知识点：

• 渲染 HTML 片段。
• 使用 nodes 属性传入数组或字符串。
• 支持部分 HTML 标签（如 div, p, img, strong 等）。

案例代码：

<!-- rich.wxml -->
<rich-text nodes="{{htmlContent}}" bindtap="onRichTap"></rich-text>

// rich.js
Page({data: {htmlContent: `<div style="color: blue;"><h3>富文本标题</h3><p>这是一段<strong>加粗</strong>的文本。</p><img src="https://example.com/logo.png" style="width:100px"/></div>`},onRichTap() {console.log('富文本被点击');}
});

---

3. 进度条组件 <progress>

语法知识点：

• 显示进度，属性：percent、show-info、stroke-width、color。
• active 可开启动画。

案例代码：

<progress percent="60" show-info stroke-width="6" color="#10aeff" />
<progress percent="{{uploadProgress}}" active active-mode="forwards" />

// progress.js
Page({data: {uploadProgress: 0},onLoad() {let progress = 0;const timer = setInterval(() => {progress += 5;this.setData({ uploadProgress: progress });if (progress >= 100) clearInterval(timer);}, 200);}
});

---

4. 图标组件 <icon>

语法知识点：

• 显示微信内置图标。
• 属性：type、size、color。
• 类型：success, info, warn, waiting, cancel, download, clear, search。

案例代码：

<icon type="success" size="40" color="#09bb07" />
<icon type="warn" size="30" />

---

三、表单组件

1. 按钮 <button>

语法知识点：

• 触发操作，属性丰富。
• type：primary、default、warn。
• plain、disabled、loading、form-type（提交表单）、open-type（调用微信能力）。

案例代码：

<button type="primary" bindtap="onSubmit">提交</button>
<button type="default" plain>普通按钮</button>
<button type="warn" disabled>禁用按钮</button>
<button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">获取用户信息</button>

Page({onSubmit() {wx.showToast({ title: '提交成功' });},onGetUserInfo(e) {console.log('用户信息:', e.detail.userInfo);}
});

---

2. 输入框 <input>

语法知识点：

• 收集用户输入。
• 属性：value、type（text/number/idcard/digit）、password、placeholder、bindinput、bindconfirm。

案例代码：

<input value="{{username}}" type="text" placeholder="请输入用户名" bindinput="onInputUsername"bindconfirm="onConfirmUsername"
/>

Page({data: { username: '' },onInputUsername(e) {this.setData({ username: e.detail.value });},onConfirmUsername() {wx.showToast({ title: '输入完成' });}
});

---

3. 单选按钮 <radio-group> + <radio>

语法知识点：

• 一组中只能选一个。
• <radio-group> 包裹多个 <radio>。
• value 绑定选中项。

案例代码：

<radio-group bindchange="onRadioChange"><label wx:for="{{options}}" wx:key="name"><radio value="{{item.value}}" checked="{{item.checked}}" />{{item.name}}</label>
</radio-group>

Page({data: {options: [{ name: '男', value: 'male', checked: true },{ name: '女', value: 'female', checked: false }]},onRadioChange(e) {console.log('选中值:', e.detail.value);}
});

---

4. 复选框 <checkbox-group> + <checkbox>

语法知识点：

• 可多选。
• bindchange 返回选中值数组。

案例代码：

<checkbox-group bindchange="onCheckboxChange"><label wx:for="{{hobbies}}" wx:key="id"><checkbox value="{{item.value}}" /> {{item.name}}</label>
</checkbox-group>

Page({data: {hobbies: [{ id: 1, name: '阅读', value: 'read' },{ id: 2, name: '音乐', value: 'music' },{ id: 3, name: '运动', value: 'sport' }]},onCheckboxChange(e) {console.log('选中的爱好:', e.detail.value);}
});

---

5. 选择器 <picker>

语法知识点：

• 弹出选择器，支持多种模式：
  • mode="selector"：普通选择
  • mode="time"：时间选择
  • mode="date"：日期选择
  • mode="region"：省市区选择

案例代码（省市区选择）：

<picker mode="region" bindchange="onRegionChange"><view class="picker">当前选择: {{region[0]}}-{{region[1]}}-{{region[2]}}</view>
</picker>

Page({data: {region: ['广东省', '广州市', '天河区']},onRegionChange(e) {this.setData({ region: e.detail.value });}
});

---

6. 表单 <form>

语法知识点：

• 包裹表单组件，通过 bindsubmit 提交。
• 使用 report-submit 可获取 formId（用于模板消息）。

案例代码：

<form bindsubmit="onFormSubmit" bindreset="onFormReset"><input name="username" placeholder="用户名" /><input name="email" type="text" placeholder="邮箱" /><radio-group name="gender"><radio value="male" /> 男<radio value="female" /> 女</radio-group><button form-type="submit">提交</button><button form-type="reset">重置</button>
</form>

Page({onFormSubmit(e) {console.log('表单数据:', e.detail.value);// 提交到服务器},onFormReset() {console.log('表单已重置');}
});

---

四、导航组件 <navigator>

语法知识点：

• 页面跳转。
• url：目标页面路径。
• open-type：navigate（默认）、redirect、switchTab、reLaunch、navigateBack。

案例代码：

<navigator url="/pages/detail/detail" hover-class="navigator-hover">跳转到详情页
</navigator><navigator url="/pages/index/index" open-type="switchTab">切换到首页
</navigator><navigator open-type="navigateBack" delta="1">返回上一页
</navigator>

---

五、媒体组件

1. 音/视频组件 <video>

语法知识点：

• 播放视频，属性：src、poster、controls、autoplay、bindplay、bindpause。

案例代码：

<video src="https://example.com/video.mp4"poster="/images/poster.jpg"controls="{{true}}"autoplay="{{false}}"bindplay="onVideoPlay"style="width: 100%; height: 400rpx;"
/>

Page({onVideoPlay() {console.log('视频开始播放');}
});

---

2. 图片显示组件 <image>

语法知识点：

• 显示图片，src 为图片路径。
• mode 控制裁剪缩放：aspectFit、aspectFill、widthFix 等。
• bindload、binderror 监听事件。

案例代码：

<image src="{{imgSrc}}" mode="aspectFill" bindload="onImageLoad" binderror="onImageError"style="width: 200rpx; height: 200rpx;"
/>

Page({data: { imgSrc: '/images/photo.jpg' },onImageLoad(e) {console.log('图片加载成功', e.detail);},onImageError(e) {console.log('图片加载失败', e.detail);}
});

---

3. 系统相机组件 <camera>

语法知识点：

• 调用设备摄像头。
• mode：normal、scanCode。
• 可监听 bindscancode 扫码事件。

案例代码：

<camera mode="scanCode" bindscancode="onScanCode" style="width: 100%; height: 500rpx;"></camera>
<button bindtap="takePhoto">拍照</button>

Page({takePhoto() {const ctx = wx.createCameraContext();ctx.takePhoto({success: (res) => {this.setData({ photo: res.tempImagePath });}});},onScanCode(res) {wx.showToast({ title: '扫码结果: ' + res.detail.result });}
});

---

4. 地图组件 <map>

语法知识点：

• 显示地图，需申请腾讯地图 Key。
• 属性：longitude、latitude、scale、markers、polyline。
• 支持 bindmarkertap、bindregionchange。

案例代码：

<map id="myMap"longitude="116.397026" latitude="39.909090" scale="14"markers="{{markers}}"bindmarkertap="onMarkerTap"style="width: 100%; height: 600rpx;"
/>

Page({data: {markers: [{id: 1,latitude: 39.909090,longitude: 116.397026,name: '天安门',callout: { content: '点击查看详情', display: 'ALWAYS' }}]},onMarkerTap(e) {wx.navigateTo({ url: '/pages/location-detail' });}
});

---

六、综合性实战案例：商品详情页

功能：

• 轮播图展示商品图片
• 滚动查看商品详情（富文本）
• 选择颜色/尺寸（单选+复选）
• 提交订单（表单）
• 底部导航按钮

WXML 代码：

<!-- pages/product/detail.wxml -->
<view class="product-container"><!-- 轮播图 --><swiper autoplay interval="3000" style="height: 600rpx;"><swiper-item wx:for="{{images}}" wx:key="index"><image src="{{item}}" mode="widthFix" style="width:100%"/></swiper-item></swiper-item></swiper><!-- 商品信息 --><view class="info-section"><text class="title">{{product.name}}</text><text class="price">¥{{product.price}}</text></view><!-- 规格选择 --><view class="spec-section"><view><text>颜色：</text><radio-group bindchange="onColorChange"><radio wx:for="{{colors}}" wx:key="index" value="{{item}}">{{item}}</radio></radio-group></view><view><text>尺寸：</text><checkbox-group bindchange="onSizeChange"><checkbox wx:for="{{sizes}}" wx:key="index" value="{{item}}">{{item}}</checkbox></checkbox-group></view></view><!-- 商品详情 --><view class="detail-section"><rich-text nodes="{{product.detail}}"></rich-text></view><!-- 提交按钮 --><view class="footer"><button type="primary" bindtap="onSubmitOrder">立即购买</button></view>
</view>

JS 逻辑：

// pages/product/detail.js
Page({data: {images: ['/images/prod1.jpg','/images/prod2.jpg','/images/prod3.jpg'],product: {name: '高端T恤',price: '299.00',detail: '<p>纯棉材质，舒适透气。</p><img src="/images/detail1.jpg" style="width:100%"/>'},colors: ['红色', '蓝色', '黑色'],sizes: ['S', 'M', 'L', 'XL'],selectedColor: '',selectedSizes: []},onColorChange(e) {this.setData({ selectedColor: e.detail.value });},onSizeChange(e) {this.setData({ selectedSizes: e.detail.value });},onSubmitOrder() {if (!this.data.selectedColor || this.data.selectedSizes.length === 0) {wx.showToast({ title: '请选择规格', icon: 'none' });return;}wx.showToast({ title: '订单提交成功' });}
});

WXSS 样式（部分）：

/* pages/product/detail.wxss */
.product-container {display: flex;flex-direction: column;min-height: 100vh;
}.info-section {padding: 20rpx;
}.title {font-size: 36rpx;font-weight: bold;
}.price {color: #e64340;font-size: 40rpx;margin-top: 10rpx;
}.spec-section {padding: 30rpx 20rpx;background: #f8f8f8;
}.footer {position: fixed;bottom: 0;width: 100%;padding: 20rpx;background: white;box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
}

---

本章小结

组件类型	核心组件	主要用途
视图容器	view, scroll-view, swiper	布局、滚动、轮播
基础组件	text, rich-text, icon	文本、富文本、图标显示
表单组件	input, radio, checkbox, picker	用户输入、选择
导航组件	navigator	页面跳转
媒体组件	image, video, camera, map	图片、音视频、相机、地图
原生覆盖组件	cover-view	覆盖原生组件

最佳实践建议：

1. 使用 rpx 实现响应式布局。
2. 表单提交前务必校验数据。
3. 复杂页面使用 scroll-view 或分页加载。
4. 注意 <cover-view> 的使用场景。
5. 图片资源使用 CDN 加速。

---

以上内容全面覆盖了微信小程序核心组件的语法、属性、事件、使用场景及实战案例，适用于初学者和进阶开发者参考与学习。