最近学习了一下小程序，记录一下，以后方便查阅。下面就我在学习过程中使用的一些控件的用法介绍一下。
结构
首先小程序的结构一般如下图所示：
其中app打头的js,json,wxss配置的整个小程序的全局性文件，这里面的内容在其它的子页面都是可以访问的，然后在每个子页面里面又有相应的js，json,wxml,wxss文件，比如上图在webpage这页面的文件夹下面能看到相应的这些以webpage打头的页面。下面说说这些页面的作用：
js文件：
这个一般都明白就是写javascript的，是具体处理页面交互逻辑的，其中在app.js定义的方法函数是全局性的，在页面中的js文件则只能是由当前的页面可以使用，一般是在wxml中调用js中定义的函数处理逻辑。
json文件：
用来配置一些页面属性的，比如在app.json中定义文件的路径，也可以在app.json中定义导航栏的标题，颜色背景等。也可以在子页面的json文件中定义这些样式来修改子页面的标题等。写法也很简单：
比如上图中，在pages里面定义的就是主包的路径，在运行小程序的时候就是先将这里面的页面下载下来再运行。window里面定义的就是导航栏的样式了，上面定义的有文字样式，背景颜色，标题以及标题的颜色，这个都很简单，一眼就能看明白。既然前面说到了主包，那看来小程序也是支持分包的？这个是肯定的，一个小程序默认的总大小不能超过2M，而使用分包可以将这个限制提高到8M，而且分包的个数也没有限制，上图中的subPackages里面定义的页面路径就是分包的页面，在小程序运行时是不会下载这些页面的，只有跳转这些页面的时候才会把这些页面下载下来运行，这样做可以减少初次打开小程序的时候那个白色空白页的显示时间。
wxss文件：
这个可以看做是微信自己弄得一个css文件类型，里面主要是写css代码用来控制页面样式的，以app打头的wxss文件里面定义的样式可以全局使用，所以在遇到一些通用的样式的时候可以在app.wxss中定义，然后再页面的wxml中直接引用就可以显示效果了。
wxml文件：
这个是布局文件，也是微信自己弄得一个xml类型的文件，类似于android中定义布局的xml文件，这个很好理解，就是小程序的页面显示层。
下面以一个轮播图的实现，来讲解一下小程序是如何运作的。
1：首先在布局文件中引入轮播页面的布局，从前面的讲解可知，是在页面的wxml文件中书写布局的。代码如下：
其中swiper类似于android的viewpage用来滑动布局的，swiper里面只能放swiper-item组件，swiper-item组件就是布局具体要滑动的子布局的，从上图的代码可知swiper-item里面是一个图片image和两段文本，效果图如下：
继续讲解上上图的布局代码，navigator是跳转用的，就是超链接，里面可以放置url跳转到别的页面。wx:for是处理列表数据的，会根据列表的数据依次将数据渲染在页面上。轮播图，滑动列表都是用到wx:for来渲染数据的，总之需要处理列表数据的时候就要用到wx:for。
每个view里面的class就是用来处理这个控件的布局样式的，对应的在wxss文件中处理，比如在wxml中定义的swiper-info属性的布局
在相应的wxss中就有对应的样式定义：
如果一个页面需要处理交互就需要js文件了，在上面的轮播图代码中，这个比较简单，只需要在js中定义函数修改相应的数据，布局中的属性就会相应的改变了。
好了，第一次写文章写了两个多小时也就写了这么点，感觉写的也不咋样，具体的项目的代码可以到：wanandroid-小程序版 这里来下载学习一下，这个项目是根据鸿洋公开的wanandorid的api写的一个项目，再次感谢鸿洋以及一些优秀的开源项目，喜欢的这个项目的话可以star一下~~
以上是我个人公众号，欢迎关注~