同样的app.js用于存放全局的数据和方法，而 pages.js 则存放每个页面自己的数据和方法，对于组件中的脚本文件而言，它保存的则是组件自己的数据和方法
小程序的执行流程(请右击查看大图)
当微信客户端打开一个小程序的时候，会将整个小程序的代码包下载到本地，然后通过读取 app.json文件获取页面的路径，并将第一条路径作为首页，并根据 app.json 中的配置来初始化小程序窗口的样式。
紧接着，微信客户端再将 app.js 装载进来，执行其中的 App() 方法，实例化一个小程序对象（整个微信小程序也只有一个这样的实例对象，并且全部页面共享该对象，你可以在每个页面使用 getApp()方法来获取）。
当小程序实例对象创建完成后，会触发生命周期中的 onLaunch() 函数，然后继续装载小程序中的每个页面（默认便是首页），在装载页面的时候，同样的会先装载 pages.json的代码，用来初始化页面与窗口的样式，然后再装载 WXML文件以及其使用到的资源（wxs，模版、组件）来生成页面结构，一切就绪再加载 wxss获取页面样式，最后再去装载 .js的脚本文件。
当最后的 .js文件也被装载进来后， 就会调用脚本中的Page()构造函数，还回一个页面的实例对象，页面实例对象创建好后，就会根据其中的 data 数据与 WXML文件中的内容 一起渲染出最终的页面，最后页面渲染完成后，并且在这一过程中，页面实例会根据不同时期的状态触发不同的页面生命周期函数。
明白小程序的基本执行流程，对后面了解小程序执行的生命周期非常有帮助。
小程序知识体系导图(请右击查看大图)
小程序开发还是很简单的，像一些 API接口以及组件的使用，在开发手册上都有详细列举，所以这里我就将我个人认为小程序中比较常用或者是比较重要（跟传统web开发有点区别）的地方单独记录下来。
WXSSWXSS 是基于 CSS 改进而来的，所以大部分的 CSS写法也可以套用在 WXSS 上，这里主要对这两者重点的区别加以说明。
rpx
新增的相对单位，rpx 默认将屏幕划分为750个单位。
注意的是：px 在小程序中依然也可以用。
选择器
WXSS 支持的选择器相比 CSS要少一些，但是主流的：类、ID、元素，分组、伪类（after，before）、伪元素（:hover 这里表示元素选中）等选择器都支持。
模块化样式
支持 @import "path" 导入样式。
内嵌样式
小程序中组件支持通过 style 属性来内嵌内联样式，并且还可以通过表达式来接收绑定的数据。
背景图
wxss 不支持本地图片（相对路径图片）作为背景图，对于需要内嵌在 wxss文件中的图片，请使用 base64 或者是网上的图片。
不过，image 组件支持本地图片
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html (更多关于WXSS)
模版语法WXML文件也称之为“WXML模版”文件，它与 HTML文件结构相同，都是有许多结构标记组成，只是在小程序中，这些标记被称之为“组件”。
WXML文件与 HTML文件的不同在于WXML模版支持特定的模版语法，可以直接再模版中进行运算处理。
表达式
WXML支持通过 {{variant}} 表达式来获取对应页面脚本中 data 定义的数据。
{{}} 表达式不仅可以读取变量的值，还支持一些常规的运算操作，比如“算数运算”、“三元运算”、“比较运算”、“字符串运算”等，另外还可以在表达式中定义数组、对象等类型的值。
{{a + b}} + {{c}} {{flag ? true : false}} {{length > 5}} {{"hellow" + name}} {{[zero, 1, 2, 3, 4]}} {{for: a, bar: b}} | {{...obj1, ...obj2, e: 5}} | {{name,age}}条件判断
微信小程序支持在WXML模版文件中进行条件判断。
循环遍历
WXML模板同样还支持循环遍历。
<view wx:for="{{arrs}}"> {{item}} - {{index}} </view>其中 arrs 是页面脚本 data 中定义的一个数组，而 item 与 index 都是循环体中固定的写法，分别表示了每次循环“项”和每次循环的“索引”。