和我一起学习微信小程序(二)，首页布局

在让我们开始编写首页的代码啦，大致根据我的网站的移动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页面差不多？

本文首发于个人博客：和我一起学习微信小程序(二)，首页布局_双黑个人网站

下一篇：和我一起学习微信小程序(三)，封装网络请求