微信小程序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 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
JQuery获取浏览器窗口内容部分高度的代码
Feb 24 Javascript
jquery无法设置checkbox选中即没有变成选中状态
Mar 27 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
JavaScript隐式类型转换代码实例
May 29 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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
php检测文件编码的方法示例
2014/04/25 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
syb养殖创业计划书
2014/01/09 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
上级检查欢迎词
2014/01/18 职场文书
优秀班干部事迹材料
2014/01/26 职场文书
护士的自我鉴定
2014/02/07 职场文书
党员创先争优承诺书
2014/03/26 职场文书
节水标语大全
2014/06/11 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
小学班级管理心得体会
2016/01/07 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
聘任书的格式及模板
2019/10/28 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
vue项目支付功能代码详解
2022/02/18 Vue.js