微信小程序-模版详解＜template＞

阳光穿透心脏的1/2处 2023-02-27 05:45 3阅读 0赞

[https://www.jianshu.com/p/cfca91e9a78b][https_www.jianshu.com_p_cfca91e9a78b]  微信小程序-模版详解＜template＞

[https://blog.csdn.net/max\_1414/article/details/94580241][https_blog.csdn.net_max_1414_article_details_94580241] 微信小程序template模板动态传数据

[https://www.cnblogs.com/xyyt/p/9559326.html][https_www.cnblogs.com_xyyt_p_9559326.html]

**前言：**

除了component，微信小程序中还有另一种组件化你的方式template模板，这两者之间的区别是，template主要是展示，方法则需要在调用的页面中定义(基本没有事件方法)。而component组件则有自己的业务逻辑，可以看做一个独立的page页面。简单来说，如果只是展示，使用template就足够了，如果涉及到的业务逻辑交互比较多，那就最好使用component组件了。

一个模板文件中可以有多个template,每个template均需定义name进行区分，页面调用的时候也是以name指向对应的template;

template模板没有配置文件(.json)和业务逻辑文件（.js）,所以template模板中的变量引用和业务逻辑事件都需要在引用页面的js文件中进行定义；

### 一、模版创建 ###

建议单独创建template目录，在template目录中创建管理模板文件。

由于模板只有wxml、wxss文件，而且小程序开发工具并不支持快速创建模板，因此就需要直接创建wxml、wxss文件了，一个template的模板文件和样式文件只需要命名相同即可。如果模板较多，建议在template目录下再创建子目录，存放单独的模板。

1、首先在pages文件夹中新建一个template文件夹，文件夹中新建一个template.wxml文件

<template name="msgItem">
      <view>
        <text class="info">This is template.wxml文件，我是一个模板</text>
      </view>
    </template>

2、接下来我们就给模板增加样式文件，在pages/template文件夹中新建一个template.wxss文件,然后对模板文件，添加一个简单样式。

/* pages/template/template.wxss */
    .template_style{
      font-size: 30rpx;
      color: #000000;
    }

### 二：模版使用 ###

1、然后在我们要使用的wxml加载

<import src ="../template/template.wxml"/>
    
    <view>This is index.wxml</view>
    
    <template is="msgItem"/>

### 2、当前页面导入模板样式 ###

/**index.wxss**/
    @import "../template/template.wxss";

`注意`：  
`（1）index.wxml中template 标签的is属性与template.wxml中template 标签的name属性值相同`  
`（2）index.wxml文件中要通过import标签声明需要使用的模板文件`

运行效果：

![format_png][]

### 然后在需要导入的页面，index.wxml里导入 ###

### 这儿传参的话，data里的参数必须加  ...   ,然后在JS里以字典方式传入  ###

`注意`：  
`在<data="{ {'这是一个参数'}}">中传多少个参数，模版里才能获取多少个参数，比如模版需要2个参数，传参的时候要逗号隔开，如：<data="{ {data1,...data2}}"> `

Page({
     
      data: {
        item:{
          titleTxt:'热门推荐',
          titleSmail:'好看不'
        },
        test:'测试'
      }
    )}

###  新建template目录，新建template.wxml ，这是我们的模板存放 ###

<template name='title'>
      <view class='like_txt'>
        <view class='like_txt_title'>{
       {titleTxt}}</view>
        <view class='like_txt_title2'>{
       {titleSmail}}</view>
        <view>{
       {test}}</view>
      </view>
    </template>

[https_www.jianshu.com_p_cfca91e9a78b]: https://www.jianshu.com/p/cfca91e9a78b
[https_blog.csdn.net_max_1414_article_details_94580241]: https://blog.csdn.net/max_1414/article/details/94580241
[https_www.cnblogs.com_xyyt_p_9559326.html]: https://www.cnblogs.com/xyyt/p/9559326.html
[format_png]: /images/20230209/6108de90bc6a4e40988700477a9fed53.png