专栏首页极客起源小程序开发实战(5):组件复用利器-模板

小程序开发实战(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 绘制两行带背景色的方块

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

模板使用<template>标签定义,例如,将前面输出一行带背景色方块的布局代码封装中模板中的代码如下:

<template name="rowSquares">
  <view style="display:flex;flex-direction:row">
    <view class="bc_{{color1}}" style="width:100px;height:100px" />
    <view class="bc_{{color2}}" style="width:100px;height:100px" />
    <view class="bc_{{color3}}" style="width:100px;height:100px" />
    <view class="bc_{{color4}}" style="width:100px;height:100px" />
  </view>  
</template>

<template>标签中使用name属性指定模板名称,相当于函数名,需要通过该名称引用模板。既然是模板,就需要往里面传递参数。color1、color2、color3和color4是需要往里面传递的变量名称。不过要注意,这几个变量可不是直接引用的变量,而是要通过<template>标签的data属性传入模板中。

引用模板仍然需要使用<template>标签,通过is属性指定模板名称,通过data属性向模板传递参数。例如,下面的布局代码引用了前面定义的rowSquares模板。

<template is="rowSquares" data="{{color1,color2,color3,color4}}" />

其中color1、color2、color3和color4是4个变量,代码如下:

Page({
  data: {
    color1:'red',
    color2:'green',
    color3:'red',
    color4:'blue',
  },   
})

这里要着重说明下,data属性传递的4个值,并不是直接将这4个变量传入模板,而是直接指定rowSquares模板要使用的变量,因此,传递变量的顺序无关,所以使用下面的布局代码引用模板,效果是完全一样的。

<template is="rowSquares" data="{{color3,color4,color1,color2}}" />

那么这就带来一个问题,如果要多次引用模板,每次引用,4个方块都使用不同的背景色,按这样直接在data对象中直接定义变量,就意味着所有的引用都会拥有同样背景色的方块,这并不是我们需要的,因此,我们需要另外一种定义和使用变量的方式。

其中方法也很简单,将color1、color2、color3和color4封装在一个对象中即可,例如,下面的代码在data中定义了两个对象变量:colorItem1和colorItem2,每一个对象中分别定义并初始化了color1、color2、color3和color4变量。

Page({
  data: {
     colorItem1:{
       color1:'green',
       color2:'blue',
       color3:'yellow',
       color4:'red',
    },
    colorItem2:{
       color1:'red',
       color2:'green',
       color3:'red',
       color4:'blue',
    },
  },   
})

那么问题来了,这种形式如何引用呢?其中直接向rowSquares模板传递colorItem1和colorItem2即可,只不过这两个变量前面要加三个点的省略号(…),表示rowSquares模板需要使用colorItem1和colorItem2中同名的变量(color1、color2、color3和color4)。例如,下面2行代码引用了两次rowSquares模板。

<template is="rowSquares" data="{{...colorItem1}}" />    
<template is="rowSquares" data="{{...colorItem2}}" />

我们还可以利用以前学的block wx:for来扩展模板,让该模板不仅可以设置方块背景色,还可以设置方块的数量,模板的代码如下:

<template name="rowCountSquares">
  <view style="display:flex;flex-direction:row">
    <block wx:for="{{colorArray}}">
        <view class="bc_{{item}}" style="width:100px;height:100px" />
    </block>
  </view>    
</template>

从rowCountSquares模板可知,该模板只接收一个参数:colorArray,该参数是一个数组,定义了不定数量的颜色名称。下面先定义如下4个变量,每个变量中都有一个colorArray变量,用于定义颜色名称。

Page({
  data: {
    colorCountItem1:
    {
      colorArray:['green', 'blue', 'yellow', 'red']
    },
    colorCountItem2:
    {
      colorArray:['blue', 'yellow', 'red']
    },
     colorCountItem3:
    {
      colorArray:[ 'yellow', 'red']
    },
         colorCountItem4:
    {
      colorArray:[  'red']
    },
  },   
})

现在使用下面代码引用4次rowCountSquares模板。

<template is=" rowCountSquares " data="{{...colorCountItem1}}" />     
<template is=" rowCountSquares " data="{{...colorCountItem2}}" />     
<template is=" rowCountSquares " data="{{...colorCountItem3}}" />   
<template is=" rowCountSquares " data="{{...colorCountItem4}}" />

我们会看到,每一行的方块数都不同,颜色也是交替出现的。如图2所示。

图2 通过模板实现的效果

本文分享自微信公众号 - 极客起源(geekculture),作者:geekori

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序开发实战(12):滑杆组件(slider)和form组件

    step:Number类型,默认值是1,表示滑杆滑动的步长,取值必须大于0,并且可被max - min整除

    蒙娜丽宁
  • 微信小程序开发实战(3):条件渲染

    其中wx:if是一个控制属性,condition是条件表达式。如果condition的值为true,则输出<view>组件中的值。如果有多个条件,和if语句的条...

    蒙娜丽宁
  • 微信小程序开发实战(1):容器组件

    本文主要介绍了滚动视图组件(scroll-view)的各种常用功能,例如,垂直和水平滚动、滚动事件等,并通过例子代码来演示这些功能的使用方法。

    蒙娜丽宁
  • css基本语法及引用方法

    选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值。代码示例:

    Devops海洋的渔夫
  • “眼睛成长记”(二)---闭上双眼

    内部析构函数释放:在VideoCapture类被销毁的时候来释放相关的空间。此种方式的空间管理交由OpenCV去管理,内部使用了智能指针和引用计数的知识。

    视界音你而不同
  • ANSI Common Lisp 第二章习题解答

    本文是个人对第二章:欢迎来到 Lisp——ANSI Common Lisp 中文版 一文中习题的解答。

    mzlogin
  • 2. Linux-3.14.12内存管理笔记【系统启动阶段的memblock算法(2)】

    memory:表示可用可分配的内存; 结束完memblock算法初始化前的准备工作,回到memblock算法初始化及其算法实现上面。memblock是一个很简...

    233333
  • js实现带框拖拽

    星辉
  • Geoserver2.11矢量切片与OL3中的调用展示

    GIS的底图一直使用金字塔技术进行切图,使用户能够快速访问指定级别的地图或者影像。但是切图本身是一张图片,无法进行交互。于是又引入了矢量图层用来显示矢量点线面,...

    lzugis
  • salesforce lightning零基础学习(三) 表达式的!(绑定表达式)与 #(非绑定表达式)

    在salesforce的classic中,我们使用{!expresion}在前台页面展示信息,在lightning中,上一篇我们也提及了,如果展示attribu...

    用户1169343

扫码关注云+社区

领取腾讯云代金券