微信小程序

# 小程序的宿主环境
## 宿主环境简介
>i 1. 什么是宿主环境

`宿主环境`(host environment)指的是程序运行所必须的依赖环境。
例如：`Android系统`和`IOS系统`是不同的宿主环境。安卓版的微信APP是不能再IOS环境下运行的。所以Android是安卓软件的宿主环境，`脱离了宿主环境的软件是没有任何意义的！`

![](/media/202601/2026-01-27_225710_1353900.0772011085808787.png)

>i 2. 小程序的宿主环境

`手机微信是小程序的宿主环境`，如图所示:

![](/media/202601/2026-01-27_225838_9737070.1462673599929778.png)
小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能。例如：
微信扫码、微信支付、微信登录、地理位置、etc...

>i 3.小程序宿主环境包含的内容

- 1) 通信模型
- 2) 运行机制
- 3) 组件
- 4) API

## 通信模型
>i 1、通信主体

小程序中通信的主体是`渲染层`和`逻辑层`，其中：
- 1）WXML模版和WXSS样式工作在渲染层
- 2）JS脚本工作在逻辑层

![](/media/202601/2026-01-27_232043_4442790.4659985837183178.png)

>i 2、小程序的通信模型

小程序中的通信模型分为两个部分：
1）`渲染层`和`逻辑层`之间的通信： `由微信客户端进行转发`
2）`逻辑层`和`第三方服务器`之间的通信：`由微信客户端转发`

![](/media/202601/2026-01-27_232457_1693840.7577851700650524.png)

## 运行机制

>i 5、小程序启动的过程

- 1）把小程序的代码包下载到本地
- 2）解析app.json全局配置文件
- 3）执行app.js小程序入口，`调用app()创建小程序实例`
- 4）渲染小程序首页
- 5）小程序启动完成

>i 6、页面渲染的过程

- 1）加载解析页面的.json配置文件
- 2）加载页面的.wxml模版和.wxss央视
- 3）执行页面的.js文件，`调用Page()创建页面实例`
- 4）页面渲染完成

## 组件
>i 1、小程序组件的分类

`小程序中的组件也是由宿主环境提供的`，开发者可以基于组件快速搭建出漂亮的页面结构。官方吧小程序的组件分为9大类,分别是：
- `视图容器`
- `基础内容`
- `表单组件`
- `导航组件`
- 媒体组件
- map地图组件
- canvas画布组件
- 开放能力
- 无障碍访问

>i 2、常用视图容器类组件

- **view**
	- 普通视图区域
	- 类似与HTML中的div，是一个块级元素
	- 常用来实现页面的布局效果
- **scroll-view**
	- 可滚动的视图区域
	- 常用来实现滚动列表效果
- **swiper和swiper-item**
	- 轮播图容器组件和轮播图item组件

>i 3、view组件基本使用

实现如图flex横向布局效果：

![](/media/202601/2026-01-27_234655_4146440.9022161451957511.png)

>i 4、scroll-view组件的基本使用

实现如图的纵向滚动效果：

![](/media/202601/2026-01-28_000800_2883580.8416189569373573.png)