小程序如何写动态标签？

在web开发中，尤其是当我们使用react开发项目时，我们可以很容易地动态定义标签(jsx)。

Constprops={ID : ' '，类名3360 ' '，数据-A:' '}按钮.props }/复制代码动态配置标签的好处是所有逻辑都在JS端控制，我们的模板非常规范，方便后续的维护和更新，片段模板也能很好的控制，可以根据使用场景方便的配置props。

在小程序的开发中，类似的功能无法实现，导致我们的动态标签通常都是非常冗余的，所有冗余的属性都是在结构生成后才显示出来。

l, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">以button为例，我们知道button在小程序中有非常多的属性

如上所示，这里只是列举了一部分的属性

动态模板

我们的button动态模板写下来应该是这样的

配置

Page({  data: {    option: {      ...    }  }})复制代码

<button  size="{{option.size || 'default'}}"  type="{{option.type || 'default'}}"  plain="{{option.plain || false}}"  value="{{option.value || '按钮'}}"  ...  .../>复制代码

调试工具的输出结构

<button bindtap='' size='' type='' plain='' disabled=false open-typ='' hover-class='' .... />复制代码

可以看到调试工具中输出的结构就会变得非常冗余，降低了开发效率，这种冗余的模板输出搞久了会吐的好吧。

可以使用模板语法区分不同场景的button，我知道会有很多这样的声音，但那不是动态模板。

解决问题

那要如何解决输出结构不冗余呢，说了这么多终于到了重点，其实真的只是一个很小的技巧，我的开发经历告诉我这是有效的，你也可以试试，将默认值统统换成''，改版后的模板如下

<button  size="{{option.size || ''}}"  type="{{option.type || ''}}"  plain="{{option.plain || ''}}"  value="{{option.value || '按钮'}}"  ...  .../>复制代码

这时你得到的模板就是一段漂亮的结构

<button value='按钮' />复制代码