一.对于最简单的小程序而言，当运行项目时，框架首先会解析配置文件app.json，然后根据pages设置找到默认首页mypages/index/index（Pages第一个路径默认为首页），然后加载mypages/index目录中的index.wxml, index.wxss, index.js, index.json这四个文件进行页面渲染。
二.关于小程序的数据绑定和事件响应系统
页面渲染时，框架将逻辑层（js）的data的count属性和视图层（wxml）的count进行了绑定，所以一打开页面就显示点击次数为0；当点击view时，会出发tap事件，将绑定的countClick事件发送给逻辑层，逻辑层调用setData修改count值，并触发视图层渲染，这就是视图层和逻辑层之间相互通信的机制。
三.在一个完整的小程序中，文件主要由框架程序主体文件和页面文件组成；主体文件由app.json,app.js,app.wxss构成，小程序启动时只会执行一次，必须放在根目录，负责小程序的整体配置。
3.1 配置文件(app.json)
app.json是小程序的配置文件，严格遵循json的格式规范。文件内容整体结构如下：
{
//页面路径设置，负责注册小程序由哪些页面组成，不需填写后缀名
"pages":[],
//负责小程序状态栏，导航栏，标题，窗口背景色
"window":{
"navigationBarBackgroundColor": "3366FF",
"navigationBarTitleText":"wjk",
"backgroundColor":"#ffffff",
"backgroundTextStyle":"light"
},
"tabBar":{
"color": "#000000",
"selectedColor": "#1296db",
"backgroundColor": "#ffffff",
"list":[
{
"text": "首页",
"iconPath": "images/home.png",
"selectedIconPath": "images/home1.png",
"pagePath": "mypages/index/index",
"position": "bottom"
},
{
"text": "关于",
"iconPath": "images/about.png",
"selectedIconPath": "images/about1.png",
"pagePath": "mypages/list/about",
"position": "bottom"
}
],
"borderStyle":"bottom"
},
//设置各种网络请求API的超时时间，统一设置
"networkTimeout":{
"request":60000,
"connectSocket":60000
},
"debug":true
}3.2 小程序逻辑（app.js）
小程序中逻辑文件包括页面逻辑文件和小程序逻辑文件，app.js是小程序逻辑文件，我们可以通过APP()函数注册小程序生命周期函数，全局方法和全局属性，已注册的小程序实例还可以在其它逻辑层代码中通过getApp()获取。
注册小程序示例代码如下：
App({
//小程序初始化完成时执行
onLaunch:function(){
},
//小程序启动or后台到前台时触发
onShow:function(){
},
//前台进入后台时触发
onHide:function(){
},
globalFunction:'我是全局函数',
globalData:'我是全局属性'
}
);
其他逻辑层可以通过以下代码获取小程序实例
var app=getApp();
console.log(app.globalData);
“`
具体实例如下：
3.3 框架页面文件
包括.js(必要)，.wxml(必要)，.wxss(样式文件)，.json(配置文件)四个文件，
（1）其中json文件只能配置window相关属性，编写时只需直接写出属性；
（2）页面逻辑文件主要功能：设置初始化数据，注册当前页面生命周期函数，注册事件处理函数。所有的逻辑文件包括app.js最终打包成一个js文件，在小程序启动时运行，直到小程序销毁，所以，逻辑层也叫App Service。逻辑文件运行在纯JavaScript引擎中，我们不能通过操作DOM来改变页面，这时我们需要将面向DOM操作的编程思想转化为数据绑定和事件响应。
注册页面：通过Page()函数注册页面;
（1）data:页面初始数据，数据格式必须是可转成JSON格式的对象类型，页面第一次渲染时，data会以json格式由逻辑层传至渲染层，渲染层通过wxml对数据进行绑定。
（2）onLoad:生命周期函数，页面加载时触发，一个页面只会调用一次，接受页面参数；
（3）onShow：生命周期函数，页面显示时触发，每次打开页面调用一次。
（4）onReady:监听页面初次渲染完成。
（5）onHide:监听页面隐藏。
（6）onPullDownRefresh：监听用户下拉动作，下拉时触发。
（7） onUnload：页面卸载时触发。
（8）onReachBottom： 页面上拉触底事件的处理函数。
（9）开发者可以添加任意函数或数据到Object参数中，可以用this访问这些函数和数据。
页面结构文件：
WXML是框架设计的一套标记语言，用于渲染界面，在不同平台被解析为不同端的渲染文件。
(1)数据绑定使用双大括号将变量包起来，在{{}}中可以做一些简单的运算如下：
(2)条件渲染：除了简单的数据绑定，我们常常会使用逻辑分支，有wx:if，wx:elif，wx:else。后两个必须和wx:if配合使用，否则会导致页面解析出错，在编写时大家一定要注意下。
如果需要包装多个组件来控制分支，可以使用<block wx:if="{{true}}"></block>
(3)列表渲染：
1.wx:for 用于遍历数组，重复渲染该组件，遍历过程中当前项的下标变量名默认为index，数组当前项变量名默认为item，如
页面显示如下：
2.wx:for-index和wx:for-item属性可以修改index和item变量名；
(4)事件:WXML的事件系统和HTML中DOM事件系统极其相似，通过在组件上设置“bind(或catch)+事件名”属性进行事件绑定。
1.事件分类：冒泡事件(tap,touchstart,longrap)和非冒泡事件；
2.事件绑定：以key=“value”形式组织，其中key是bing或catch+事件类型，value是事件函数名，对应Page中的同名函数，找不到同名函数会报错。绑定时bind事件绑定不会阻止冒泡事件向上冒泡，catch事件会阻止冒泡事件向上冒泡。
页面样式文件(WXSS)
WXSS是基于CSS拓展的样式语言，用于描述WXML的组件样式，决定WXML的组件该怎么显示，它具有CSS的大部分特性。
(1)尺寸单位：rpx和rem这两种都是相对单位，最终换算成px。使用rpx和rem布局页面能让页面界面在不同尺寸屏幕中按比例缩放。WXSS规定屏幕宽度为750rpx，20rem。设计师可以选用iphone6作为视觉标准（虽然我喜欢iphone5作为视觉标准，整体比例比较好看），多测试以尽量避免界面毛刺的情况。
(2)选择器：WXSS实现了CSS的部分选择器。
(3)内联样式：样式除了写在WXSS中，也可以写在style，class属性中，不过一般不这样，以免影响渲染速度。
(4)样式导入：通常在项目中为了便于管理会将WXSS按职责拆分为多个文件，这时需要在WXSS文件中导入其它WXSS文件，@import后写入需要导入WXSS文件的相对路径，用“；”表示语句结束。例如：@import “common.wxss”；