一、小程序与网页开发的区别
小程序的主要开发语言是 JavaScript 。
网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。
网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。
小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。
小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的，如表1-1所示。
运行环境 | 逻辑层 | 渲染层 |
iOS | JavaScriptCore | WKWebView |
安卓 | V8 | chromium定制内核 |
小程序开发者工具 | NWJS | Chrome WebView |
二、小程序项目的代码结构
1. 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
文件 | 必需 | 作用 |
app.js | 是 | 小程序逻辑 |
app.json | 是 | 小程序公共配置 |
app.wxss | 否 | 小程序公共样式表 |
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
app.json中：
- pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
- window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
2. 一个小程序页面由四个文件组成，分别是：
文件类型 | 必需 | 作用 |
js | 是 | 页面逻辑 |
wxml | 是 | 页面结构 |
json | 否 | 页面配置 |
wxss | 否 | 页面样式表 |
在小程序中 WXML 充当的就是类似 HTML 的角色，和 HTML 非常相似，WXML 由标签、属性等等构成。
但是也有很多不一样的地方：
(1)HTML中经常会用到的标签是 div, p, span，而在小程序中封装了view, button, text 等等标签。
(2)网页的一般开发流程中，通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。
当项目越来越大的时候，代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然不是一个很好的开发模式，因此就有了 MVVM 的开发模式(例如 React, Vue)，提倡把渲染和逻辑分离。也就是不要再让 JS 直接操控 DOM，JS 只需要管理状态，再通过一种模板语法来描述状态和界面结构的关系，称之为数据双向绑定。
小程序的框架也是用到了这个思路，例如把一个 Hello World 的字符串显示在界面上
WXML 是这么写
{{msg}}br
brJS 只需要管理状态即可:
br通过 {{ }} 的语法把一个变量绑定到界面上。WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改
(1)手机设备的屏幕会有不同的宽度和设备像素比，WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
(2)和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
三、小程序的运行环境
小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。
小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信由微信客户端(采用Native代指微信客户端)做中转，逻辑层发送网络请求也经由Native转发。
微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。
紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:
{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" }}写在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。
微信客户端就把首页的代码装载进来，渲染出这个首页。
整个小程序只有一个 App 实例，是全部页面共享的。
