微信小程序template模板与component组件的区别和使用详解


Posted in Javascript onMay 22, 2019

前言:

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

一. template模板:

1. 模板创建:

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

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

微信小程序template模板与component组件的区别和使用详解

2. 模板文件:

template.wxml文件中能写多个模板,用name区分:

<template name="demo">
<view class='tempDemo'>
 <text class='name'>FirstName: {{firstName}}, LastName: {{lastName}}</text>
 <text class='fr' bindtap="clickMe" data-name="{{'Hello! I am '+firstName+' '+LastName+'!'}}"> clcikMe </text>
</view>
</template>

3. 样式文件:

模板拥有自己的样式文件(用户自定义)。

/* templates/demo/index.wxss */
 .tempDemo{
 width:100%;
 }
 view.tempDemo .name{color:darkorange}

4. 页面引用:

page.wxml

<!--导入模板-->
<import src="../../templates/demo/index.wxml" />
<!--嵌入模板-->
<view>
 <text>嵌入模板</text>
 <template is="demo" data="{{...staffA}}"></template><!--传入参数,必须是对象-->
 <template is="demo" data="{{...staffB}}"></template><!--传入参数,必须是对象-->
 <template is="demo" data="{{...staffC}}"></template><!--传入参数,必须是对象-->
</view>

page.wxss

@import "../../templates/demo/index.wxss" /*引入template样式*/

page.js

Page({
 /**
  * 页面的初始数据
  */
 data: {
  staffA: { firstName: 'Hulk', lastName: 'Hu' },
  staffB: { firstName: 'Shang', lastName: 'You' },
  staffC: { firstName: 'Gideon', lastName: 'Lin' }
 },
 clickMe(e) {
  wx.showToast({ title: e.currentTarget.dataset.name, icon: "none", duration: 100000 })
 }
 ......
})

备注:

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

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

template模板支持独立样式,需要在引用页面的样式文件中进行导入;

页面应用template模板需要先导入模板 <import src="../../templates/demo/index.wxml" /> ,然后再嵌入模板<template is="demo" data="{{...staffA}}"></template>

二. Component组件:

1. 组件创建:

新建component目录——创建子目录——新建Component;

微信小程序template模板与component组件的区别和使用详解微信小程序template模板与component组件的区别和使用详解

2. 组件编写:

新建的component组件也由4个文件构成,与page类似,但是js文件和json文件与页面不同。

js代码:

// components/demo/index.js
Component({
 /**
  * 组件的属性列表
  */
 properties: {
  name: {
   type: String,
   value: ''
  }
 },

 /**
  * 组件的初始数据
  */
 data: {
  type: "组件"
 },

 /**
  * 组件的方法列表
  */
 methods: {
  click: function () {
   console.log("component!");
  }
 }
})

json配置文件:

{
  "component": true,
  "usingComponents": {}
}

3. 组件引用:

页面中引用组件需要在json配置文件中进行配置,代码如下:

{
  "navigationBarTitleText": "模板demo",
  "usingComponents": {
   "demo": "../../components/demo/index" 
  }
 }

然后在模板文件中进行使用就可以了,其中name的值为json配置文件中usingComponents的键值:

<demo name="comp" />
<!--使用demo组件,并传入值为“comp”的name属性(参数)-->

这样就可以了。

PS:组件中不会自动引用公共样式,如果需要则需在样式文件中引入:

@import "../../app.wxss";

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
分享别人写的一个小型js框架
Aug 13 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 Javascript
Node.js实现断点续传
Jun 23 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 #Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 #Javascript
vue项目中mock.js的使用及基本用法
May 22 #Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 #Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 #Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 #Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 #Javascript
You might like
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
Python使用Scrapy爬取妹子图
2015/05/28 Python
python字符串连接方法分析
2016/04/12 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
python pandas 时间日期的处理实现
2019/07/30 Python
python读取指定字节长度的文本方法
2019/08/27 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
机械专业毕业生推荐信范文
2013/11/25 职场文书
《石榴》教学反思
2014/03/02 职场文书
酒店总经理岗位职责
2014/03/17 职场文书
给市场的环保建议书
2014/05/14 职场文书
离婚案件上诉状
2015/05/23 职场文书
活动新闻稿范文
2015/07/17 职场文书
课题研究阶段性总结
2015/08/13 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android