代码构成：
- .json 后缀的 JSON 配置文件
- .wxml 后缀的 WXML 模板文件
- .wxss 后缀的 WXSS 样式文件
- .js 后缀的 JS 脚本逻辑文件
配置文件：
.json后缀的JSON 配置文件
小程序配置 app.json
小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
工具配置 project.config.json
个性化配置，例如界面颜色、编译配置等等
页面配置 page.json
每个页面的一些属性,例如顶部颜色、是否允许下拉刷新等等
WXML 模板:
充当类似 HTML 的角色
- 封装一些HTML标签构成小程序的组件，比如弹框，选择框
- 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
WXSS 样式：
充当类似 CSS 的角色
- 具有 CSS 大部分的特性
- 新增了尺寸单位 rpx，解决适配
- 提供了全局的样式app.wxss和局部样式page.wxss
JS 交互逻辑：
和用户做交互
- 响应用户的点击、获取用户的位置等等
- 调用小程序提供的丰富的 API，例如：例如获取用户信息、本地存储、微信支付等
生命周期:
分为应用生命周期和页面生命周期
App生命周期：
小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行，可以在这里做一些初始化的工作
整个小程序只有一个 App 实例，是全部页面共享的，可以通过getApp() 函数获取
可以再app.js中定义全局数据，程序运行中可以存储调用
详细请看app生命周期
Page生命周期
新建一个Page就会自动创建 .json .wxml .wxss .js四个文件
在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。
在.js文件的data:{}中设置页面的初始化数据。数据更改通过setData()更改。
详细请看
API
框架提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。
多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题。success, fail, complete来接收接口调用结果
详情请看
组件
框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。
注意： boolean 属性不管该属性等于什么，其值都为true，只有组件上没有写该属性时，属性值才为false
详情请看
模块化
将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口
注意：
- 推荐采用 module.exports 来暴露模块接口
- 不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中
- 在需要使用这些模块的文件中，使用 require(path) 将公共代码引入，暂时不支持绝对路径
路由
在小程序中所有页面的路由全部由框架进行管理。
可以跳过API来跳转页面，也可以通过组件navigator来完成
路由触发的生命周期函数请看
自定义组件
开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。
创建自定义组件类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。
在 json 文件中进行自定义组件声明
{
"component": true
}
组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。
<view>这里是组件的内部节点</view>
<slot></slot>
</view>
需要使用多slot时，可以在组件js中声明启用
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
}
})
此时，可以在这个组件的wxml中使用多个slot，以不同的 name 来区分。
<!-- 组件模板 -->
<view class="wrapper">
<slot name="before"></slot>
<view>这里是组件的内部细节</view>
<slot name="after"></slot>
</view>
使用自定义组件，首先要在页面的 json 文件中进行引用声明。
{
"usingComponents": {
"component-tag-name": "path/to/the/custom/component"
}
}
这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。
<view>
<!-- 以下是对一个自定义组件的引用 -->
<component-tag-name inner-text="Some text"></component-tag-name>
</view>
自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件
<!-- 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- 或者可以写成 -->
<component-tag-name bind:myevent="onMyEvent" />
Page({
onMyEvent: function(e){
e.detail // 自定义组件触发事件时提供的detail对象
}
})
自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：
<!-- 在自定义组件中 -->
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
Component({
properties: {}
methods: {
onTap: function(){
var myEventDetail = {} // detail对象，提供给事件监听函数
var myEventOption = {} // 触发事件的选项
this.triggerEvent('myevent', myEventDetail, myEventOption)
}
}
})
模板
简单的重复代码片段，可以用模板来实现，可以实现传值不同，显示不同内容，在不同地方引用
使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段，如：
<!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
使用模板
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：
<template is="msgItem" data="{{...item}}"/>
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
