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

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

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

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

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值