微信小程序-模板的定义和使用

WeChat小程序交流（QQ群：769977169）

模板定义时，主要是指定模板名称，如name="template"；且在使用时指定模板名称，如is="template"。

模板既可以直接定义在页面xxx.wxml，也可以在其他的xxxTemplate.wxml中定义后，再通过import导入使用。

1、创建temple目录：在需要创建的目录下创建——鼠标右键——新建文件夹——命名，如：temple

2、创建temple文件

2.1）创建temple.wxml文件：选中temple目录——鼠标右键——新建文件——命名，如：temple.wxml

2.2）创建temple.wxss文件：选中temple目录——鼠标右键——新建文件——命名，如：temple.wxss

方法1，直接定义在页面的xxx.wxml中，并使用

方法2

在templateView.wxml中定义，并通过import引用使用

在templateView.wxss中定义样式，并通过import引用使用

.templateStyle{
  color: #6495ED;
}

在template.wxss中引用模板样式

/* pages/modules/Template/template.wxss */
@import "../Template/templateView.wxss";

.textStyle{
  color: #FF1493;
}

在template.wxml中引用模板，并使用

import引用

  

在template.js中定义的数据

  data: {
    templateArray: [{company:"VSTECS", name:"devZhang"},
    {company:"VSTECS", name:"iOSZhang"}],
  },

使用效果图