回复 刷新

暂无评论

微信小程序开发实战(5):组件复用利器-模板

在讲解模板之前,我们先看一个例子。布局代码如下:

<view style="display:flex;flex-direction:row"> <view class="bc_green" style="width:100px;height:100px" /> <view class="bc_red" style="width:100px;height:100px" /> <view class="bc_blue" style="width:100px;height:100px" /> <view class="bc_yellow" style="width:100px;height:100px" /> </view> <view style="display:flex;flex-direction:row"> <view class="bc_blue" style="width:100px;height:100px" /> <view class="bc_yellow" style="width:100px;height:100px" /> <view class="bc_green" style="width:100px;height:100px" /> <view class="bc_red" style="width:100px;height:100px" /> </view>

根据我们前面讲解的知识,很容易看出,这段布局代码的作用是绘制两行带背景色的方块,效果如图1所示。

在这里插入图片描述

图1 绘制两行带背景色的方块

我们的目的并不是回顾如何绘制带背景色的方块,而是要观察这段布局代码。很明显,这段布局代码出现了大量的冗余代码。绘制第一行和第二行方块的布局代码除了使用的设置颜色的样式不同外,其他的代码完全相同。如果在布局代码中,这种情况如果非常多的话,代码将不太容易维护(因为相近的代码太多,要修改需要统一修改),所以就需要将类似的布局代码进行包装,然后直接引用包装后的代码即可,这就是本节要介绍的模板。

模板使用