第二节：微信小程序静态页面开发初体验

根据上一节了解到的小程序知识，尝试完成一个入门的demo项目，记录下过程，供日后参考。

第一个页面，打算做一个新闻信息展示的静态页面。

首先展示一下最后完成的效果：



页面很简单，分成三个部分：页面标题、中间的轮播图和下面的图文信息。

轮播图的实现，使用的是微信小程序swiper组件，其他地方都是用简单的css来控制样式。

下面是代码的目录结构：



因为和第一节完成的页面在一个项目里面，所以需要新建一个posts的文件，而新建完posts的相关文件后，需要在app.json文件声明一下，也就是在”pages”里面增加代码”pages/posts/posts”。



这个地方需要注意的是，小程序是根据pages中声明页面的顺序来决定第一个页面加载谁，所以开发的时候可以将正在开发的页面移到最前面

posts.json代码

在app.json中，定义了”window”的”navigationBarTitleText”: “第一个小程序”，要想在第二个页面定义自己的标题，就需要在posts.json文件增加自己的标题代码。

{
"navigationBarBackgroundColor": "#405f80",
"navigationBarTitleText": "新闻"
}

posts.wxml代码

<view>
<swiper indicator-dots='true' autoplay='true'>
<swiper-item>
<image src='/images/xiaolong.jpg'></image>
</swiper-item>
<swiper-item>
<image src='/images/vr.png'></image>
</swiper-item>
<swiper-item>
<image src='/images/bl.png'></image>
</swiper-item>
</swiper>
<view class='posts-container'>
<view class='posts-author-date'>
<image src='/images/132.jpg'></image>
<text>Nov 25 2017</text>
</view>
<text class='posts-title'>正是虾肥蟹壮时</text>
<image class='posts-image' src='/images/crab.png'></image>
<text class='posts-content'>地处黄海之滨的小城，在秋风的抚慰、秋阳的光照下，瞬间也喧嚣起来。任意走进城中的每一个菜市场，在显眼的位置上，冲入耳际的是此起彼伏的吆喝声，映入眼帘的是那些小商小贩们抢占有利地势将一只只塑料箱一字排开的情景。</text>
<view class='posts-like'>
<image src='/images/icon/chat.png'></image>
<text>92</text>
<image src='/images/icon/view.png'></image>
<text>265</text>
</view>
</view>

<view class='posts-container'>
<view class='posts-author-date'>
<image src='/images/132.jpg'></image>
<text>Nov 25 2017</text>
</view>
<text class='posts-title'>黑猫白猫</text>
<image class='posts-image' src='/images/cat.png'></image>
<text class='posts-content'>白猫黑猫论是邓小平在20世纪60年代提出来的，该理论源自邓小平的一句话：“不管黑猫白猫，能捉老鼠的就是好猫”。这句话的意思是：无论计划经济还是市场经济，都只是一种资源配置手段，与政治制度无关。</text>
<view class='posts-like'>
<image src='/images/icon/chat.png'></image>
<text>99</text>
<image src='/images/icon/view.png'></image>
<text>165</text>
</view>
</view>
</view>

页面上，用swiper标签来实现轮播，里面的每一个swiper-item子标签都代表着一条轮播的内容。

swiper的属性可以查看微信小程序swiper文档

正常的轮播效果是横向的，如果需要纵向的轮播效果，可以在swiper标签上增加vertical=’true’实现轮播图垂直滚动

- posto.wxss

swiper{
width: 100%;
height: 500rpx;
}

image{
width: 100%;
height: 500rpx;
}

.posts-container{
display: flex;
flex-direction: column;
margin-top: 20rpx;
margin-bottom: 40rpx;
background-color: #fff;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
padding-bottom: 5px;
}

.posts-author-date{
margin: 10rpx 0 20rpx 10rpx;
}

.posts-author-date image{
width: 60rpx;
height: 60rpx;
border-radius: 50%;
vertical-align: middle;
}

.posts-author-date text{
margin-left: 20rpx;
vertical-align: middle;
margin-bottom: 5px;
font-size: 26rpx;
}

.posts-title{
font-size: 34rpx;
font-weight: 600;
color: #333;
margin-bottom: 10px;
margin-left: 10px;
}

.posts-image{
width: 100%;
height: 340rpx;
margin: auto 0;
}

.posts-content{
color: #666666;
font-size: 28rpx;
margin-bottom: 20rpx;
margin-left: 20rpx;
letter-spacing: 2rpx;
line-height: 40rpx;
}

.posts-like{
font-size: 13px;
flex-direction: row;
line-height: 16px;
margin-left: 10px;
}

.posts-like image{
height: 16px;
width: 16px;
margin-right: 8px;
vertical-align: middle;
}

.posts-like text{
vertical-align: middle;
margin-right: 20px;
}

wxss的样式与css的写法基本一致，我不是专业的前端开发，在这里就不再赘述。

这样，这个新闻展示的静态页面就完成了。