怎样使用小程序template模板

怎样使用小程序template模板，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

专注于为中小企业提供做网站、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业亚东免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

模板的基本使用

创建模板文件

在page里面创建一个template文件夹，可以利用小程序开发工具【新建Page】快速创建文件

注：调用模板的时候，起作用的只有wxml和wxss文件，模板中的JS文件是不起作用的。模板中的逻辑都要在调用的文件中处理。

创建文件可根据自己项目设计，并非固定如此

定义模板

在

使用模板

在wxml中要使用模板，有两步

1）、声明，关键  import 标签

2）、使用，关键  is属性

这里is的名字和模板name命名的保持一致

模板的wxss

如果模板有自己的wxss，如我们的template.wxss文件，则需要在调用模板的文件（如示例的index.wxss）导入，否则不会生效

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

归纳：

• wxss导入wxss中

• wxml导入wxml中

• js无效

模板的数据传递

【调用的wxml】通过data给模板传值

item是在调用的js中定义好的

Page({
  data: {
    item: {
       title: '模板',
       msg: 'this is a template',
    }
  }
})

在模板直接使用

    
        
            {{title}}: {{msg}}
        
    

如果有传递多个参数，则用逗号隔开

模版文件中的事件处理

模板使用的是【调用模板的js文件】里的事件。

• 定义在自己的template.js并不会生效

    
        
            {{title}}: {{msg}}
        
    

handleTap() {
    console.log('template 模版 click')
  },

优化模板事件

如果是模板公用的方法，在每个调用的文件都要把方法写一遍，会有很多重复的代码，我们可以如以下改进一下。 （虽然template模板不能直接使用自己的js，但是我们可以把方法统一写在template.js文件里，然后在使用模板的文件js里面引入一下。）

在任意js文件统一定义方法

const template = {
    handleTap() {
        console.log('template 模版 click')
    }
}

export default template;

在需要使用的地方导入即可

// index.js
import template from '../template/template';

Page({
  handleTap:template.handleTap
})

关于js文件中的数据传递

在template.js里可以直接拿到index.js文件的整个data

template模板和Component组件的异同

相同点

• 都是为了实现代码的复用

• 都不能单独呈现，必须依附显示在页面

区别

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

Component组件：有自己的业务逻辑，由4个文件构成，与page类似，但是js文件和json文件与页面不同。

选择

• 如果只是展示，使用template就够了；

• 如果涉及到的业务逻辑交互比较多，最好使用component组件；

import 的作用域

import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。

C import B import A

//C能用B，B能用A，但是C不能用A

关于怎样使用小程序template模板问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。