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

番薯大佬

已于 2022-06-06 07:01:24 修改

阅读量6.9k

点赞数 1

分类专栏：微信小程序学习文章标签：小程序开发小程序模板模板引用样式引用

于 2018-03-30 11:35:25 首次发布

本文链接：https://blog.csdn.net/potato512/article/details/79755103

版权

微信小程序学习专栏收录该内容

53 篇文章

订阅专栏

本文介绍了微信小程序中模板的定义和使用方法。包括如何在页面或独立文件中创建模板，通过`name`和`is`属性指定模板名称，以及如何使用`import`导入并引用模板及对应的样式文件。内容涵盖了从模板文件的创建，到在不同文件中定义和应用模板的详细步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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中，并使用

<!-- 模板定义方法1 -->
<template name="template1">
  <view>公司：{{item.company}}</view>
  <view>姓名：{{item.name}}</view>
</template>

<!-- 模板使用 -->
<block wx:for="{{templateArray}}">
  <template is="template1" data="{{item}}"></template>
</block>

方法2

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

<!-- 模板定义方法2 使用import引用 -->
<template name="templateView">
  <view class="templateStyle">公司:{{item.company}} 姓名:{{item.name}}</view>
</template>

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

.templateStyle{
  color: #6495ED;
}

在template.wxss中引用模板样式

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

.textStyle{
  color: #FF1493;
}

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

<!--pages/modules/Template/template.wxml-->
<import src="../Template/templateView.wxml" />

<text class='textStyle'>import引用</text>
<block wx:for="{{templateArray}}">
  <template is="templateView" data="{{item}}"></template>
</block>

在template.js中定义的数据

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

使用效果图