小程序自定义模板的正确使用方式

Posted 2020-11-02 rlwb

最近在做小程序项目开发，遇到一些公用的模块就顺便使用了自定义的模板，渲染模板数组的时候遇到了一些问题：

template.wxml

<template name="primary">
  <button class=‘btn-class‘ type=‘primary‘>{{button.con}}</button>
</template>
<template name="warn">
  <button class=‘btn-class‘ type=‘warn‘>{{button.con}}</button>
</template>

单个模板文件，可以定义多个template，只需用name区分即可
index.wxml

<import src="../../component/template/button.wxml"/>
<block wx:for="{{buttonList}}" wx:key="unique">
   <template wx:if="{{index%2===0}}" is="primary" data="{{...item}}"></template>  
   <template wx:else is="warn" data="{{...item}}"></template>  
 </block>

通过使用es6的展开运算符...，代替item.button

模板的样式可以在模板.wxml同级目录书写，通过在app.wxss中 *@import* 全局引入，这样可以避免在每一个需要模板的地方都引入模板wxss文件。

/**app.wxss**/
@import "component/template/button.wxss";