1.小程序起步
（1）点击https://mp.weixin.qq.com/wxopen/waregister?action=step1根据指引填写信息和提交相应的资料，就可以拥有自己的小程序账号。
（2）登陆https://mp.weixin.qq.com，可以在菜单设置-开发设置看到小程序的AppID.小程序AppID相当于小程序平台的一个身份证。
（3）安装开发者工具。https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=18101520。
2.代码构成
（1）我们可以通过开发者工具快速创建一个项目。留意里面生成的不同文件类型.
1. .json后缀的JSON配置文件
2. .wxml后缀的WXML模板文件
3. .wxss后缀的WXSS样式文件
4. .js后缀的JS脚本逻辑文件
（2）JSON配置。
在项目的根目录有一个app.json和project.config.json,此外在page/logs目录下还有一个logs.json.依次说明它们的用途。
1.app.json是小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。
上图两个配置的含义：
（1）pages字段：用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
（2）window字段：定义小程序所有页面的顶部背景颜色，文字颜色等。
2.工具配置project.config.json
通常大家在使用一个工具的时候，都会针对各自的喜好做一些个性化配置。例如界面颜色、编译配置等等。
3.page.json
每个小程序页面都可以有一个page.json，用于配置一些当前页面的信息和功能。
（3）WXMl模板。
WXML就类似于HTML的角色。和HTML非常相似，但有很多地方也不一样。
1.标签名字不一样
2.多了wx:if这样的属性以及{{}}这样的表达式。
（4）WXSS样式
具有css大部分的特性，小程序在WXSS也做了一些扩充和修改。
1.新增尺寸单位。rpx
2.提供了全局样式和局部样式。你可以写一个app.wxss作为全局样式，会作用与当前小程序的所有页面，局部样式 page.wxss仅对当前页面生效
3.WXSS仅支持部分CSS选择器。
（5）JS交互逻辑
3.小程序的启动
{
'pages':[
"pages/index/index",
"pages/logs/logs"
[
这个配置文件说名小程序项目定义了两个页面，分别位于pages/index/index和pages/logs/logs。而写在pages字段的第一个页面就是小程序的首页。（小程序打开的第一个页面）。小程序在启动之后，在app.js定义的App实例的onLaunch回调会被执行：
App() 函数用来注册一个小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。
App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。
App(
onLaunch:function(){//小程序启动之后触发}
）
整个小程序只有一个App实例，是全页面共享的，更多的事件回调参考文档注册程序 · 小程序。
前台、后台定义：当前用户点击左上角关闭，或则按了设备Home键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。需要注意的是：只有当小程序进入后台一定时间，或则系统资源占用过高，才会被真正销毁。
关闭小程序：当用户从扫一扫、转发等入口（场景值为1007，1008，1011，1025）进入小程序，且没有置顶小程序的情况下退出，小程序会被销毁。
options:
开发者可以在onPageNotFound回调中进行重定向处理，但是必须在回调中同步处理，异步处理无效。
注意：
1.如果开发者没有添加onPageNotFound监听，当跳转页面不存在时，将推入微信客户端原生的页面不存在提示页面。
2.如果onPageNotFound回调中又重定向到另一个不存在的页面，将推入微信你客户端原生的页面不存在提示页面，并且不在回调onPageNotFound.
getApp(object)函数可以用来获取到小程序App实例。注意：
1.不要在定义与App()内的函数中调用getApp(),使用this就可以拿到app实例。
2.通过getApp()获取实例之后，不要私自调用生命周期函数。
独立分包
独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面是，主包才会被下载。
开发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通分包页面启动时，需要先下载主包；而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度。一个小程序可以有多个独立分包。小游戏不支持独立分包。
开发者通过app.json的subPackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包。
限制：
独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中插件、自定义组件的处理方式同普通分包。此外，使用独立分包时要注意：
*独立分包中不能依赖主包和其它分包中的内容。包括js文件、template、wxss、自定义组件、插件等。主包中app.wxss对独立分包无效，应避免在独立分包页面中使用app.wxss中的样式；
*App只能在主包内定义，独立分包中不能定义App，会造成无法预期的行为。
*独立分包中暂时不支持插件。
注意事项：
（1）关于getApp();
与普通分包不同，独立分包运行时，App并不一定被注册，因此getApp()也不一定可以获得App对象。
*当用户从独立分包页面启动小程序时，主包不存在，App也不存在，此时调用getApp()获取到的是undefind；当用户进入普通分包或主包内页面时，主包才会被下载，App才会被注册。
*当用户是从普通分包或主包内页面跳转到独立分包页面时，主包已经存在，此时调用getApp()可以获取到真正的App。
由于这一限制，开发者无法通过App对象实现独立分包和小程序其它部分的全局变量共享。
为了在独立分包中满足这一需求，getApp支持allowDefault参数，在App未定义时返回一个默认实现 。当主包加载，App被注册时，默认实现中定义的属性会被覆盖合并到真正的App中。
（2）关于App生命周期
当从独立分包启动小程序时，主包中App的onLaunch和首次onShow会在从独立分包页面首次进入主包或其它普通分包页面时调用。
小程序运行机制
小程序启动会有两种情况，一种是冷启动，一种是热启动。假如用户已经打开过某小程序，此时无需重新启动，只需要将后台的小程序切换到前台，这个过程就是热启动；冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动。
更新机制：
小程序冷启动时如果发现有新的版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要下一次冷启动才会应用上。如果需要马上应用最新的版本，可以使用wx.getUpdateManagerAPI进行处理。
运行机制：
.小程序没有重启概念。
.当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）会被微信主动销毁。
.当短时间内（5s）连续收到两次以上收到系统内存警告，会进行小程序的销毁。
wx.getUpdateManager()返回值是UpdateManager，获取全局唯一的版本更新管理器，用于管理小程序的更新。
UpdateManager：更新管理器对象。用来管理更新，可以通过wx.getUpdateManager接口获取实例。
方法：
1.UpdateManager.applyUpdate()
当小程序新版本下载完成后（即onUpdateReady回调），强制小程序重启并使用新版本。
2.UpdateManager.onCheckForUpdate(function callback)
监听像微信后台请求检查跟新结果的事件。微信你小程序冷启动时自动检查更新，不需要由开发者主动触发。
3. UpdateManager.onUpdateReady(function callback)
舰艇小程序有版本更新事件。客户端主动触发下载（无需开发则者触发），下载成功后回调。
4.UpdateManager.onUpdateFailed(function callback)
监听小程序更新失败事件。小程序有新版本，客户端主动出发下载，下载失败后回调函数。
注册页面
Page(Object)
Page(Object)函数用来注册一个页面。接受一个Object类型的参数，其指定页面的初始数据、生命周期回调、事件处理函数等。
data
data是页面第一次渲染使用的初始数据。
页面加载时，data将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。渲染层可以通过WXML对数据进行绑定。
示例代码：
生命周期回调函数
onload（Object query）
页面加载时触发。一个页面只会调用依次，可以在onLoad的参数中获取打开当前页面路径的参数。
onShow()：页面显示/切入前台时触发。
onReady()：页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
onHide()：页面隐藏/切入后台时触发。如navigateTo或底部tab切换到其他页面，小程序切入后台等。
onUnload():页面卸载时触发。如redirectTo或navigateBack到其他页面时。
生命周期的触发以及页面的路由方式：
在小程序中所有的页面的路由全部由框架进行管理。框架以栈的形式维护了当前的所有页面。当发生路由切换的时候，页面栈的表现如下：
初始化：新页面入栈。
打开新页面：新页面入栈。
页面重定向：当前页面出栈，新页面入栈。
页面返回：页面不断出栈，直到目标返回页。
Tab切换：页面全部出栈，只留下新的tab页面。
重加载：页面全部出栈，只留下新的页面。
getCurrentPagess()函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
注意：
*不要尝试修改页面栈，会导致路由以及页面状态错误。
*不要在App.onLaunch的时候调用getCurrentPages(),此时page还没有生成。
路由方式：
初始化：小程序打开的第一个页面，路由当前页面（），路由后页面（onload,onShow）.
打开新页面：调用wx.navigateTo或使用组件<navigator open-type="navigateTo"/> 路由当前页面（onHide）路由后页面（onLoad,onShow）
页面重定向：调用API wx.redirectTo或使用组件<navigator open-type="redirectTo"/>路由前页面（onUnload）,路由后页面（onLoad,onShow）
页面返回：调用API wx.navigateBack或使用组件<navigator open-type="navigateBack"/>路由前页面（onUnload）路由后页面（onShow）
tab切换：调用API wx.switchTab或使用组件<navigator open-type="switchTab">路由前页面（路由后页面分情况：
重启动：调用API wx.reLaunch或使用组件<navigator open-type="reLaunch"/>路由前页面（onUnload）路由后页面（onLoad，onShow）
tab切换对应的生命周期（以A、B页面为Tabbar，C是从A页面打开的页面，D页面是从C页面打开的页面）：
*navigateTo，redirectTo只能打开非TabBar页面。
*switchTab只能打开tabbar页面。
*relaunch可以打开任意页面。
*页面底部的tabBar由页面决定，即只要定义为tabBar的页面，底部都有tabbar.
*调用页面路由带的参数可以在目标页面的onload中获取。
（1）wx.navigateTo(object object)保留当前页面，跳转到应用内的某个页面，但是不能跳到tabbar页面。
（2）wx.navigateBack(object object)关闭当前页面，返回上一页面或多级页面。可以通过getCurrentPages()获取当前页面栈，决定需要返回基层。
（3）wx.switchTab(object object)跳转到tabBar页面，并关闭其他所有非tabBar页面。
（4）wx.reLaunch(Object object)关闭所有页面，打开到应用内的某个页面.
页面事件处理函数：
onPullDownRefresh():
监听用户下拉刷新事件。
*需要在app.json的window选项中或页面配置中开启enablePullDownRefresh.
*可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
*当处理完数据刷新后，wx.stopPullDwonRefresh可以停止当前页面的下拉刷新。
onReachBottom()
监听用户上拉触底事件。
*可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
*在出发距离内滑动期间，本事件只会触发一次。
onPageScroll(Object):
监听用户滑动页面事件。
Object参数说明：scrollTop 类型：Number，页面在垂直方向已滚动的距离（单位px）。
onShareAppMessage(Object)
监听用户点击页面内转发按钮或<button>组件open-type="share"或右上角菜单转发按钮的行为，并且自定义转发内容。
注意：只有定义了此事件处理函数，右上角菜单才会显示转发按钮。
参数 类型 说明
from String button:页面内转发按钮；，menu右上角转发菜单。
target Object 如果from值是button，则target是触发这次转发事件的button，否则为undefined。
webViewUrl String 页面中包含<web-view>组件时，返回当前<web-view>的url
此事件需要一个return一个Object，用于自定义转发内容，返回内容如下：
字段 说明 默认值
title 转发标题 当前小程序名称
path 转发路径 当前页面path，必须是以/开头的完整路径
imageUrl 自定义图片路径 使用默认截图
组件事件处理函数
page中还可以定义组件事件处理函数。在渲染层的组件中加入事件绑定，当事件被触发时，就会执行Page中定义的事件处理函数。
Page.route
到当前页面的路径，类型为string
Page.prototype.setData(Object data,Function callback):setData函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的this.data的值。
字段 类型 必填 描述
data Obejct 是 这次要改变的数据
callBack Function 否 setData引起的界面更新渲染完毕后的回调函数
objec以key：value的形式表示，将this.data中key对应的值改变为value。
其中key可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如arry[2].message,a,b,c,d,并且不需要在this.data中预先定义。
注意：
1.直接修改this.data而不调用this.setData是无法改变页面的状态的，还会造成数据不一致。
2.仅支持设置可JSON化的数据。
3.单次设置的数据不能超过1024kb，请尽量避免一次设置过多的数据。
4.请不要把data中任何一项的value设为undefined，否则这一项将不被设置并可能遗留一些潜在问题。
视图层
WXML
WXML是框架设计的一套标签语言，结合基础组件、系统事件，可以构建出页面的结构。
自定义组件
1.创建自定义组件
类似于页面，一个自定义组件由json，wxml,wxss，js4个文件组成。要编写一个自定义组件，首先需要在json文件中进行自定义组件声明（将component字段设为true可这一组文件设为自定义组件）：
{
"component":true
}
同时，还要在wxml文件中编写组件模板，在wxss文件中加入组件样式，它们的写法与页面的写法类似。具体细节和注意事项参见组建模板和样式。
注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
在自定义组件js文件中，需要使用Component()来注册组件，并提供组件的属性定义、内部数据和自定义方法。
组件的属性值和内部数据将被用于组件WXML的渲染，其中，属性值是可由组件外部传入的。
使用已注册的自定义组件前，首先要在页面的json文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件路径：
Component构造器
Component构造器可用于定义组件，调用Component构造器时可以指定组件的属性、数据、方法等。
定义段 类型 是否必填 描述
properties Object Map 否 组件的对外属性，是属性名到属性设置的映射表，属性设置中可包含三个字段，type表示属性类型、value表示属性初始值、observer表示属性值被更改时的响应函数。
data Object 否 组件的内部数据，和properties一同用于组件的模板渲染
methods Object 否 组件的方法，包含事件响应函数和任意的自定义方法，关于事件的响应函数的使用，参见组件事件
behaviors String Array 否 类似于mixins和traits的组件间代码复用机制，参见behaciors
created Function 否 组件生命周期函数，在组件实例进入页面节点树时执行，注意此时不能调用setData
attached Function 否 组件生命周期函数，在组件实例进入页面节点树时执行。
ready Function 否 组件生命周期函数，在组件布局完成后执行，此时可以获取节点信息。
moved Function 否 组件生命周期函数，在组件实例被移动到节点树另一个位置时执行。
detached Function 否 组件生命周期函数，在组件实例被从页面节点树移除时执行。
relations Object 否 组件间关系定义，参见组件间关系
externalClasses String Array 否 组件接受的外部样式类，参见外部样式类。
options Object Map 否 一些选项（文档中介绍相关特性时会涉及具体的选项设置，这里暂不列举）
lifetimes Object 否 组件生命周期声明对象，组件的生命周期：created、attached、ready、moved、detached将收归到lifetimes字段内进行声明，原有声明方式仍旧有效，如同时存在两种声明方式，则lifetimes字段内声明方式优先级最高
pageLifetimes Object 否 组件所在页面的生命周期声明对象，目前仅支持页面的show和hide两个生命周期
definitionFilter Function 否 定义段过滤器，用于自定义组件扩展，参见自定义组件扩展。
生成的组件实例可以在组件的方法、生命周期函数和属性observer中通过this访问。组件包含一些通用属性和方法。
属性名 类型 描述
is String 组件的文件路径
id String 组件节点id
dataset String 节点 dataset
data Object 组件数据，包括内部数据和属性值
properties Object 组件数据，包括内部数据和属性值（与data一致）
方法名 参数 描述
setData Object newData 设置data并执行视图层渲染
hasBehavior Object behavior 检查组件是否有behavior（检查时会递归检查被直接或间接引入的所有behavior）
triggerEvent String name,Object detail,Object options 触发事件，参见组件事件
createSelectorQuery 创建一个SelectorQuery对象，选择器选取范围为这个组件实例内。
createIntersectionObserver 创建一个IntersectionObserver对象，选择器选取范围为这个组件实例内
selectComponent String selector 使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象（会被 wx://component-export 影响）
selectAllComponents String selector使用选择器选择组件实例节点，返回匹配到的全部组件实例对象组成的数组
getRelationNodes String relationKey 获取这个关系所对应的所有关联节点，参见 组件间关系
简单的组件应用demo：
组件间通信
组件间通信
组件间的基本通信方式有以下几种：
*WXML数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置JSON兼容数据。
*事件：用于子组件向父组件传递数据，可以传递任意数据。
*如果以上两种方式不能满足需要，父组件还可以通过this.selectComponent方式获取子组件实例对象，这样就可以直接访问组件的任意方法和数据。
监听事件
事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。关于事件的基本概念和用法，参见事件。
监听自定义组件事件的方法与监听基础组件事件的方法完全一致：
触发事件
自定义组件触发事件时，需要使用triggerEvent方法，指定事件名、detail对象和事件选项：
触发事件的选项包括：
bubbles Boolean 不是必填 默认值false 事件是否冒泡
composed Boolean 不是必填 默认值false 事件是否可以穿越组件边界，为false时，事件将只能在引用组件的节点树上触发，不进入其他组件内部。
captruePhase Boolean 不是必填 默认值false 事件是否拥有捕获阶段。
behaviors
定义和使用 behaviors
behaviors是用于组件代码共享的特性，类似于一些编程语言中的mixins或traits。
每个behavior可以包含一组属性、数据、生命周期函数和方法，组建引用它时，他的属性、数据和方法都会被合并到组件中，生命周期也会对应时机被调用。每个组件可以引用多个behavior。behavior也可以引用其它behavior。
behavior需要使用Behavior()构造器定义。
组件引用时，在behaviors定义段中将它们逐个列出即可。
在上例中，my-component组件定义中加入了my-behavior，而my-behavior中包含有myBehaviorProperty属性、 myBehaviorData数据字段、 myBehaviorMethod 方法和一个 attached 生命周期函数。这将使得my-component中最终包含myBehaviorProperty 、 myProperty 两个属性，myBehaviorData 、 myData 两个数据字段和 myBehaviorMethod 、 myMethod 两个方法。当组件触发attached生命周期时，会依次触发my-behavior 中的 attached 生命周期函数和 my-component 中的 attached 生命周期函数。
字段的覆盖和组合规则
组件和它引用的behavior中可以包含同名字段，对这些字段的处理方法如下：
*如果有同名的属性或方法，组件本身的属性或方法会覆盖behavior中的属性或方法，如果引用了多个behavior，在定义段中靠后behavior中的属性和方法会覆盖靠前的属性或方法；
*如果有同名的数据字段，如果数据是对象类型，会进行对象合并，如果是非对象类型则会进行相互覆盖；
*生命周期函数不会相互覆盖，而是在对应触发时机逐个调用。如果同一个behavior被一个组件多次引用，他定义的生命周期函数只会被执行依次。
内置behaviors
自定义组件可以通过引用内置的behavior来获取内置组件的一些行为。
在上例中，wx://form-field 代表一个内置 behavior，它使得这个自定义组件有类似于表单控件的行为。
内置behavior往往会为组件添加一些属性。在没有特殊说明时，组件可以覆盖这些属性来改变它的type或添加observer。
组件中slot使用
如果引入组件的wxml中，想在组件中写入其它的东西，需要在组件中写入一个slot插槽，这样才会正常显示。
使用多个slot，在正常情况下，一个组件只有一个slot，但有时候我们的自定义组件可能不止使用一个slot，需要使用多个slot时，可以在组件js中声明启用。
1.在js中声明
2.在组件中使用多个slot，以不同的name来区分：
3。使用时，用slot属性来将节点插入到不同的slot上。
组件间关系
定义和使用组件间的关系
有时需要实现这样的组件：
这个例子中，custom-ul和custom-li都是自定义组件，他们有相互间的关系，相互间的通信往往比较复杂。此时在组件定义时加入relations定义段，可以解决这样的问题。示例：
1.引入组件的wxml：
2.custom-ul组件：父组件
3.custom-li组件：子组件
4.在子组件和父组件中的js文件中Component中定义relations，并表明父子或则祖先关系。
关联一类组件
有时需要关联的是一类组件：
抽象节点
在组件中使用抽象节点
有时，自定义组件模板中的一些节点，其对应的自定义组件不是由自定义组件本身确定的，而是自定义组件调用者确定的。这时可以把这个节点声明为‘抽象节点’。
例如，我们现在来实现一个选项框组件，（selectable-group）组件，它其中可以放置单选框(custom-radio)或者复选框（custom-checkbox）。实例链接：https://github.com/WangShuXian6/miniprogram-demo/tree/develop/abstract-com
自定义组件扩展
通过例子可以发现，自定义组件的扩展其实就是提供了修改自定义组件定义段的能力，上述例子中就是修改了自定义组件中的data定义段的内容。
Behavior()构造器提供了新的定义段definitionFilter，用于支持自定义组件扩展。definitionFilter是一个函数，在被调用时会注入两个参数，第一个参数是使用该behavior的component/behavior的定义对象，第二个参数是该behavior所使用的behavior的definitionFilter函数列表。
上述代码中声明了1个自定义组件和3个behavior，每个behavior都使用了definitionFilter定义段。那么按照声明的顺序会有如下事情发生。
1.当进行behavior2的声明时就会调用behavior3的definitionFilter函数，其中defFields参数是behavior2的定义段，definiyionFilterArr参数即为空数组，因为behavior3没有使用其它的behavior。
2.当进行behavior1的声明时就会调用behavior2的definitionFilter函数，其中defFields参数是behavior1的定义段，definitionFilterArrr参数是一个长度为1的数组，definitionFilterArr[0]即为behavior3的definitionFilter函数，因为behavior2使用了behavior3.用户在此处可以自行决定在进行behavior1的声明时要不要调用behavior3的definitionFilter函数，如果需要调用，在此处补充代码definitionFilterArr[0](defFields) 即可，definitionFilterArr 参数会由基础库补充传入。
3.同理，在进行 component 的声明时就会调用 behavior1 的 definitionFilter 函数。
下面利用扩展简单实现自定义组件的计算属性功能:
在组件中使用：
实现原理很简单，对已有的 setData 进行二次封装，在每次 setData 的时候计算出 computed 里各字段的值，然后设到 data 中，已达到计算属性的效果。
开发第三方自定义组件
开发一个开源的自定义组件包括给他人使用，首先需要明确他人是要如何使用这个包的，如果只是拷贝小程序目录下直接使用的饿话，就可以跳过此文档。此文档中后续内容是以npm管理自定义组件的前提下进行说明的。
在开发之前，要求开发者具有基础的node.js和npm相关的知识，同时需要准备好支持npm功能的开发者工具，点此下载。
