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

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";

版权声明：本文为rlwb原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/rlwb/p/8994263.html