今天开始写一个简单的微信小程序，先贴一下效果图，

先分析下所需要的组件，在首页里上面是轮播，中间为一个列表，下面为一个导航栏。首先来实现下面的导航栏，先看下微信小程序官方文档里关于tabBar的主要属性的说明：

其中在这里我用到的是  selectedColor 和 list,实现形式为在 app.json 里写如下代码：

需要注意的是list  接受一个数组，其中每一项都是一个对象，具体属性为以上我用到的四个，  pagePath  用来指定页面路径，需要注意的是页面路径要先在 pages 中定义。 text  为  tab 上的按钮文字。 iconPath  为   tab 上的图片路径，这里暂不支持网络图片。  selectedIconPath  为选中时的图片路径。具体描述可以参见官方文档，这样下面的导航栏部分就实现了。

      其次，来看下中间的列表部分，为了实现列表的效果，需要使用的是  wx:for。在组件上使用 wx:for  控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item，具体使用方法暂不描述，这里只贴出具体实现。以下为index.wxml 中的代码

关于view, text 的用法暂不描述，关于 button 的属性之一 open-type 的用法提一下，这是微信开放功能，具体可选值为：

在首页中的组件所需要的样式定义在 index.wxss 中，具体代码如下：

使用的变量名在 index.js 里面进行定义，具体代码如下：

总上就是中间部分的实现，最后是上面轮播图的实现，在微信小程序里，轮播图的使用 swiper 来实现，还是先来看下主要的属性

这里只截取了部分属性，完整的使用可以参看官方文档，下面贴一下我的代码：

在这里我只设置了是否显示指示点，是否自动切换，自动切换间隔，滑动动画时长几个属性，具体其他属性有什么样的效果，可以自己去尝试下。同样的贴下index.js 里的代码和index.wxss 中的代码：imageUrls: [

以上为首页的全部实现代码，至于设置页面的实现和首页差不多，这里就不贴了，有什么不足望告知。