首页布局跟小程序如何配置Iconfont—小程序入门与实战【七】

经过上一章节的学习我们已经搭建了项目的整个框架,雏形已成。接下来我们只需要的往里面堆东西就可以了。

分析首页设计稿

写代码一定要注意细节和结构性,拿到设计图首先分析应该怎么做,应该有哪些模块,哪些模块可以通用,一定要经过设计之后再动手去写。


image


从设计稿可以看出,图片是通屏的。经过与设计师沟通,而且还是轮播图,上下滑动的。上面有“HOT” 跟 “衣品圈” 两个Tab切换 。

下面是 Tabbar 标签栏,有“打卡”、“+”、“我”共 3 个标签,分别去到不同的页面。

右边有“头像”、“点赞”、“分享”。

通屏轮播图

给大家介绍两个微信小程序官方组件。

  • view:视图容器,相当于div
  • swiper: 滑动视图容器。其中只可以放置swiper-item组件,常用来放轮播图。
  • image:用来放图片的组件。

下面我们用这两个组件来写通屏轮播图

 # index.wxml 代码
 <!--一个大盒子包住所有的元素-->
 <view class="container-fill">
 <!--包住 swiper 组件--> 
 <view class="scroll-fullpage" style="height: 100%"> 
 <!--swiper组件用法,里面只能放swiper-item组件,我们项目中需要的轮播图上下滑动,所以设置 vertical="true" 代表滑动方向为纵向。-->            <swiper circular="true" vertical="true" style="height: 100%">            <!--放了两个 swiper-item,相当于有两个子项,滑两下 -->            <!--第一个子项-->                <swiper-item>                <!--swiper-item 组件里面可以放任何的东西,我们这里放了图片-->                                <!--src代表图片的url,mode为图片的裁剪,缩放的模式,aspectFill保持纵横比缩放图片-->                    <image mode="aspectFill"                           src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590745760463&di=50d76742c6cb334acdac656a930c52e7&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201909%2F27%2F20190927092410_yyrsn.thumb.400_0.jpg"                           class="slide-image">                    </image>                </swiper-item>                <!--第二个子项-->                <swiper-item>                    <image mode="aspectFill"                           src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590747427893&di=9fa9371dfd6f8ffcd062b18eeff58ec5&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F2019-09-11%2F5d789c0b24214_200_300.jpg"                           class="slide-image">                    </image>                </swiper-item>            </swiper>        </view></view>
代码分析大白话(注释里面也挺详细的):
  • view相当于 div ,是一个容器,不可以滑动。
  • swiper是一个可以滑动的的容器,vertical = "true" 表示滑动方向为纵向,circular="true" 表示采用衔接滑动,如果不理解衔接滑动可以把这个属性先去掉,然后体验一下区别。
  • swiper-item swiper 的滑块,如果加入滑动内容,那么就在swiper-item中添加,宽高自动设置为 100% 。
  • image组件放在swiper-item 中,其中的mode属性最常用的是widthFix,表示图片宽度100%,高度自适应。我觉得有点像背景图的感觉。

上面是 wxml的代码,接下来是样式。

# index.less代码<!--将大盒子通屏,这个方法请记住用固定定位的方法通屏。不会出现各个机型有白边的情况不熟悉less的同学,就去百度看一下。其实就是层层嵌套的感觉。其实这里的选择器,例如:.container-fill {    .scroll-fullpage{            }}就相当于css的:.container-fill .scroll-fullpage{    }-->.container-fill{  position: fixed;  top: 0;  bottom: 0;  left:0;  right:0;  overflow: hidden;  z-index: 10;      .scroll-fullpage {        height: 100%;        transition: all 0.3s;            swiper {              height: 100%;              image {                width: 100%;              }            }      }}

Tab 栏切换“HOT” | “衣品圈”

Tab 栏 肯定是不属于可以滑动的轮播图那一块的。所以我们需要将 Tab 栏放在 swiper 外面,需要跟 swiper 同级。

# index.wxml 代码
<!--分成3块布局,使用伸缩盒子--> 
<view class="title-box">            
<view class="active">HOT</view>
<view class="line">            
</view>            
<view class="circle">         
       衣品圈           
        </view>      
          </view>
<!--使用固定定位跟伸缩盒子-->.title-box {    position: fixed;    top: 0;    width: 100%;    font-size: 16px;    color: #ffffff;    padding: 10px 0;    display: flex;    align-items: center;    justify-content: center;    z-index: 2;    .line {      width: 1px;      height: 10px;      background: rgba(255, 255, 255, .4);;      margin: 0 10px;    }    .circle {      color: rgba(255, 255, 255, .8);    }    .active {      font-size: 22px;    }  }

底部 Tabbar

# index.wxml 代码<!--使用固定定位,跟 Tab 同一个层级使用dispaly:flex--> <view class="tapbar-box">            <view class="bar-item">                <view class="name active">                    打卡                </view>            </view>            <view class="bar-item">                <view class="name">                    <view class="iconfont icon-fabu submit"></view>                </view>            </view>            <view class="bar-item">                <view class="name">                    我                </view>            </view>        </view>
# index.less代码.tapbar-box {    display: flex;    align-items: center;    position: fixed;    bottom: 0;    width: 100%;    padding-top: 10px;    z-index: 2;    text-align: center;    font-size: 14px;    color: rgba(255, 255, 255, .8);    border-top: 1px solid rgba(255, 255, 255, .2);    .bar-item {      flex: 1;      position: relative;      .name {        display: inline-block;        padding-bottom: 10px;        &.active {          font-size: 16px;          color: #ffffff;          border-bottom: 2px solid #ffffff;        }        .submit {          font-size: 30px;        }      }    }  }
代码解析
  • 固定定位 position:fixed
  • 伸缩盒子 dispaly:flex

这两个属性都要熟练的使用,这一块代码可以复用,所以我们之后可以把这一块封装成一个组件。在写完首页之后,我会教你们微信小程序如何封装自定组件。

头像 点赞 分享模块

头像,点赞跟分享模块大家思考一下,是跟轮播图模块同一层级还是在轮播图里面呢?

当然是在轮播图里面呀,也就是说放在swiper-item组件里面,因为我们每个人发的动态不一样呀,体验一下~ douyin 就可以了解。

# index.wxml代码  <!--左侧操作栏-->             <view class="left-operation">                 <view class="avatar">                     <image src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1591088302&di=d6211696ac35296b0e485ce3aa715e21&src=http://b-ssl.duitang.com/uploads/item/201901/10/20190110004111_dgsxc.thumb.700_0.png"></image>                 </view>                 <view class="operation-item">                     <view class="iconfont icon-dianzan"></view>                     <view class="num">5</view>                 </view>                 <view class="operation-item">                     <view class="iconfont icon-fenxiang"></view>                     <view class="num">分享</view>                 </view>             </view>
# index.less代码<!--我们要用绝对定位来让这个侧边栏居中-->.left-operation {      position: absolute;      top: 50%;      right: 15px;       margin-top: -117px;      .avatar {        width: 44px;        height: 44px;        margin-bottom: 30px;        image {          width: 100%;          height: 100%;        }      }      .operation-item {        margin-bottom: 20px;        text-align: center;        color: #ffffff;        &.active {          i {            color: #FFE600;          }        }        .iconfont {          font-size: 35px;          text-shadow: 2px 0px rgba(0, 47, 167, 0.61);        }        .num {          margin-top: 5px;          font-size: 12px;          text-shadow: 2px 0px rgba(0, 47, 167, 0.61);        }      }    }
代码解析
  • 使用绝对定位来让侧边栏居中
    position: absolute;    top: 50%;    margin-top: -117px; //这个是你要定位的这个元素的总高度的一半
  • 大家可以注意到我在 wxml中用了 iconfont ,所以我们接下来讲解小程序中如何配置iconfont

小程序中配置 iconfont

由于你们没有 iconfont 的项目,所以你们可以找我来要压缩包。

  • 在 目录 src/assets/css 新建一个font.wxss文件
@font-face {	font-family: 'iconfont';	src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');	font-weight: normal;	font-style: normal;}.iconfont {  font-family: "iconfont" !important;  font-size: 16px;  font-style: normal;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}

解压压缩包,打开 iconfont.css ,复制


image


将上面的 src 替换掉,然后将 iconfont.css 下面的 一个个icon 全部复制到 font.wxss

  • 然后在 app.wxss 中引入 font.wxss
# app.wxss代码@import "assets/css/font.wxss";

之前我们说过的,.wxss 可以样式导入,使用 @import 语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。

总结

至此,我们的首页静态页面就差不多完成了。

给大家留一个任务:设计稿中还有一段 “昵称+ 文案” 的布局我没有在这里教大家,所以需要你们自己去写。

不会写的,可以去我的源码中间看。

下一章节给大家讲我们应该如何逻辑交互,也就是 js啦。