微信小程序--4（宿主环境）

目录

一、宿主环境概念

二、小程序的宿主环境----微信

（一）组成

1、通信模型

2、运行机制

3、组件

4、API

---

一、宿主环境概念

程序运行所需的依赖环境。

例如：安卓系统下的安卓软件如果运行到苹果系统上去，这肯定是会报错的，所以安卓软件的宿主环境就是安卓系统。

二、小程序的宿主环境----微信

小程序依赖微信可以完成微信支付、微信登录、地理定位、扫码...

（一）组成

1、通信模型

（1）通信主体：逻辑层（JS脚本）、渲染层（WXSS、WXML）

（2）通信模型

• 渲染层和逻辑层之间的通信--由微信客户端进行转发
• 逻辑层和第三方服务器之间的通信--由微信客户端进行转发

2、运行机制

（1）启动过程

• 代码包下载
• 解析app.json全局配置
• 执行app.is入口文件，调用app()创建实例
• 渲染首页
• 启动完成

（2）渲染过程

• 加载解析页面的.json配置文件
• 加载页面的.wxml模板和.wxss样式
• 执行页面的.js文件，调用Page()创建页面实例
• 渲染完成

3、组件

由宿主环境提供，开发者可基于组件快速搭建页面结构。

组件分类：

（1）视图容器

• view：普通试图区域，类似HTML中的div，是一个块级元素

• scorll-view：滚动视图区域，实现滚动列表效果

• swiper和swiper-item：轮播图容器组件和轮播图item组件

（2）基础组件

• text：文本组件，类似HTML中的span标签

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

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

• button：按钮组件

功能比HTML中的button按钮丰富

通过open-type属性可以调用转发获取用户授权，获取用户信息等功能

• image：图片组件

默认宽高分别为300px，240px

image组件中可以通过mode属性来裁剪和缩放模式，常用的mode的属性值

mode值	说明
scaleToFill	不保持纵横比，使图片的宽高完全拉伸至填满image元素
aspectFit	保持纵横比，使图片的长边完全显示，完整的将图片显示出来
aspectFill	保持纵横比，使图片的短边完全显示，图片只能在垂直或者水平方向保持完整
widthFix	宽度不变高度自动调整
heightFix	高度不变，宽度自动调整

（3）导航组件：navigatior

（4）表单组件

（5）媒体组件

（6）map地图组件

（7）canvas画布组件

（8）开放能力

（9）无障碍访问

4、API

由宿主环境提供，可通过这些API方便调用微信提供的功能。

（1）事件监听

以on开头，用来监听某些事件的触发

（2）同步API

以Sync结尾的API

同步API的执行结果，可通过函数返回值获取，若执行错误则抛出异常

（3）异步API

类似于jQuery中的$.ajax(options)函数，需要通过success、fail、complete接收调用的结果