【微信小程序】介绍文档

区别

1. 小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性
2. 网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应
   1. 小程序中，二者是分开的，分别运行在不同的线程中
3. 网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作
   1. 小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API
4. 网页开发者需要面对的环境是各式各样的浏览器
   1. 小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的

小程序构成

.json

1. 静态配置
2. app.json
   1. 参考文档
   2. 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
   3. pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录
   4. window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等

3. project.config.json
   1. 用于同步工具的配置
   2. 参考文档
4. page.json
   1. 这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置
   2. 参考文档

.wxml

1. 网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互
2. 同样，小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色
3. 参考文档

.wxss

1. WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改
   1. 新增了尺寸单位
   2. 提供了全局的样式和局部样式
   3. 此外 WXSS 仅支持部分 CSS 选择器

.js

1. 一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等
   1. 小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作
   2. 事件参考文档
2. 还可以在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等
   1. 小程序API参考文档

小程序宿主环境

1. 微信客户端给小程序所提供的环境为宿主环境
2. 框架参考文档

渲染层和逻辑层

1. 小程序的运行环境分成渲染层和逻辑层
   1. 其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层
2. 渲染层的界面使用了WebView 进行渲染
   1. 一个小程序存在多个界面，所以渲染层存在多个WebView线程
3. 逻辑层采用JsCore线程运行JS脚本
4. 这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转
   1. 逻辑层发送网络请求也经由Native转发

程序和页面

1. 微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地
2. 紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径
   1. 写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）

3. 小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行
   1. 整个小程序只有一个 App 实例，是全部页面共享的
   2. 开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数
   3. 注册程序APP参考文档

一个页面

1. 比如 pages/logs/logs 下其实是包括了4种文件的
   1. 微信客户端会先根据 logs.json 配置生成一个界面，顶部的颜色和文字你都可以在这个 json 文件里边定义好
   2. 紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式
   3. 最后客户端会装载 logs.js

2. Page 是一个页面构造器，这个构造器就生成了一个页面
   1. 在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构
   2. 注册页面文档

组件

1. 小程序提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼合成自己的小程序
2. 使用组件的时候，还可以通过属性传递值给组件，让组件可以以不同的状态去展现
   1. 当然你也可以通过 style 或者 class 来控制组件的外层样式，以便适应你的界面宽度高度等等

3. 组件的内部行为也会通过事件的形式让开发者可以感知
   1. 例如用户点击了地图上的某个标记，你可以在 js 编写 markertap 函数来处理

4. 小程序组件文档

API

1. 为了让开发者可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多 API 给开发者去使用
2. API文档