微信小程序template模板与component自定义组件的区别和使用
前言:
除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义。而component组件则有自己的业务逻辑,可以看做一个独立的page页面。简单来说,如果只是展示,使用template就足够了,如果涉及到的业务逻辑交互比较多,那就最好使用component组件了。
一. template模板:
1. 模板创建:
建议单独创建template目录,在template目录中创建管理模板文件。
由于模板只有wxml、wxss文件,而且小程序开发工具并不支持快速创建模板,因此就需要直接创建wxml、wxss文件了,一个template的模板文件和样式文件只需要命名相同即可。如果模板较多,建议在template目录下再创建子目录,存放单独的模板。
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
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模板需要先导入模板 ,然后再嵌入模板
二. Component组件:
1. 组件创建:
新建component目录——创建子目录——新建Component;
2. 组件编写:
新建的component组件也由4个文件构成,与page类似,但是js文件和json文件与页面不同。
js代码:
// components/demo/index.jsComponent({/*** 组件的属性列表*/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";
微信小程序template模板与component自定义组件的区别和使用相关推荐
- 微信小程序开发学习5(自定义组件)
微信小程序开发学习5(自定义组件) 1.学习目标 能够知道如何自定义小程序组件 能够知道小程序组件中behaviors的作用 能够知道如何安装和配置vant-weapp组件库 能够知道如何使用MobX ...
- 微信小程序网悦新闻开发--自定义组件开发(六)
目录 微信小程序网悦新闻开发--功能介绍(一) 微信小程序网悦新闻开发--小程序配置(二) 微信小程序网悦新闻开发--首页模块开发(三) 微信小程序网悦新闻开发--视频模块开发(四) 微信小程序网悦新 ...
- 微信小程序-template模板使用
如下图,我在做华企商学院小程序的时候,课程搜索结果页和课程列表页结构是完全一样的,这时就非常适合使用模板来完成页面搭建.实现一次定义,到处使用. 模板 一.定义模板 1.新建一个template文件夹 ...
- 微信小程序实现跑马灯效果(自定义组件详解)
首先看一下效果吧 首先我们在项目根目录建一个公共文件夹,这里我命名为components 在components里面创建一个组件, dt-horse-race-lamp > index 最后 ...
- 微信小程序学习第8天——自定义组件的数据监听器Observer小案例
一.案例需求 使用自定义组件的数据监听实现:通过点击下方三个按钮,上方颜色变化(效果如下) 二.自定义组件代码 自定义组件为test test.wxml文件代码 <view class=&quo ...
- 回顾 微信小程序template模板的使用 循环 赋值 点击事件
1.模板样式实现 在components目录下新建一个的wxml文件,eg:index.wxml // 自定一个名为的customCard模板 <template name="cust ...
- 微信小程序首次进入引导提示自定义组件
实现效果展示 实现步骤 第一步(新建组件) 组件代码 <!--wxml--> <view class="guide" wx:if="{{showGuid ...
- 微信小程序(30):自定义组件-slot
- 小程序template模板 为知你客服传入微信头像和昵称
小程序template模板 为 知你客服 传入微信头像和昵称 自从利用了知你客服以来,我们自己的小程序已经完全完成了服务内环化,即所有操作已经可以完全在微信内部完成,不必在使用qq联系客户,但在未配置 ...
最新文章
- Go语言学习之旅01--变量与数据
- 密码学信息理论基础2
- android studio 初次使用Kotlin(环境准备篇)
- 2016 中国互联网仿冒态势分析报告
- SAP UI5 应用开发教程之十六 - 图标 icon 的使用
- 检验例题_高考必考|化学工艺流程之物质的分离提纯及检验鉴别,轻松拿分
- CNN 手写数字识别
- How browsers work
- linux更换域名全站301,linux服务器wdcp面板做301域名重定向设置
- Bailian4117 简单的整数划分问题【整数划分+记忆化递归】
- vagrant 常用的几个命令
- jquery ajax 对异步队列defer与XMLHttprequest.onload的依赖
- Mybatis之插入ListT
- Hibernate HQL基础
- system-config-network
- 如何将ida中的悬浮窗口恢复原位
- 什么是范数(norm)?以及L1,L2范数的简单介绍
- 本地编译执行 Kubernetes e2e 测试
- [译]CRF和QP的区别
- GM、VP、FVP、CIO都是什么职位