宿主环境(host environment)是程序运行所必须的依赖环境。比如iOS系统和Android系统是分别是iOS应用和Android应用的宿主环境,iOS应用只能在iOS系统上运行,没法运行到Android系统上。
小程序的宿主环境
微信就是小程序的宿主环境,小程序通过微信提供的能力,可以完成许多普通网页无法完成的功能,如微信扫码,微信登录等。
微信为小程序提供的支持
- 通信模型
- 运行机制
- 组件
- API
小程序的通信模块
通信主体
小程序中的通信主体是渲染层和逻辑层,其中
- WXML 模板和 WXSS 样式工作在渲染层
- JS 脚本工作在逻辑层
通信模型
小程序中的通信模型分为两部分,都是由微信客户端进行转发
- 渲染层和逻辑层之间的通信
- 逻辑层和第三方服务器之间的通信
小程序的运行机制
小程序的运行机制包括启动过程和页面渲染两部分
启动过程
- 把小程序的代码包下载到本地
- 解析 app.json 全局配置文件
- 执行 app.js 小程序入口文件,调用 App() 创建小程序实例
- 渲染小程序首页
- 小程序启动完成
页面渲染
- 加载解析页面的 .json配置文件
- 加载页面的 .wxml 模板和 .wxss 样式
- 执行页面的 .js 文件,调用 Page() 创建页面的实例
- 页面渲染完成
组件
小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速的搭建出页面。
组件的分类
- 视图容器
- 基础内容
- 表单组件
- 导航组件
- 媒体组件
- map 地图组件
- canvas 画布组件
- 开放能力
- 无障碍访问
API
小程序中的 API 是有宿主环境提供的,通过这些丰富的小程序 API,开发者可以方便的使用微信提供的各种能力,如获取用户信息、本地存储、分享、支付功能等。
API的分类
官方把小程序的API分为三大类
- 事件监听API
- 特点 以 on 开头,用来监听某些事件的触发
- 举例 wx.onWindowResize(function.callback)监听窗口尺寸变化的事件
- 同步API
- 特点1 以 Sync 结尾的都是同步 API
- 特点2 同步 API 的执行结果,可以通过函数返回值直接获取,执行出错则会抛出异常
- 举例 wx.setStorageSync('key', 'value')向本地存储中写入内容
- 异步API
- 特点 类似于 jQuery 中的 $.ajax(options) 函数,需要通过success、fail、complete接收调用的结果
- 举例 wx.request() 发起网络请求,通过 success 接收请求成功的结果