微信小程序入门第二天

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

           

先分析下所需要的组件，在首页里上面是轮播，中间为一个列表，下面为一个导航栏。首先来实现下面的导航栏，先看下微信小程序官方文档里关于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: 30 rpx;

}

.pro-image{

float: left;

width: 200 rpx;

height: 270 rpx;

}

.pro_body{

margin-left: 230 rpx;

}

.pro_title{

font-size: 34 rpx;

line-height: 1;

}

.pro_content{

font-size: 22 rpx;

color: #9a9a9a;

line-height: 1;

}

.pro-footer{

overflow: hidden;

}

.btn-read{

margin-right: 30 rpx;

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: 360 rpx;

}

swiper image{

display: block;

width: 100%;

height: 100%;

}

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