乐趣区

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

jiezi

4-1

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

设计稿网址（14 天分享有效，过期的可以找我拿）：
https://lanhuapp.com/url/Airvn
密码: I4DA

分析首页设计稿

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

从设计稿可以看出，图片是通屏的。经过与设计师沟通，而且还是轮播图，上下滑动的。上面有“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 , 复制

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

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

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

总结

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

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

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

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

本文由博客群发一文多发等运营工具平台 OpenWrite 发布

退出移动版