小程序入门之旅
继前期比对了微信衍生的三款产品，对于程序猿的我，肯定是对小程序最感兴趣的，最近也玩起了小程序。如果大家也对它感兴趣，就一起开启小程序的入门之旅吧。
01
—
工具篇
首先，在本篇就忽略该操作可以参考微信公众号简易教程，https://mp.weixin.qq.com/debug/wxadoc/dev/，描述了申请小程序的过程。
期次，可以把自己写好的demo用微信开发工具打开，小程序对于会前端开发的同事，工具使用起来会有一种似曾相识的感觉（是不是简化版的SublimeText和谷歌浏览器的结合体？）。
该工具还提供了上传（上传到腾讯云服务器），测试（生成性能测试报告） 等功能。
02
—
架构篇
微信小程序，架构很简单，如下图看到（图中1,2,3,4,5分别对应下面的五点讲解）。
1.app.js 主要是全局公共的js方法声明及调用所在的文件
2.app.json 是小程序整个的配置文件，所以有的页面都在要此注册，不然不允许访问
3.app.wxss 是小程序全局的css文件，公共css写在此最好不过的了
4.pages下是对应着所有页面，每个页面，可以添加四种类型的文件，.json，.wxss，.wxml，.js
5.utils 是我们公共的js存放的地方，因为微信小程序要求，每个js文件里的方法不可以直接引用或调用，必须要用 module.exports方法导出，这样pages 下的.js文件才可以调用到我们在此写的js方法。
03
—
组件篇
前端界面的渲染，应用的是ES6的思想，通过组件化的方式渲染出来的。界面层.wxml，不关注数据如何来的，只是做一个架构。实际逻辑及数据填充，通过.js来做数据处理。
另外.json，对应页面的配置文件。.wxss及对应css样式处理文件。
举个栗子，如下图所示，动态实现图片切换，首先在.wxml中，搭建swiper组件框架。具体数据如何填充，该页面不管：
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{background}}" wx:key="*this">
<swiper-item>
<view class="swiper-item {{item}}"></view>
<view wx:if="{{item=='demo-text-1'}}">
<image class="animation-element-wrapper-image" src="resources/pic/swiper.png"/>
</view>
<view wx:elif="{{item=='demo-text-2'}}">
<image class="animation-element-wrapper-image" src="resources/pic/5.png"/>
</view>
</swiper-item>
</block>
</swiper>
其次，在.js对类似{{autoplay}}的数据进行组装处理：
Page({
data: {
...
background: ['demo-text-1', 'demo-text-2'],
indicatorDots: true,//是否显示小圆点。
vertical: false,
autoplay: true,//是否自动播放。
interval: 500,//每张图片间隔时间
duration: 100//每张图片停留时间。
},
结束