微信软件架构设计 第1篇
通过上面的内容，你应该大致了解小程序诞生的情况和所处的环境了，下面我们就来聊聊小程序的整体设计构架情况。
整个小程序系统构架分成两个部分：视图层(WebView) 和 逻辑层(App Service)，这两个部分分别由两个独立线程管理。
视图层：也称为渲染层，渲染层用来渲染页面结构，主要由 WebView 进行渲染，一个小程序可以存在多个界面，所以渲染层可能存在多个 WebView 线程。
逻辑层：逻辑层采用 JSCore 线程运行 JS 脚本。逻辑层主要用来逻辑处理、数据请求、接口调用等。
视图层和逻辑层之间的沟通则需要借助 系统层(WeixinJsBridage) 进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务逻辑处理。
页面渲染大致过程为：我们把项目进行编译会把 WXML 转化成对应的 JS 对象（Virtual DOM），在逻辑层发生数据变化的时候，我们会通过 setData() 方法把数据从逻辑层传递到视图层，视图层在接收到数据后，会内部进行差异对比，把差异应用在原来的 Dom 树上，再正确的渲染出 UI 界面，完成页面的渲染过程。
通过上面的分析，你是否能理解开头放置的架构图了
上面的分析还提及到了一个 系统层(WeixinJsBridage)，一般简称为 JSBridge，它起到了一个中间桥梁的作用，非常重要。它不仅让视图层与逻辑层两个单独线程能进行通信，而且也架起上层开发与系统底层功能（Native）的桥梁，使得小程序可以通过调用 API 使用原生功能，且部分组件用原生组件实现，从而有良好体验。
逻辑层还有一个重要的操作，发送网络请求，它也是经由 系统层 转发的。
讲到这里，希望你对小程序的整体架构有一定认识了，下面我们开始就讲一下小程序内部的一些机制情况了。
微信软件架构设计 第2篇
微信软件架构设计 第3篇
四个Fragment代码类似，故只展示Fragment1的代码：
View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)： 这是 onCreateView 方法的开始。它是一个生命周期方法，用于创建和返回与Fragment相关联的用户界面视图。
(, container, false)：这是 onCreateView方法的主体。它通过 inflate（一个用于将XML布局文件转换为视图对象的工具）加载了一个名为tab1 的布局文件，并将其与 container关联。
()：用来隐藏视图
()：用来初始化Fragment
(Fragment fragment)：用来显示视图
运行结果如下：
微信软件架构设计 第4篇
_width=_wrap_content_：视图的宽度将会根据其内容自动进行调整，以适应文本内容的宽度。
_height=_wrap_content_：视图的高度将会根据其内容自动进行调整，以适应文本内容的宽度。
_weight=_1_：表示这个视图在与其他视图共享空间时具有相等的权重。
_@color/black_：表示将视图的背景颜色设置为黑色。
_center_：这会将视图或内容在水平和垂直方向上都居中对齐，使其位于可用空间的中心。
_微信_：将文本内容设置为微信
_@color/white_：将文本内容设置为白色。
_30sp_：将文本内容的大小设置为30sp。
界面显示如下：
_width=_match_content_：这会使视图的宽度填满其父容器的宽度。如果视图嵌套在一个父容器中，它将充满该父容器的宽度，无论父容器的宽度是多少。
_height=_match_content_：这会使视图的宽度填满其父容器的宽度。如果视图嵌套在一个父容器中，它将充满该父容器的宽度，无论父容器的宽度是多少。
_center_：这会将视图或内容在水平和垂直方向上都居中对齐，使其位于可用空间的中心
“这是聊天界面_：将文本内容设置为这是聊天界面
_30sp_：将文本内容的大小设置为30sp。
由于tab1与其他三个相似，在此只展示tab1的代码和界面：
_vertical_：线性布局会将其子视图垂直排列，从上到下的方式排列子视图
2..android:layout_weight=_1_：表示这个视图在与其他视图共享空间时具有相等的权重。
3.ImageView: 这是ImageView元素的开始标签，表示一个图像视图
_@android:drawable/sym_action_call_:用于设置图像视图的图像资源
bottom的界面显示如下：
的界面显示如下：