微信小程序开发---自定义组件
开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。
创建自定义组件
类似于页面,一个自定义组件由 json
wxml
wxss
js
4个文件组成。要编写一个自定义组件,首先需要在 json
文件中进行自定义组件声明(将 component
字段设为 true
可这一组文件设为自定义组件):同时,还要在 wxml
文件中编写组件模板,在 wxss
文件中加入组件样式,它们的写法与页面的写法类似。在自定义组件的 js
文件中,需要使用 Component()
来注册组件,并提供组件的属性定义、内部数据和自定义方法。组件的属性值和内部数据将被用于组件 wxml
的渲染,其中,属性值是可由组件外部传入的。
使用自定义组件
使用已注册的自定义组件前,首先要在页面的 json
文件中进行引用声明。这样,在页面的 wxml
中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名,节点属性即传递给组件的属性值。
注意:
- 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合,所以自定义组件的标签名也只能包含这些字符。
- 自定义组件也是可以引用自定义组件的,引用方法类似于页面引用自定义组件的方式(使用
usingComponents
字段)。 - 自定义组件和页面所在项目根目录名不能以“wx-”为前缀,否则会报错。
接下来我们自己创建一个<chw-toast>组件,效果图如下
第一步:创建自定义组件
- 创建组件chw-toast目录,存放各个文件
- 配置chw-toast.josn文件
- 创建自定义组件样式(container控制toast位置,toast-text控制文字格式)
- 修改chw-toast.js文件,其中值得注意的是设置timeout的时候需要获取当前this(hidden为false时候的)来重新setdata,而不能直接用this(hidden为true时候的)
// page/chw-toast.js
Component({
/**
* 组件的属性列表
*/
properties: {
toastText:{
type:String,
value:'chw'
}
}, /**
* 组件的初始数据
*/
data: {
toastShow:false
}, /**
* 组件的方法列表
*/ methods: {
showToast(text,time){
this.setData({
toastShow:!this.data.toastShow,
toastText:text
}) if(time===undefined)
{
time=3000
}
var that=this
setTimeout(function(){
that.setData({
toastShow:!that.data.toastShow
})
},time)
}
}
})
第二步:使用组件
- 在index.js中声明
- 在index.wxml引用
- 配置index.js,在渲染完成后,首先要获得chw-toast组件,得到该对象后通过绑定修改值,可以设置显示时间,可以采用默认时间
// page/index/index.js
Page({ /**
* 页面的初始数据
*/
data: { }, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) { }, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.chwtoast=this.selectComponent("#chw-toast")
},
showToast:function(){
this.chwtoast.showToast("xixiixixi")
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function () { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function () { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function () { }
})
微信小程序开发---自定义组件的更多相关文章
- 【小程序】小程序开发自定义组件的步骤>>>>>>>>>小程序开发过程中报错:jsEnginScriptError
报错:jsEnginScriptError VM6342: jsEnginScriptError Component is not found in path "component/spac ...
- 微信小程序之自定义组件的应用
小程序支持自定义组件,下面是一个简单的购物车组件,实现的效果如图: 效果图 创建组件 在根目录创建components目录,然后创建计数组件 count 如图: 组件内容 <!--compone ...
- 微信小程序之自定义组件
在微信小程序项目中 肯定会存在很多功能和样式上相似的部分 面对这种情况 只是单单的ctrl+c ctrl+v 就显得很low了,而且也不便于后期维护那么这时候 使用微信小程序中的自定义组件功能就很合适 ...
- 微信小程序:自定义组件
为什么要学习自定义组件? 1.用上我自己的单词abc,我希望在页面中展示椭圆形的图片, 2.打开手机淘宝,假如现在要做一个企业级项目,里面有很多页面,首页存在导航模块,点击天猫,进入第二个页面,而第二 ...
- 微信小程序覆盖自定义组件样式
小程序官方文档明确指出,引入的第三方自定义组件,是不可以对其进行CSS样式覆盖的,但是我们还想要修改怎么办呢?自定义组件时会之定义个外部类,通过这个外部类来修改样式. 修改https://weapp. ...
- 微信小程序:自定义组件的数据传递
一.前言 如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来.下面介绍一个简单的组件和一个复杂的组件. 二.简单的组件(计数器) 1. 组件功能介绍 这个组件常见于外卖软件 ...
- 微信小程序之自定义组件与使用
一般我们在定义了一个组件之后,为了复用,需要将它导出以提供给其他页面使用. 组件导出的关键字是 exprot default 没有加default时,例如: export class Template ...
- 微信小程序开发UI组件
第一 view和input和button组件 1.UI组件的通用属性 (1)id 唯一标识 (2)class 设置组件的样式类 (3)style 设置组件的内联样式 (4)hidden ...
- 微信小程序里自定义组件,canvas组件没有效果
methods: { /** * el:画圆的元素 * r:圆的半径 * w:圆的宽度 * 功能:画背景 */ drawCircleBg: function (el, r, w) { const ct ...
随机推荐
- adb devices 找不到设备
问题如图: 解决方法: 1.在开发人员选项中,找到USB调试,打开USB调试 2.如果还不行,下载360手机助手,连接手机,会自动安装驱动 3.再次adb devices,OK
- selenium-webdriver循环点击百度搜索结果以及获取新页面的handler
webdriver还是很有意思的,之前用过Ruby的watir的自动化测试框架,感觉selenium的这套框架更好一些,很容易就可以上手.我虽然不做自动化这块,不过先玩玩再说,多学点东西总之还是好一些 ...
- javascript闭包学习
(function(){})()===>>>>函数会被立即执行function(){}是一个函数用括号包起来表示是函数表达式再加()表示函数自执行 如何理解闭包?1.定义和用 ...
- swoole 4种PHP回调函数风格
匿名函数 $server->on('Request', function ($req, $resp) use ($a, $b, $c) { echo "hello world" ...
- 2018年最新JAVA面试题总结之基础(1)
转自于:https://zhuanlan.zhihu.com/p/39322967 1.JAVA中能创建volatile数组吗?volatile能使得一个非原子操作变成原子操作吗? 回答: 能,Jav ...
- mysql的if用法解决同一张数据表里面两个字段是否相等统计数据量。
MySQL的使用用法如下所示:格式:if(Condition,A,B)意义:当Condition为true时,返回A:当Condition为false时,返回B.作用:作为条件语句使用.mysql的i ...
- C# DataConstruct 数据结构关于 Array,ArrayList,List,HashTable,Dictionnary的学习记录
Array: 数组,开辟连续存储的内存存储数据.Array获取数据的时间复杂度是O(1),但是要删除数据却是开销很大的,因为这需要重排数组中的所有数据 优点: 1.查询速度快,可以利用索引快速查询到对 ...
- linux基础命令学习笔记(二)
linux基础命令学习笔记(二) 1.kill :终止进程 kill pid (唯一标示一个进程) kill -9 强制终止 kill -15 命令未结束不能终止 # ps aux 查看所有进程 ...
- 「LibreOJ Round #9」CommonAnts 的调和数
题解: 对于subtask3:可以把相同的归在一起就是$nlogn$的了 对于subtask4: 可以使用高维前缀和的技术,具体的就是把每个质因数看作一维空间 那么时间复杂度是$\sum \limit ...
- Xpath Helper的使用
xPath Helper插件 xPath helper是一款Chrome浏览器的开发者插件,安装了xPath helper后就能轻松获取HTML元素的xPath,程序员就再也不需要通过搜索html源代 ...