微信小程序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 相关文章推荐
FireFox JavaScript全局Event对象
Jun 14 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
jquery实现弹出层效果实例
May 19 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
Koa代理Http请求的示例代码
Oct 10 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 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
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
JavaScript修改css样式style
2008/04/15 Javascript
jQuery select的操作实现代码
2009/05/06 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
python通过floor函数舍弃小数位的方法
2015/03/17 Python
python实现对一个完整url进行分割的方法
2015/04/29 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
python基于opencv实现人脸识别
2021/01/04 Python
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
西班牙在线药店:DosFarma
2020/03/28 全球购物
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
本科生详细的自我评价
2013/09/19 职场文书
函授本科毕业生自我鉴定
2013/10/16 职场文书
毕业生就业自荐书
2013/12/15 职场文书
高三地理教学反思
2014/01/11 职场文书
社会保险接收函
2014/01/12 职场文书
软件售后服务承诺书
2014/05/21 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
教师考核表个人总结
2015/02/12 职场文书
童年读书笔记
2015/06/26 职场文书