小程序的宿主环境

宿主环境简介

1.什么是宿主环境

宿主环境(host environment)指的是程序运行所必须的依赖环境。例如:
Android 系统和iOS系统是两个不同的宿主环境。安卓版的微信App是不能在iOS 环境下运行的，所以，
Android 是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的!

2.小程序的宿主环境

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

小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如:
微信扫码、微信支付、微信登录、地理定位、etc...

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

（1）通信模型

（2）运行机制

（3）组件

（4）API

通信模型

1.通信的主体

小程序中通信的主体是渲染层和逻辑层，其中：

• WXML 模板和 WXSS样式工作在渲染层
• JS 脚本工作在逻辑层

2.小程序的通信模型

小程序中的通信模型分为两部分:
①渲染层和逻辑层之间的通信
      &由微信客户端进行转发
②逻辑层和第三方服务器之间的通信
      &由微信客户端进行转发

运行机制

1.小程序启动的过程

①把小程序的代码包下载到本地

②解析 app.json 全局配置文件

③执行app.js 小程序入口文件，调用App()创建小程序实例

④渲染小程序首页

⑤小程序启动完成

2.页面渲染的过程

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

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

③ 执行页面的.js 文件，调用 Page() 创建页面实例

④页面渲染完成

组件

1.小程序中组件的分类

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了9大类，分别是:

①视图容器

②基础内容

③表单组件

④导航组件

⑤媒体组件

⑥map 地图组件

⑦canvas 画布组件

⑧开放能力

⑨无障碍访问

2.常用的视图容器类组件

①view

• 普通视图区域
• 类似于 HTML 中的div，是一个块级元素
• 常用来实现页面的布局效果

②scroll-view

• 可滚动的视图区域
• 常用来实现滚动列表效果

③swiper 和 swiper-item

• 轮播图容器组件和轮播图item 组件

3.view组件的基本使用

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

4.scroll-view 组件的基本使用

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

5.swiper 和 swiper-item 的组件的基本使用

实现如图的轮播效果：

6.swiper 组件的常用属性

属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示面板指示点
indicator-color	color	raba（0，0，0，3）	指示点颜色
indicator-active-color	color	#000000	当前选中的指示点颜色
autoplay	boolean	false	是否自动切换
interval	number	5000	自动切换时间间隔
circular	boolean	false	是否采用衔接滑动

7.常用的基础内容组件

（1）text

• 文本组件
• 类似于 HTML 中的span标签，是一个行内元素

（2）rich-text

• 富文本组件
• 支持把 HTML 字符串渲染为WXML结构

8.text组件的基本使用

通过text组件的 uer-select 属性，实现长按选中文本内容的效果：

9. rich-text 组件的基本使用

通过 rich-text 的组件的 nodes 属性节点，把HTML字符串渲染为对应的UI结构：

10.其他常用组件

（1）button

• 按钮组件
• 功能比 HTML 中的 button 按钮丰富
• 通过 open-type属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等）

（2）image

• 图片组件
• image 组件默认宽度约300px、高度约 240px

（3）navigator (后面课程会专门讲解)

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

11. button 按钮的基本使用

12.image组件的基本使用

13. image 组件的 mode 属性

image 组件的 mode 属性用来指定图片的裁剪和缩放模式，常用的 mode 属性如下：

mode值	说明
scaletofill	（默认值）缩放模式，不保持纵横缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边完全显示出来。 也就是说，可以完整地将图片显示出来
aspectFill	缩放模式，保持纵横缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变