首页布局跟小程序如何配置Iconfont—小程序入门与实战（七）
2024-04-12 03:41:42
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,d09GMgABAAAAABYQAAsAAAAAJmQAABXBAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCGJgq6BK01ATYCJANsCzgABCAFhG0Hgk8bFB9FRoaNA6DA8xjZ/3UCJ/fC+rEOZwRDT9GjN0XMk8RiIhj0F58dvXLP/ZOKEIqRjrawJWHLe57CULjHMUMpj6c5+9l9bzebzSZssjFCnAQ/SgTVCqIplBNK6/+4HlWsklKFM2q0QHuf1qHqduaFf/h79dw/xuZQOMAR69i2BtewVJCKlorv/W9NTWr5y1AQGAoYLvJpiQeKcFrglkfX0WnfEyS8YEjsIiaLGNPhtum/F2LRaRudCViIE+C+l0aJ0NtGL/qlEr1IaSAtACBoc+ALOXlvGonPUWe6v6XfOYVDGGivsvYvPz1wYdzKPUi6huZS+1hSA5KYYcbe3CV5OChcUroS50dJhvkfsaqumtATKkmBUQ3cVjVwcxPSdW7C+EFNHYfpossDLVajBmOzHa4asZA5bMrYPmNsQAAAC0YIAyIjK6cEGMBw7IgAAKJq+NBKYAQNcMFuApgcWtInTiBagAKGbCLPAMB34a8nXoOTYABIoBAcx1UwJHMQpDz7/DmDvB8MPkGNME0dlwCY9wcusAcP9C8t/RMoRvuQJLJkzDdLlXEyNTmKSQL63YmJlSe6uPh/+fGFne9F0LJYTsPbdgdIiAgIEW1D/huvH8Zp7qo6xScjx6PAJcahBAWQOzMAHYGXu6JQEQmYXEQEphERgGlFhGCCCIFBRItJIhrMJKumCxg96ArGALqDMYIeYEygJxgz6AVGB3qDUYE+YNSgHxgp6A8RPlghIgMrReRglQgPrBZRgDWYLLVgxKAOmCY0QwolACvr4wA/8W96fcz+Ct0CTlxCUpwT8Z47uz0C5DMiUVqUO4g2OWMc16nnQzJ7wfSyOHKTeC2DKuALSiUj8BQWMXIlLcKYUmWdBTn2obGao3iljDeuZLAUHlN8eZlUyaiCRTeRlRb5YspfwrLXXXzCMeY5nIjpMgXYdsUXNnzO4ODEYqPJj9HaZBwn55UhWM+n49RZLwaTDDM+LG3mtPJwlXojq8BSmsNzGWyaC2pls6n1R9l4Vl54ryFp2odxq6XqWfQ0HpcTR0sTKZV7rszAqhXtCVrvIa7IqhqLRv3IHuYASDCiYQbwFWMmvYjacu6csBZytkxowFgZE+lQa2udI4TDXKp7mTGEqLIQ3COAgbISj0ZjxSqPdGylUxZpc5gdXQAsRRKCKOewtJCNNIDAjJ/ftRMiiJ9g4S5CAEoA1DBxN2hzEHw21tTGFLOIhFOIUTHzlpboiCnBNWienh51Qhlkp58zFBHCWtCUQySZL2DuJjcYEwfXyEQxp4Yo+Yqadh1rBCwQSBAM2G6SMMoc7hZBM42YE4wQVKK5uiGUP6s5d2uQpogl0MYR4cg4MpISQE8Z9xHlqJX2qHOf66vkPs5a5kO41B2AzVmNvEzrHjgwolMRtTYbm80w/QYBhFJsUvYOYiERVqvbpBOxvmuT2/QgyW2R3durja5VtpvWTDKjBGZj3DypU1OmnBCD+4t8I4yWewggfiSnT88SQB4hABGgJcqIc4Mk84TDEBrGRK5qT5Q5ZpjggigBSGwZCGJe5TAGZEUAbaU4lNiN+XZKtJymG2wIUFluYM8AQQgC4fNsrFGh5QRsLcbMSUwbMh6ms1fmZ4eEeXaJZENi7gpWzrvqh7qvhAAzihpJbX5YcCvZDWD8oL0HvJW/QxSZaHPdmMUVCUFJaLlGS7wkohpGsBqQkVbNDmOuu/U4YzcMpZaTmroxgF3Leg5LDDNQLYwRXSeZPidz8zoB6Jkor+8AoBoapYOTHR7gogbzBR7Z9w1zYhAUJ3Bu5H+a5T5mcTsvAGt3tYMsAqKD5bn+rDV/mzUv2uhgBzX65AadWY+oEnAAbgwEp1c7KBJnn3vyagTCC5A/Y+uJbyVoWQDI9jrBMRtoftf2breYgImoGb8I9SrLmSw4kcLprhSVvpBa9jQzo+3ZyvTKifzM9vGz8BqkErLAJ4osVlMvsM8W0LYdTuBWHlhu0gi8bJs0H3Suu9bskKcNM2KuctYYgiPOej7m07jURyVHY9e9i9OGAMmI/b4RO5cD24wSO/YZQw4dhCcJASeQBEKXoa0ddokfQrGS9mYIsemhx4dOal6PrPEW6wjqKcWafzZoOv2hkZqx8OAceQlR2qd0iqG9m0FH5pXF1BHV5YPBejNKM25seLNnLnmfCwH1jjUeGMnxc/NmC2fnzuQv1D9l41u1/q75601fbwFiHng6rgyIMLCyqpgfuntD1LvQzMebUdffmWhNbirD14dgjcSL/t16woW62JiqYtmyjLnBZCfsyjc/8zlUvQ902HyN8dPomZqQ48nIbU9q26SxPLAVADOeVUG2/mfw7DNjLH1Pen3PVvqr4oSrigOu30Iqf6rprZ19Q5m9g/+6G04/jree1L1jRSGmLG5E+myvEZrlU+WB/k/w/LIqMnRiCBIcT57M+vEiokLzYz59qFPs1JlEcy9y1UySU6IiITYPa2pSDWAsK5CYKksA8ShqmK/EJPtLMK/wxsLPpZpZCkmrqqzsnccD89l5g254ELqRyn3q6UF2INlluRXYHLbf/bs6Yr5R4oyTnNuYnnxI8c+BaJXFBfM1HNFfKaWEbhkEW/7V40X/RQodacvKydp5UwWswJKR1LB0fCVPEhMYk7PJ4KqstCWWGTJd4Hx4vM36LRjIt9Z/vyg3vL0E8dbCVWQ4LYxoz82eq7+q2S1PEel9RpI4WXzQ/qBl6sjdWGR5DaufD+QFrgZE3qeadiw0LMqwDNS2FFmQMENR7+iKQlsC/bFGsnnDmoGv8SIpnCirlYZlh8JzSW/GS37FjGHszHjRlYOHk1NpnHKCCJ34ZMCb3luxuizsft+j9rDBJnycGFqTV0//rRrUgX2ufZF8sqmyVVxzrdlvZP897fPCv9oFnWO/XI7m9/PK/lTd9BHh291+x9ueP95K3v/CL/HeesKqhyviY6PN8BBvd/hWQ9/MPqsljT5TleNxx8nTlUfen+g8dVIPDo0R1X3m1BgpV0eG+eMfLYyrPnCQTBZBsxnP6mq9HAh5q+CLCCa9uPNC7R2M/2s9m3MD/SVah7nykE9E9QLd96HGxTfF6gC/oCOmFQ4AF2fEsPUv+Wkbz5yR9MOk6CwQpHenkt4PglgxUkKyQ3IYSDK4AfpzpLQSpIiDAcTAUG9QMMKo69VkqcTDJsz2bRg0ZNDYmqEcSEkJkhIcYgcIjKKNGlTC9l2trifSWqBONU/7fXQluRv9dR5/D/0+mV0cG9bYkTOzFxesSrnTA82+fDC/0TA47qT7zjgwODaMx+L4MBdNu7mpnVxMXt70fI1o+uWNi5EljWPqUs1fpEd4Jr2uV+0K3hXSHdx9j1StDuoO2RW0GyxVP0viuYDz+HyANF7yhRWBRa74v8/3PRUWSxQWdYn5eE4zHmjgaDOJyR3KXi8vjQ9/weIGYuOYFaX/i7omIhhdb2gY1UOm7iiDlPcDHXTKzzBtfBdR20a068DFswhJ4qWT4mqZtIhpLKOYLnF/5EQ0R1H+g/yUX0o7xF9Jd8f1GSOm2HjOjv3t8Z3U9Dl/4QD/eVxLOXISSomAsYbiEUvLsIxAYpEUy6j0oE51J21GPNVfJEco6iZVgG3kWgyok5JSMpyBCgSEZiEhgKK4FKqaIOW4ml1Ki+XIjMXc4a8BTXQJRSKtlpJS0ogmqfMokrWQFpFAEDIRXZ2iQNgnCwjSyxRGLKOWNM9E3kzGcshbbcWyO93R6bSDkG1AVAFdRmmpQXMXsdTgTf35/jgSiVDRR0a0P8I0BtRCS3EG4RRhSlEzWnyBRoo0roVyWqm/sShVTgfRrDnTaT1IWalrWIN5kkqh9VYHOYWoC+h0Ozx9FUfRneoNVOc9CYLuj2ykfwSulnfykHgzxXTHU2LJwQgKIyzF/jQsGOam3fzN8yQ5Nq4CV1ZSU4nOoQxdb9cMZVbWyb8EkVwdh3tiqV5tw2aZ3maSiVsukKT0AMewpskmRV+784I8Inehoo63KSPKXwuhnBUbdUZsVYQqUHCuUiTBEq7hGADBBKWPy7Qu8JQuwzqknj1TLu+OtArNSZg3WjDW+WE/X4wthhidSmdQ+arqZAqk4AQUipRcfEiuQh/NX4FRNMLpyc7o2Ogyi9NttToLcZwp7rGG1SCNRLMy/LyGkySmdUgnXa44CkadqFpGkFJObLBOCMNaC7ZY9TgRG6xWbG1TLbbpfHpEO3uZeZV55Gws7SaFkl70csVeqgn7MpjxXXmscu4IKpsK+yrZJrkFrJZ0BdFJARJJRbQYs2KWF9NyREaAGgWKAjI/jojNCGLVWMNiCoNdAnWWJlJkkUW7ixXzszrVauCLHJmC3FLPE77I908HGSVEBIarebVLxsiMFlekVeGaQOuwTjBgA495pU1JRFR0gKr7RquFUfrHUPrjXthSaS4pthZ7vgb5OP/BzlQt0vqkoFlKFCHTYI1MYcTYgrFRkP0kt8pXONodFRXpmcpMe46Qk2BLjZiYolSrbix03XXvmRAfkK5Mt1cK54RyE+e653qtTSV7CrHr+kUq3gUQp3i/Gfo02f2i9LAlgUpFnVT0bpBnUKGPO9V9fCo/NaRjHiZoUQrSNXlEK9ZsS1xjFQl0teLDK4Ycjyo5Olnoa0sX0u3ukKCYGJvWvk7j/jtyeBVy+lcIaaY1D5Po11+j1oDrsrf+wQxZtWzGgzBVeLw/gbfoLTz77GXe+t/rIVkRUPxzZs3X8VW2sQy7IjPn080L5vnMlLaOykqTpo3Nmst/I2vtqtiUnrNKkjLXnVg1piXrp+Pfi4YRmhFY52xqCaXmuAeHKUcMJzQT3nncFXFZkYPCtF9+Gh3LNfLTKGpRbGrkoJis5L0TH30rq8QXsWfdunNlP1DLbDsrlTaZU7m3UuuOTh12rz13I7HH6B4woDF1kWWopSt1jP+Y1CF/uIfWDDmo6RXyd2zDreKR6v9NtUxNrfWv/XVexkdVA/0bAkJHpY6tu9Xmn7X03zUuw61P6nOGTPlcc8lkz/DLnVVTLhnZb6Rh7Jx1cw7tNjwzPO1lCDPJ2n64KaqStFzREjlNZdGjLcuTyvCWzWWbS/+IjHsf1KtPQOoYy9ikVsuIihEBc6e5mJxdPz5HsFau00lGA0DS6Ofnz50HM/LeoMxm6gbggH6Mz4RprXFP9ZPIdnYsWtjRZfRw7QvbOxZ2G0uMXZkhv21acG9hO0T+kKRPdztLHP9kaly7e4yamIfLykb1mAg6Hv4D7nralaH5p8Rh9cQ25z4YHYbIE8KqSkqqwmoBDd4uE2CI/xCA3EHZxIDGxgFkgKURAzgMAN1Ab8HYndCV0JbQ/sDYDnB++91zCqqXlSVusp7WO7lwnxKZ64dw77Iy68mkLZxlQwHvNrkcLQ8choAH7/wvRHCxPcWpeyU1Ph6p+4eazvM/3g+J7ZW11AtZjjf365ki5kH9zvDAxzvenJbnJf3w24Uc98lbK30/mj6kn+aSqNRYKrpUb6e0GrhorWlpqbFehL+F5/YEpzlXmlZOd8OxHau5H7gYDiSrV3M+0bMyQwT8M2eUxh/VHo2XGs1tgQvSfoy9INxam8BK+Qe61HLplE2BTfGF7J2ADtvZuppxX55F7Y7bbS136Ttww/Sn0Iawsk35J4XesokS7gXerak9bT8dEnLWdjb9jP0MTRUVvw30ja22S7dW+VYdldr72NH7Olfas7F8Qd3IXl09lH4tGlI9r3pc0OvAGnJKn3m/mv7zWqv90Oqg1cgv20+5OniC+ogAq9KvOvVQQZ4ps9AWkRfRJphcYkiSryKF1mmRC/S77ZGynjGHD7b99cUdi51fu9ZIA9DK2g3nvYfN9bDb8rWlthsLE/lBmftcqQnant3hXEIrC0lP+0X2+Hdb3dd1G3ht6PDcJTSt2Jg4W0nhK2y5WIzC9ASekDW/89ASTTdxobPpRqiJYXl3EWNVN37admXd0SWR0bJyjc/hytVJKoi81v9d+Lv+Pt++NLz4toujHij8GWLn/dMC+34zpdy/wnbuM1uDC3xHH1Q2AMpSOhPT1IcVPDOnOFdTNOwze7n1a/kOcXT4h3pvu5lrKDSX5/fSPrk2KlXe7jdzWNzXkFOUMXfljVxjkWlzoSnPeGJ7+ryl4O1zOPITo6t0Ra8EQ+3u0ROdhhQMpiWH57W6/vvq23fOWa1zO4bCwJrVvLV5KFVZ59ky2dmvors39cCVmOLZuPVtWlpt0sIf5rbzUDxpwgRwWCL4CeO3iY+wRhATjtY9lRcPKTTmxCrX8pcOFp55wmbcxHn4ZgCgH+PDoy47z+SZC62bCi15lro6c561cJNlcn9dXZ65wLq50NqKpOeNaZ3zYecP6Qxjhs8PspoHO2NncHtr8qPbS/AJieTkjOMBMcSTHHuCGgKfBF9r373rap5/WRd69AiZsfvRwy7cjZki6s6L+XZYu7RNzvvvOdl+oZjrAJ8po/dY9mzduHn7mP4Cy+lzl+QAe6xnLp3b7Q/e4OazZ8+dbQ6OfHi+dX5rQSsJ5DuDFwAayeF/lalT07zrEl0GhG72Ns85F+jxDN42x2PxfI/PyHjZLoEUVHLo3+BPf6tK+qLJ/GVzctVvn367AZJH1xYWFRXKv+wueLSQiWM8/ugW4AXqeHx6bxcAfJiNn6o0fvCiGcj7wROTMIkaxQJMyOITAxLUSHZP+iA45sh83IGG6V6qL5qMI4vQYzRwfwMWgs+yJ6konY6UpHQm3kj4DMxD+RupLYj69M36Cp+EXxnJv00Nt3672BVCc2j1SY0AwAAJxzIC4C8iRnkKfGK7qIf89hzwL9TfEoCGDx/wzCMoHfUBru8CoDzZd9mKoyS8gfqQZlRvIhs+5odHQIVOAgB7agbwN1KhAv6ukv9yiHBOALNQIJAgAoOAgAGbH4fDBAok4BZoYCBZYCEUeholIMAoQGRicXkITINAAA/rBRJksF9AwMNZPw7fFShQw1uBBp5AAgt9CWGIEgi4Bt2t3hJoglKYp4gWO5eFtIru/gbPjU7paHj4H1KODaJQ58sbX9BBUtFNvvkLkRMuYSs+J+ODpkHRJ6zAkgpE/fV0crJulcV2sBq8JdDETi8F5nlltNi5lmmV+fnf4LnRqeCZ2yv/IeX44YICxbmC/4t0lZ7pij3f/AUi3An6cMJW8Ek4NKerKOjlrVVgSREa6P2VE3mXq0qU+ez26UF48D332PsqR648+QoUKlL8495SZspVqFSlWo1adeo1aNSkWYtWbczlG8RH7A51se5ygM577CbHYvYUkKu4DKyz0H/XvhBOi6PRjZ6Cd+CFR76zDTCXtfQnzCpusxs/k5faQXeUgbFcoTYLK+idX8hLVfFX8oW89+wNd3v5GWLJq4ljJTdPbYMZ5jokAaq0IGfG+bqekBcN1GL5ODNJgkwLLZKFRX51WVDMDdgnThuePaFNq4MBAAA=') 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啦。
首页布局跟小程序如何配置Iconfont—小程序入门与实战（七）相关推荐
- 微信小程序 php配置,微信小程序的配置
我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包含了所有配置选项的简单配置app.json{ "pa ...
- 微信小程序 php配置,微信小程序 教程之小程序配置
微信小程序――配置 以下就是小编对小程序配置的资料进行的系统的整理,希望能对开发者有帮助. 我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置 ...
- 用eclipse来运行带参数的命令行程序，配置命令行程序的参数
以上从网上找了点资料:右键点主类名 --> 运行--> 打开运行对话框--> Main(主类)--> 右边Arguments(参数) 点他以后然后在下面Program argu ...
- 计算机和程序 微课,Spring Boot从入门到实战(微课视频版)
导语 内容提要 本书从Spring和Spring MVC的基础知识讲起,让读者无难度地学习Spring Boot 2.为更好地帮助读者学习,本书以大量实例介绍了Spring Boot 2的基本思想.方 ...
- oracle删除重新创建监听,重新配置监听程序
本步骤完成以下操作:删除并重新创建监听程序,配置监听程序的可执行文件的路径. 10.1.1 删除监听程序 (1)打开"开始"菜单->"程序"->&q ...
- 《Android 开发入门与实战（第二版）》——6.6节配置改变
本节书摘来自异步社区<Android 开发入门与实战(第二版)>一书中的第6章,第6.6节配置改变,作者eoe移动开发者社区 组编 , 姚尚朗 , 靳岩,更多章节内容可以访问云栖社区&qu ...
- 小程序高级电商前端第1周走进Web全栈工程师一----小程序注册、开发工具推荐、《风袖》首页布局详尽分析、Webstorm开发小程序必配配置、mock数据...
接下来开启一门全新的课程的学习,其实这是去年6月份所记录的,只是木有公开,然后到目前为止已经间隔了快1年没管了,基本上是已经快放弃的节奏,但是呢它又是我一直特别想学习的,所以决定公开,鞭策自己得继续前 ...
- 微信小程序（看文档写实例三）微信小程序课堂宝APP实现整体界面框架及首页布局
一.首页布局简单思路 回顾上一篇博文,首页的内容主要有轮播图,横向滑动菜单以及菜单对应的view,横向滑动菜单有签到.课堂测试.模拟测试.课堂提问.答问记录五个选项,当点击选项时更新显示view.由于 ...
- 微信小程序----第二天（小程序 - 模板与配置）
一.WXML 模板语法 WXML 模板语法 - 数据绑定 1. 数据绑定的基本原则 在 data 中定义数据 在 WXML 中使用数据 2. 在 data 中定义页面的数据 在页面对应的 .js 文件 ...
最新文章
- 什么是 Design System
- 爆料！亦庄地区数据中心将面临史上最长群体”限电“
- javaweb_JSP 的 include 指令的程序
- 线性规划之单纯形法(1)
- php面试中的问题,十个值得深思的PHP面试问题
- javascript学习系列(19):数组中的Array.from方法
- mac电脑快捷键（持续更新）
- Java往前拼接,利用Java程序将字符串进行排序与拼接
- 纯干货分享 | 考PMP留下来的一些重要资料（收藏下载）
- Linux在Ubuntu下安装TFTP
- 技术中心部门薪酬和考核体系
- 华为服务器忘记系统密码忘了,服务器忘记密码重置
- js判断用户是第一次点击还是第二次点击
- LFI获取WENSHELL
- java并发机制_Java并发机制的底层实现原理.PDF
- 如何不通过系统升级来安装window10正式版？(特别针对Xp用户)
- 七月算法深度学习笔记4 -- CNN与常用框架
- 双卡手机发送短信 - 坑爹的双卡双待
- python实现UDP
- 电影天堂React Native客户端V2.0