小程序开发之小程序原理和结构（三）

一、小程序原理

小程序运行时会有两个线程：『View Thread』和『AppService Thread』，相互隔离，通过桥接协议WeixinJsBridage进行通信（包括 setData 调用、canvas指令和各种DOM事件）

下述表格展示了两个线程的区别：

线程名称	所属模块	运行代码	原理	备注
View	视图层（可能有多个）	WXML/WXSS	webview渲染	wxml编译器把wxml文件转为js(构建virtual dom); wxss编译器把wxss文件转化为js
AppService	逻辑层（一个）	JS	JavascriptCore运行	无法访问 window/document对象

两个线程直接如何进行数据传递？可参考微信官方说明：

通过两边提供的 evaluateJavascript 所实现。即用户传输的数据，需要将其转换为字符串形式传递，同时把转换后的数据内容拼接成一份 JS 脚本，再通过执行 JS 脚本的形式传递到两边独立环境

也就是说，两个『模块/线程』是通过系统层的JSBridage来通信的，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。可参考下图：

所以可以得出如下结论：

• 小程序js代码无法操作DOM对象，也无法直接操作wxml上的容器或组件（js代码和webview没有运行在同一个线程中）
• 如果需要在View Thread中运行自定义js代码，可以使用wxs（微信开发的脚本语言），它和View同一个线程。

js引擎

平台	渲染	js运行环境
iOS	WKWebView渲染（环境有 iOS8、iOS9、iOS10）	JavaScriptCore
Android	X5 基于 Mobile Chrome 37 内核来渲染	X5 JSCore来解析
开发工具	Chrome Webview 渲染	nwjs 中

二、小程序结构

每个小程序的结构都有两个主要部分构成：主体部分+各个页面。类似于许多框架，主体部分主要用于核心的配置，各个页面主要用于不同业务场景。

1、主体部分主要由3个文件构成
1）app.js：小程序逻辑，初始化APP
2）app.json：小程序配置，比如导航、窗口、页面http请求跳转等
3）app.wxss：公共样式配置 

主体配置完成之后，就是对应业务开发了，也就是开发者最常操作的页面。小程序页面设计基本上也是遵循MVC结构进行构建。

2、页面由4个文件构成

1）js：页面逻辑，相当于控制层（C）；也包括部分的数据（M）
2）wxml：页面结构展示，相当于视图层（V）
3）wxss：页面样式表，纯前端，用于辅助wxml展示
4）json：页面配置，配置一些页面展示的数据，充当部分的模型（M）

需要说明的是：

1、为了防止文件引用混乱，这四个文件的文件名必须都是一样的，即是默认绑定的，这是小程序强制规定的，所以一般来说一个页面我们会建立一个独立的文件夹用来存放这四个文件名一样的文件

2、pages目录下的页面代码逻辑和配置，会覆盖app部分相同的代码逻辑和配置

今天的课程到此为止，下回我们就正式开始小程序实战开发阶段了，下回再见！