小程序宿主环境
宿主环境
- 宿主环境（host environment）指得是 程序运行所必须依赖的环境。
- 例如：Android 系统 和 iOS 系统 是两个不同的宿主环境。
- 安卓版的微信 APP 是不能在 iOS 环境下运行的，所以，Android 是安卓软件的宿主环境，脱离了宿主环境的软件是没有意义的。
小程序的宿主环境
- 手机微信是小程序的宿主环境
- 小程序 借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如
- 微信扫码、微信支付、微信登录、地理定位、etc 。。。
小程序宿主环境包含的内容
- 通信模型
- 运行机制
- 组件
- API
通信模型
- 通信的主体
- 小程序中通信的主体是 渲染层和逻辑层，其中
- WXML 模板 和 WXSS 样式是工作再渲染层的。
- js 脚本是工作再逻辑层的。
- 小程序中通信的主体是 渲染层和逻辑层，其中
- 小程序的通信模型
- 小程序中的通信模型分为两部分
- 渲染层 和 逻辑层之间的通信
- 由微信客户端进行转发
- 逻辑层和第三方服务器之间的通信
- 由微信客户端进行转发
- 渲染层 和 逻辑层之间的通信
- 小程序中的通信模型分为两部分
运行机制
- 小程序启动的过程
- 把小程序的代码包下载到本地
- 解析 app.json 全局配置文件
- 执行 app.js 小程序入口文件，调用 App() 创建小程序实例
- 渲染小程序首页
- 小程序启动完成
- 页面的渲染过程
- 加载解析页面的 .json 配置文件
- 加载页面的 .wxml 模板 和 .wxss 样式
- 执行页面的 .js 文件，调用 Page() 创建页面实例
- 页面渲染完成
组件
-
常用的视图容器类组件
-
view
- 普通视图区域
- 类似于 HTML 中的 DIV，是一个块级元素
- 常用来实现页面的布局效果
-
scroll-view
- 可滚动的视图区域
- 常用来实现滚动列表效果
-
swiper 和 swiper-item
- 轮播图容器组件 和 轮播图 item 组件
- 常用属性
-
-
常用的基础内容组件
-
text
- 文本组件
- 类似于 HTML 中的span标签，是一个行内元素。
-
基本使用
- 通过 text 组件的 selectable 属性，实现长按选中文本内容的效果。
- 注：在IOS中 selectable无效 替换为 user-select="{true}"
-
rich-text
- 富文本组件
- 支持把 HTML 字符串渲染为 WXML 结构
-
基本使用
- 通过 rich-text 组件的 nodes 属性节点，把 HTML 字符串渲染为对应的 UI 结构。
-
-
其他的常用组件
-
button
- 按钮组件
- 功能比 HTML 中的 button 按钮丰富。
- 通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用书授权、获取用户信息等）
-
image
-
图片组件
-
image 组件默认宽300px、高度约240px
-
mode属性
-
image 组件的 mode 属性用来指定图片的裁剪和缩放模式。
-
-
-
navigator
- 页面导航组件
- 类似于 HTML 中的 a 链接
-
小程序 API
- 小程序中的 API 是由宿主环境提供的，通过这些丰富的小程序 API，开发者可以方便的调用微信提供的能力。
- 例如获取用户信息，本地存储，支付功能等。
小程序 API 的3大分类
- 事件监听 API
- 特点：以 on 开头，用来监听某些事件的触发
- wx.onWindowResize(function callback) 监听窗口尺寸变化的事件
- 同步 API
- 特点1：以 Sync 结尾的 API 都是同步 API
- 特点2：同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
- wx.setStroageSync('key', value) 向本地存储中写入内容
- 异步 API
- 特点：类似于 jQuery 中的 $.ajax(option) 函数，需要通过 success，fail，complete 接受调用的结果
- wx.request() 发起网络数据请求，通过 success 回调函数接受数据
