微信小程序开发基础：宿主环境与核心组件

一、宿主环境简介

什么是宿主环境？
宿主环境指的是小程序代码运行所依赖的环境。小程序并非独立运行，而是寄生于特定的平台（如微信客户端）中，这个平台为小程序提供运行所需的各种能力，例如：微信扫码、微信支付、地理定位……

宿主环境提供的四个主要内容：

• 通信模型 – 数据传输与交互机制

• 运行机制 – 小程序的启动和渲染流程

• 组件 – 用于构建界面的基本单位

• API – 调用宿主环境功能的方法

二、通信模型

2.1 通信主体

在小程序的通信模型中，包含三个主要的通信主体：

① 渲染层

• 由 WXML 模板和 WXSS 样式组成

• 负责小程序的界面渲染

• 相当于前端的"视图层"

② 逻辑层

• 由 JavaScript 代码组成

• 负责小程序的业务逻辑处理

• 相当于前端的"控制层"

③ 微信客户端（Native）

• 提供小程序运行的基础环境

• 负责转发逻辑层与渲染层之间的消息

2.2 通信过程

微信客户端充当中转站的角色：

text

逻辑层（JavaScript） ←→ 微信客户端（Native） ←→ 渲染层（WXML+WXSS）

• 逻辑层把数据变化通知到微信客户端

• 微信客户端转发数据到渲染层

• 渲染层接收到数据后重新渲染页面

三、运行机制

3.1 小程序的启动过程

小程序启动分为两个步骤：

① 下载小程序代码包

• 用户首次打开或更新小程序时

• 从微信服务器下载代码包到本地

• 包含所有页面文件、资源文件等

② 注入代码并初始化小程序

text

下载代码包 → 加载 app.json → 执行 app.js（调用App()创建小程序实例）→ 注册 App 实例 → 启动小程序

3.2 页面渲染过程

页面渲染遵循特定流程：

① 加载解析页面的.json配置

② 加载页面的.wxml模板和.wxss样式

③ 执行页面的.js文件

• 调用 Page() 函数创建页面实例

④ 渲染页面并显示

四、小程序组件概述

4.1 什么是组件

组件是小程序视图层的基本组成单元，一个完整的组件包括：

• 开始标签和结束标签

• 属性用来修饰组件

• 内容位于两个标签之间

语法格式：

wxml

<标签名 属性="值">
内容区域
</标签名>

4.2 组件的分类

小程序组件按照功能可以分为九大类：

前4个比较常用： 视图容器、基础内容、表单组件、导航组件是日常开发中最频繁使用的组件类型。

五、常用组件详解

5.1 视图容器组件

① view 组件
最基本的视图容器，类似于 HTML 中的 div 标签。

在小程序中，我们使用 WXML 和 WXSS 来实现 Flex 布局效果。以下是完整的实现代码：

WXML 代码部分：

wxml

<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>

WXSS 样式部分：

wxss

/* 容器样式 */
.container1 {
display: flex; /* 启用Flex布局 */
justify-content: space-around; /* 子元素平均分布，两端留空 */
}

/* 子元素通用样式 */
.container1 view {
width: 100px; /* 宽度100px */
height: 100px; /* 高度100px */
text-align: center; /* 文字水平居中 */
line-height: 100px; /* 文字垂直居中 */
}

/* 第一个子元素样式 */
.container1 view:nth-child(1) {
background-color: lightgreen; /* 浅绿色背景 */
}

/* 第二个子元素样式 */
.container1 view:nth-child(2) {
background-color: lightskyblue; /* 浅天蓝色背景 */
}

/* 第三个子元素样式 */
.container1 view:nth-child(3) {
background-color: lightcoral; /* 浅珊瑚色背景 */
}

代码解析：

1. 容器部分 (.container1)

• display: flex; – 将容器设置为Flex布局

• justify-content: space-around; – 子元素在容器内平均分布，每个元素两侧有相等的空间

2. 子元素通用样式

• width: 100px; – 每个子元素宽度为100像素

• height: 100px; – 每个子元素高度为100像素

• text-align: center; – 文字在水平方向居中

• line-height: 100px; – 行高等于元素高度，实现垂直居中

3. 各子元素独立样式

• :nth-child(1) – 选择第一个子元素，设置浅绿色背景

• :nth-child(2) – 选择第二个子元素，设置浅天蓝色背景

• :nth-child(3) – 选择第三个子元素，设置浅珊瑚色背景

② scroll-view 组件

可滚动视图区域，用于实现滚动列表效果。

WXML 代码部分：

wxml

<scroll-view class="container" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>

WXSS 样式部分：

wxss

/* scroll-view 容器样式 */
.container {
width: 100px;
height: 120px; /* 固定高度，超出部分可滚动 */
}

/* 子项通用样式 */
.container view {
width: 100px;
height: 100px; /* 每个子项高度 */
text-align: center; /* 文字水平居中 */
line-height: 100px;
}

/* 各子项颜色样式不变 */

代码解析：

• scroll-y – 允许纵向滚动，横向就用-x

• 容器高度固定为120px，当子项总高度超过规定时出现滚动条

• scroll-y启用纵向滚动，用户可上下滑动查看所有内容

③ swiper和swiper-item 组件
滑块视图容器，常用于轮播图效果。

WXML 代码部分：

wxml

<swiper class="swiper-container" indicator-dots autoplay interval="3000" duration="500">
<swiper-item>
<view class="item">A</view>
</swiper-item>
<swiper-item>
<view class="item">B</view>
</swiper-item>
<swiper-item>
<view class="item">C</view>
</swiper-item>
<swiper-item>
<view class="item">D</view>
</swiper-item>
</swiper>

WXSS 样式部分：

css

/* 轮播图容器 */
.swiper-container {
height: 150px; /* 轮播图容器的高度 */
}

/* 轮播图项通用样式 */
.item {
height: 100%; /* 占满父容器高度 */
line-height: 150px; /* 垂直居中 */
text-align: center;
}

/* 各轮播图项背景色不变 */

代码解析：

1. swiper 组件属性：

• indicator-dots – 显示轮播图指示点

• autoplay – 自动播放轮播图

• interval="3000" – 自动切换时间间隔为3秒，默认为5秒

2. swiper-item 组件：

• 每个 swiper-item 代表轮播图中的一页

• 可以包含任意内容，如 view、image、text 等组件

3. 功能特性：

在实际开发中，轮播图通常用于展示：商品广告、活动宣传、新闻头条、产品展示、图片集锦等

swiper组件的常用属性：

5.2 基础内容组件

① text 组件
用于显示文本的组件，支持嵌套和样式继承。

常用属性：

html

<text selectable>
这里是可以选择的文本内容
</text>

test中的内容可以被长按复制，但一定要记得加selectable
② rich-text 组件

富文本组件，用于渲染包含HTML节点的复杂文本。

什么时候用 rich-text？什么是渲染？
渲染是指将数据按照一定规则转换为可视化的界面过程。当需要显示包含多种样式、图片、链接等的复杂文本内容时，使用 rich-text 组件。

基本用法：

wxml

<rich-text nodes="{{htmlNodes}}"></rich-text>

六、其他重要组件

6.1 button 组件
按钮组件，用于用户点击操作。

WXML 代码部分：

通过 type 指定按钮类型

wxml

<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>

size="mini" 小尺寸按钮

wxml

<button size="mini">默认按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>

plain 镂空按钮

wxml

<button size="mini" plain>默认按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

6.2 媒体组件（image 组件）

图片组件，用于显示图片。

基本用法：

wxml

<image src="/images/example.jpg"></image>

mode 属性说明：
图片可能会有点变形，因为默认的mode属性为 scaleToFill（不保持纵横比缩放图片，使图片完全适应容器）。各模式都有一定的优缺点：

6.3navigate（后面专门讲解）

• 页面导航组件
• 类似于HTML中的a链接

七、总结

需要注意： 前面举的这些例子，都是在 V2 标准下使用的。在不同的标准下，组件的具体表现和行为可能会有所不同。

小程序通过丰富的组件系统，为开发者提供了构建复杂界面的能力。理解各组件的特性和使用方法，是开发高质量小程序应用的基础。在实际开发中，应根据具体需求选择合适的组件，并注意不同标准下的差异，以确保应用的兼容性和稳定性。