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

标签：项目开发   地方   mail   ===   模板文件   渲染   bar   运算符   开发   

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

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

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

标签：项目开发   地方   mail   ===   模板文件   渲染   bar   运算符   开发   

原文地址：https://www.cnblogs.com/rlwb/p/8994263.html