微信小程序已经出来了很久，最为一名前端攻城狮也是充满了好奇心的去google了一把，  被各种所谓得小程序得天下的文章洗脑之后，开始了探索之旅。。。。

第一步——工具
对于开发小程序的工具，百度已经有很多正解，这边也不多啰嗦，贴出地址：
https://github.com/gavinkwoe/weapp-ide-crack

第二步——小程序整体结构
app.js:在根目录下的app.js文件是整个小程序的js文件。在这个文件里面使用APP()来注册一个小程序。整个app有一个生命周期：onLanuch,onShow,onHide(加载，呈现，隐藏)，暂时还没有对这生命周期做过操作（TODO）.在App对象中还有一个全局对象，这个全局对象可以存放全局的参数或者是方法，在不同的页面中使用getApp()来调用。
app.json:在根目录下的app.json文件是整个小程序的配置文件。在配置文件中可以配置小程序的页面pages,顶部状态栏window，底部切换tabbar,网路超时networkTimeout。
app.wxss:在根目录下的app.wxss文件是整个小程序的样式文件。对于整个小程序一些公用的样式可以配置在这里。

第三步——单页面开发
在根目录下创建单页面文件夹
index.js:通过Page注册单页面程序。一个完整的单页面具有一个完整的生命周期---onload,onready,onshow,onhide,onupload;在脚本中可以设置单页面的变量（相当于全局变量），把页面中需要用的参数定义在data中，方便页面的一些状态的改变和页面的动态渲染。
index.wxml：单页面页面结构
index.wxss：单页面页面样式
index.json：单页面配置文件，目前用到了就是覆盖全局配置文件中的window对象，用来修改每个单页面上的title

第四步——页面渲染
动态页面渲染需要几个条件：数据，模板。数据通过请求拿到之后，设置在当前页面的data中，在视图层通过{{data}}获取请求渲染数据。当数据有了之后，就需要渲染的模板。小程序中使用template标签来表示一个模板。模板中的name代表了这个模板。在页面中使用的时候template标签上使用is属性来对应模板的name，在这里还需要把我们请求到的数据传到模板中，这时候需要在template中添加data属性来传递。对于模板外部应用还没有研究出来如何使用（据说是通过include）.

页面的数据一般都需要遍历渲染，小程序使用Block标签来遍历渲染模板，这个标签没有意义不会在页面中渲染出来。

第五步——组件
目前用到的组件：幻灯片swiper，使用方法比较简单，官网给的文档比较详细

滚动组件scroll-view，组件方法属性很多，我这边在列表页中使用了这个组件。列表页需要在纵向滚动，所以在组件上需要配置scroll-y属性，横向同理。列表页中还需要上拉刷新，这时候需要使用bindscrolltolower方法在脚本中处理上拉刷新的事件，有个比较坑的是，做上拉刷新的时候，需要个滚动组件一个高度，不然无效。

第六步——模块
在小程序中对于一些频繁使用，并且可以抽象出来的可以做成单独的一个模块，便于代码的复用。
目前我把异步请求单独作为一个模块使用。前面说过根目录下的app,js中有一个全局对象，在这个对象中可以存放数据和方法，所以在这个脚本中引用了模块，方法存放在全局属性中，在单页面中通过getApp()来获取。

总的来说，开发小程序让我有一种在做RN的感觉（框架的原理其实也是React）,视图层，逻辑层比较清楚。官方提供的组件使用起来也比较方便，但是不能引用第三方组件。。。

预告：第二弹——小程序的滑动删除。