现在让我们开始编写首页的代码啦,大致根据我的网站的移动web页面来写界面,移动端的页面如下:
分析了一下,由于小程序的特殊性,移动端与小程序的界面有三点不同:
1,右上角的导航菜单不能再使用,因为这是bootstrap生成的,如果重写到小程序上,先不说是否能实现吧,就算能实现,这一块的代码也是非常复杂的,而且即使实现了,也不符合小程序的客户体验,所以第一节我就把菜单放到了底部了,这样才符合小程序的页面布局。
2,顶部的logo和banner我就去掉了,因为小程序顶部就会有名字介绍,即“双黑in上海”。
3,个人介绍这里有公众号和邮箱,小程序里同样不适合,小程序里是无法识别公众号的二维码的,当然也没办法实现类似于mailto的<a>标签,所以也省去了。
现在开始写代码。
一,导入icon库
在根目录新建一个icon.wxss,用来导入移动页面的icon图标,移动页面的icon也都是阿里icon生成的,所以直接把css复制到wxss里即可,如下图:
二,定义样式
很多页面、模块都会有共同的样式,也定义了几个css变量,方便统一修改,同时也要导入icon.wxss,app.wxss代码如下
@import "icon.wxss";
page,view,text,image,navigator,swiper,swiper-item{
padding: 0;
margin: 0;
box-sizing:border-box;
}
page{
--mainColor:#282828;
--secondaryColor:#ccc;
color:var(--mainColor);
}
.bborder {
border-bottom: solid 2rpx var(--secondaryColor);
padding-bottom: 40rpx;
}
.container{
padding:0 28rpx;
box-sizing: border-box;
}
.pubTitle{
font-size:36rpx;
border-bottom:#FF0000 6rpx solid ;
padding:18rpx 0 18rpx 0;
display: inline-block;
margin-bottom: 20rpx;
}
其中.bboder指板块下方一条灰色的分割线。
.container是主容器,设置内边框等。
.pubTitle是设置板块的标题。
三,顶部banner
顶部就是一张大图,加两段文字,由于小程序里的布局只有view元素,所以html里面的h1,b,strong等等都不能用,所有样式主要以wxss来控制,所以要稍作修改,先贴wxml代码。
<view class="banner">
<image src="https://www.shuanghei.com/images/web/bannersm.jpg" mode="aspectFit" />
<view class="h1">一直在路上</view>
<text class="h2">跟得上灵魂的身体,配得上身体的灵魂!</text>
</view>
代码非常简单,其中image的mode属性,详细可以见官方文章,比css里的max-width:100%;提供更多的功能。
这里的aspectFit官方的定义就是
“缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。”
说实话说的并不是很精确,我的做法就是一个个值去调试,直到找到自己满意的那个。
相对来说样式就稍微复杂一点,需要用到绝对定位,代码如下:
.banner {
height: 100%;
position: relative;
}
.banner image {
width: 100%;
display: block;
height: 194rpx;
}
.banner .h1,
.banner .h2 {
color: #FFF;
position: absolute;
left: 60rpx;
top: 30rpx;
}
.banner .h1 {
font-size: 40rpx;
}
.banner .h2 {
top: 90rpx;
font-style: italic;
}
设置.banner父标签为相对定位,里面白色文字是绝对定位。
四,自我介绍
这里开始,需要把所有板块放到一个容器中,即<view class="container">中,已经在公共样式里定义好了,wxml代码如下:
<view class="me bborder">
<view class="touxiang">
<image mode="widthFix" src="https://www.shuanghei.com/images/web/touxiang.jpg" />
</view>
<view class="jieshao">
<text>网名:双黑 | 宝山一条街</text>
<text>职业:自由职业</text>
<text>居住:上海</text>
<text>出生:80年代初</text>
/view>
</view>
同样也是非常简单,的确小程序的wxml代码通常都非常简单,仅仅就是数据的表现,所以样式都需要在wxss里调试。
熟悉css知道,一看就是典型的左右flex布局,在设置一下左右的间隔,基本就成型了,代码如下:
.me {
margin-top: 40rpx;
display: flex;
}
.me .touxiang {
margin-right: 100rpx;
}
.me .touxiang image {
width: 200rpx;
border-radius: 16rpx;
border: solid 1px #ccc;
padding: 6rpx;
}
.me .jieshao text {
display: block;
font-size: 28rpx;
margin-bottom: 18rpx;
}
五,推荐
用了公用的puttitle样式,板块标题,四张图片用了flex布局,暂时没有调用数据库,直接用了4个一样的数据。
<view class="tuijian bborder">
<text class="pubTitle">推荐</text>
<view class="tuijianMain">
<navigator url="https://www.baidu.com" wx:for="{{4}}">
<image class="pic" mode="widthFix"
src="https://www.shuanghei.com/aaa.jpg"></image>
</navigator>
</view>
</view>
样式表使用了flex-wrap使它强制换行,以下是代码:
.tuijianMain {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.tuijianMain .pic {
width: 342rpx;
border-radius: 8rpx;
}
六,最新文章
这一块也是首页的重点,相对来说布局也是比较复杂一点,首页左边文字和右边图片,用了左右的flex布局,左边的标题和下面的信息,用了上下的flex布局,代码如下:
<view class="article">
<text class="pubTitle">最新</text>
<view class="articleMain">
<navigator class="box" url="https://www.shuanghei.com" wx:for="{{10}}">
<view class="txt">
<view class="title">shuanghei.com开发博客小程序全记录</view>
<view class="info">
<text>2020-12-12</text>
<text class="iconfont icon-dianzan2">10</text>
<text class="iconfont icon-huitie">5</text></view>
</view>
<image class="pic" src="https://www.shuanghei.com/a.png"></image>
</navigator>
</view>
</view>
点赞和评论前面加了icon,使用了样式+选择器,使元素间产生分隔,样式表如下:
.articleMain .box {
display: flex;
justify-content: space-between;
padding:15rpx 0;
border-bottom: dashed 1rpx #F4F4F4;
}
.articleMain .box .title{
word-wrap: break-word;
white-space: normal;
word-break:break-all;
}
.articleMain .box .txt {
display: flex;
flex-direction: column;
width: 480rpx;
justify-content: space-between;
}
.articleMain .box .txt .info {
color: #777;
}
.articleMain .box .txt .info text {
font-size: 24rpx;
}
.articleMain .box .txt .info text+text {
margin-left: 40rpx;
}
.articleMain .box .pic {
width: 156rpx;
height: 116rpx;
border-radius: 6rpx;
}
好啦,让我们看看最终效果吧,是不是和移动web页面差不多?