简单的首页开发实践
发布于 3 年前 作者 xzhang 3393 次浏览 来自 分享

继上次利用微信小程序开发者工具进行了简单的排版,做出一张可爱的恐龙学院电子校园卡后,这次继续深入学习,对首页开发进行了简单的实践。

1.首页相当于一整个盒子模型,每一个板块都相当于一个小盒子,我们第一步要做的就是先把最小的盒子设计好,图片、字体的内容、大小以及美化通过类函数联系.wxml和.wxss都能够很简单地设计出来。

2.当把小盒子的内容设计好之后,就要开始设计他们的父容器将所有的子盒子包裹起来,这就需要利用很多的函数嵌套,在这里由于函数数量过多,如果代码之间没有缩进将会让人看得眼花缭乱,我们只需要选中代码并且右键鼠标,选择格式化文档,就能轻松地让代码具有缩进,代码结构就一目了然,犯错的概率就会下降。

3.当大体的父容器和子盒子结构都设计好后,就需要利用flex来对子盒子在父容器进行排版,有兴趣的小伙伴可以自行去flex的网站进行了解和实践:https://coding.imweb.io/demo/flex/index.html。flex结构可以缩减很多代码,例如我们不再需要在每个子盒子进行margin设置,可以直接利用flex中的justify-content:space-around就能让上下左右四个子盒子之间保持适当的距离,如果你只想保证同一行的子盒子之间的间距,也可以使用justify-content:space-between就能实现,使得子盒子在父容器之中可以更好的排版,还有许多功能我就不一一赘述了,大家可以自行探索。

4.除此之外,position也是一个十分好用的定义位置的函数,relative用于设置参考系,absolute用于确定绝对位置,方便于子盒子在子盒子中的位置定位和排版,例如名片的制作就运用了position来进行图片之间的定位。

下面是我的具体代码:

.wxml部分:

.wxss部分:

程序运行结果图(手机上实际的):

由于没有合适的图标样式,所以下方图处有一点难看,违背了小程序要美观的原则。除此之外,还有一点要注意的是,图标大小的设计尽量使用百分比作为单位,如果以像素px做单位,那么在不同手机型号上看到的效果是不一样的,也许你在开发者工具上看起来很不错,但只要你的手机机型和开发者工具里设置的机型不一样,图片就会出现空缺、位置不正确的情况。

以上就是我这次的学习心得分享,希望对大家有帮助。

3 回复

好好学习,天天向上。加油~

我觉得挺不错的hh,tabbar栏再好看点就更好了

社区大佬真多 我算是学到了

回到顶部