今天开始写一个简单的微信小程序，先贴一下效果图，
先分析下所需要的组件，在首页里上面是轮播，中间为一个列表，下面为一个导航栏。首先来实现下面的导航栏，先看下微信小程序官方文档里关于tabBar的主要属性的说明：
其中在这里我用到的是 selectedColor 和 list,实现形式为在 app.json 里写如下代码：
"tabBar":{
"selectedColor" :"#2e5e86",
"list" :[
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/home_default.png",
"selectedIconPath": "images/home_selected.png"
},
{
"pagePath": "pages/first/first",
"text": "设置",
"iconPath": "images/setting_default.png" ,
"selectedIconPath":"images/setting_selected.png"
}
]
}
需要注意的是list 接受一个数组，其中每一项都是一个对象，具体属性为以上我用到的四个， pagePath 用来指定页面路径，需要注意的是页面路径要先在 pages 中定义。 text 为 tab 上的按钮文字。 iconPath 为 tab 上的图片路径，这里暂不支持网络图片。 selectedIconPath 为选中时的图片路径。具体描述可以参见官方文档，这样下面的导航栏部分就实现了。
其次，来看下中间的列表部分，为了实现列表的效果，需要使用的是 wx:for。在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item，具体使用方法暂不描述，这里只贴出具体实现。以下为index.wxml 中的代码
<view class='items-list'>
<view class='pro-item' wx:for="{{proList}}"
data-index='{{index}}' >
<image src="{{item.image}}" class="pro-image" width='190rpx' ></image>
<view class='pro_body'>
<view class='pro_title'>{{item.title}}</view>
<text class='pro_content'>{{item.content}}</text>
<view class='pro-footer'>
<button class='btn-read' size="{{defaultSize}}">阅读</button>
<button class='btn-buy' size="{{defaultSize}}" open-type="contact">联系客服</button>
</view>
</view>
</view>
</view>
关于view, text 的用法暂不描述，关于 button 的属性之一 open-type 的用法提一下，这是微信开放功能，具体可选值为：
在首页中的组件所需要的样式定义在 index.wxss 中，具体代码如下：
/* items-list*/
.items-list{
}
.pro-item{
overflow: hidden;
margin: 30rpx;
}
.pro-image{
float: left;
width: 200rpx;
height: 270rpx;
}
.pro_body{
margin-left: 230rpx;
}
.pro_title{
font-size: 34rpx;
line-height: 1;
}
.pro_content{
font-size: 22rpx;
color: #9a9a9a;
line-height: 1;
}
.pro-footer{
overflow: hidden;
}
.btn-read{
margin-right: 30rpx;
float: left;
}
btn-buy{
float: right;
}
使用的变量名在 index.js 里面进行定义，具体代码如下：
defaultSize: 'mini',
proList: [
{
image: '/images/item1.png',
title: '我不',
content: '百万级畅销书作家大冰2017年新书\n'+
'作家很多，野生作家只有一个\n'+
'写书的人很多，大冰只有一个\n',
},
{
image: '/images/item2.png',
title: '白鹿原',
content: '20周年纪念典藏版，完整呈现了1993年最原始版本.\n'+
'1997年荣获第四届茅盾文学奖，渭河平原百年变迁的雄奇史诗！'
},
{
image: '/images/item3.png',
title: '呐喊',
content:'有些事如果你从来没有想过，鲁迅先生的作品你就读不懂；有些现状如果你从来没有痛恨过，你就不可能理解鲁迅先生！我们虽然生非同时，但鲁迅先生笔下的中国人依然如故，这也是我们重读鲁迅的意义所在 '
},
{
image: '/images/item4.png',
title: '傲慢与偏见',
content: '一个恃才傲物狂放不羁，一个聪颖美丽却心存偏见，千回百转，历经种种心灵涤荡，爱情——终如芙蓉般在清澈的湖水中，静静地含露绽放。'
},
]
总上就是中间部分的实现，最后是上面轮播图的实现，在微信小程序里，轮播图的使用 swiper 来实现，还是先来看下主要的属性
这里只截取了部分属性，完整的使用可以参看官方文档，下面贴一下我的代码：
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" >
<block wx:for="{{imageUrls}}" >
<swiper-item>
<image src="{{item}}" class="slide-image" width="100%" ></image>
</swiper-item>
</block>
</swiper>
在这里我只设置了是否显示指示点，是否自动切换，自动切换间隔，滑动动画时长几个属性，具体其他属性有什么样的效果，可以自己去尝试下。同样的贴下index.js 里的代码和index.wxss 中的代码：imageUrls: [
imageUrls: [
'/images/banner1.jpg',
'/images/banner2.jpg',
'/images/banner3.jpg'
],
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000,
/**swiper**/
swiper{
width:100% ;
height: 360rpx;
}
swiper image{
display: block;
width: 100%;
height: 100%;
}
以上为首页的全部实现代码，至于设置页面的实现和首页差不多，这里就不贴了，有什么不足望告知。
