初识微信小程序

微信小程序是什么

• 简介：小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
• 发展史： JS API => JS-SDK => 微信小程序
• 小程序与普通网页开发的区别
  • 网页开发渲染线程和脚本线程是互斥的，而在小程序中，二者是分开的，分别运行在不同的线程中。
  • 网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。
  • 运行环境也有较大的区别

小程序的代码构成

.json 后缀的 JSON 配置文件

• 小程序配置 app.json
  • pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
  • window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
• 开发工具配置 project.config.json
• 页面配置 page.json

.wxml 后缀的 WXML 模板文件

和 HTML 非常相似，WXML 由标签、属性等等构成。但是也有很多不一样的地方

• 小程序的 WXML 用的标签是 view, button, text 等等
• 使用{{}}进行数据绑定

.wxss 后缀的 WXSS 样式文件

• 新增尺寸单位 rpx
• 提供了全局的样式app.wxss和局部样式page.wxss。
• WXSS 仅支持部分 CSS 选择器

.js 后缀的 JS 脚本逻辑文件

• 用于和用户交互
• 可以在JS中调用小程序提供的API

小程序的宿主环境

小程序的宿主环境即为微信客户端给小程序所提供的环境。

渲染层和逻辑层

• 小程序的渲染层和逻辑层分别由2个线程管理：
  • 渲染层的界面使用了WebView 进行渲染；
  • 逻辑层采用JsCore线程运行JS脚本。
• 一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端做中转，逻辑层发送网络请求也经由微信客户端转发

程序和页面

程序的加载

• 微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。
• 紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径。
• 写在 pages 字段的第一个页面就是这个小程序的首页。
• 微信客户端把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页
• 整个小程序只有一个 App 实例，是全部页面共享的

页面的构建

微信客户端会先根据 json 文件中的配置生成一个界面，顶部的颜色和文字你都可以在这个 json 文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 js 文件

Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。

组件和API

• 小程序提供了丰富的基础组件给开发者自由组合
• 小程序提供了很多 API 让开发者方便的调用微信提供的能力
• 多数 API 的回调都是异步