1.什么是宿主环境
宿主环境指的是程序运行所必须的依赖环境。例如:Android系统和IOS系统是两个不同的宿主环境。安卓版的微信App是不能在IOS环境下运行的,所以Android是暗转软件的宿主环境,脱离宿主环境的软件是没有任何意义的!
2.小程序的宿主环境
小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能,例如:微信扫码、微信支付、微信登录、地理定位、etc....
3.小程序宿主环境包含的内容
①通信模型
②运行机制
③组件
④API
宿主环境-通信模型
4.通信的主体
小程序中通信的主体是渲染层和逻辑层,其中
①WXML模板和WXSS样式工作在渲染层
②JS脚本工作在逻辑层
5.小程序的通信模型
①渲染层和逻辑层之间的通信
- 有微信客户端进行转发
②逻辑层和第三方服务器之间的通信
- 有微信客户端进行转发
宿主环境-运行机制
6.小程序启动的过程
①把小程序的代码包下载到本地
②解析app.json全局配置文件
③执行app.js小程序入口文件,调用App()创建小程序实例
④渲染小程序首页
⑤小程序启动完成
7.页面渲染的过程
①加载解析页面的.json配置文件
②加载页面的.wxml模板和.wxss样式
③执行页面的.js文件,调用Page()创建页面实例
④页面渲染完成
宿主环境-组件
8.小程序中组件的分类
小程序中给的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了9大类,分别是:
①视图容器
②基础内容
③表单组件
④导航组件
⑤媒体组件
⑥map地图组件
⑦canvas画布组件
⑧开放能力
⑨无障碍访问
9.常用的试图容器类组件
①view
- 普通视图区域
- 类似于HTML中的div,是一个块级元素
- 常用来实现页面的布局效果
②scroll-view
- 可滚动的视图区域
- 常用来实现滚动列表效果
③swiper和swiper-item
- 轮播图容器组件和轮播图item组件
- swiper组件的常用属性
10.基本组件的使用
①text组件的基本使用--通过text组件的selectable属性,实现长按选择文本中的内容
②rich-text组件的基本使用--通过rich-text组件的nodes属性节点,把HTML字符串渲染为对应的UI结构
11.其它常用组件
①button
- 按钮组件
- 功能比HTML中的button按钮丰富
- 通过open-type属性可以调用微信提供的各个功能(客服、转发、获取用户授权、获取用户信息等)
②image
- 图片组件
- image组件默认宽度约300px、高度约240px
③navigator
- 页面导航组件
- 类似于HTML中的a链接
宿主环境-API
12.小程序API概述
小程序中的API是由宿主环境提供的,通过这些丰富的小程序API,开发者可以方便的调用微信提供的能力,例如:获取用户信息、本地储存、支付功能等。
13.小程序API的3大分类
①事件监听API
- 特点:以on开头,用来监听某些事件的触发
- 举例:wx.onWindowResize(function callback)监听窗口尺寸变化的事件
②同步API
- 特点1:以Sync结尾的API都是同步API
- 特点2:同步API的执行结果,可以通过函数返回值直接获取,如果执行错误会抛出异常
- 举例:wx.setStorageSync('key','value')向本地存储中写入内容
③异步API
- 特点:类似于jQuery中的$.ajax(options)函数,需要通过success、fall、complete接收调用的结果
- 举例:wx.request()发起网络数据请求,通过success回调函数接收数据