首页布局跟小程序如何配置Iconfont—小程序入门与实战【七】
2020-06-10
小程序开发
经过上一章节的学习我们已经搭建了项目的整个框架，雏形已成。接下来我们只需要的往里面堆东西就可以了。
分析首页设计稿
写代码一定要注意细节和结构性，拿到设计图首先分析应该怎么做，应该有哪些模块，哪些模块可以通用，一定要经过设计之后再动手去写。
从设计稿可以看出，图片是通屏的。经过与设计师沟通，而且还是轮播图，上下滑动的。上面有“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啦。
