微信小程序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 相关文章推荐
JQuery 1.4 中的Ajax问题
Jan 23 Javascript
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 Javascript
JavaScript Promise启示录
Aug 12 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
Aug 23 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 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中使用gettext来支持多语言的方法
2011/05/02 PHP
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
Javascript模块模式分析
2008/05/16 Javascript
js中判断控件是否存在
2010/08/25 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
在Python中定义和使用抽象类的方法
2016/06/30 Python
python模块之paramiko实例代码
2018/01/31 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
酒店副总经理岗位职责范本
2014/02/04 职场文书
诚信考试标语
2014/06/24 职场文书
促销活动总结怎么写
2014/06/25 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
就业协议书怎么填
2014/09/15 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang