开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。

创建自定义组件

类似于页面,一个自定义组件由 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 () { }
})

微信小程序开发---自定义组件的更多相关文章

  1. 【小程序】小程序开发自定义组件的步骤>>>>>>>>>小程序开发过程中报错:jsEnginScriptError

    报错:jsEnginScriptError VM6342: jsEnginScriptError Component is not found in path "component/spac ...

  2. 微信小程序之自定义组件的应用

    小程序支持自定义组件,下面是一个简单的购物车组件,实现的效果如图: 效果图 创建组件 在根目录创建components目录,然后创建计数组件 count 如图: 组件内容 <!--compone ...

  3. 微信小程序之自定义组件

    在微信小程序项目中 肯定会存在很多功能和样式上相似的部分 面对这种情况 只是单单的ctrl+c ctrl+v 就显得很low了,而且也不便于后期维护那么这时候 使用微信小程序中的自定义组件功能就很合适 ...

  4. 微信小程序:自定义组件

    为什么要学习自定义组件? 1.用上我自己的单词abc,我希望在页面中展示椭圆形的图片, 2.打开手机淘宝,假如现在要做一个企业级项目,里面有很多页面,首页存在导航模块,点击天猫,进入第二个页面,而第二 ...

  5. 微信小程序覆盖自定义组件样式

    小程序官方文档明确指出,引入的第三方自定义组件,是不可以对其进行CSS样式覆盖的,但是我们还想要修改怎么办呢?自定义组件时会之定义个外部类,通过这个外部类来修改样式. 修改https://weapp. ...

  6. 微信小程序:自定义组件的数据传递

    一.前言 如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来.下面介绍一个简单的组件和一个复杂的组件. 二.简单的组件(计数器) 1. 组件功能介绍 这个组件常见于外卖软件 ...

  7. 微信小程序之自定义组件与使用

    一般我们在定义了一个组件之后,为了复用,需要将它导出以提供给其他页面使用. 组件导出的关键字是 exprot default 没有加default时,例如: export class Template ...

  8. 微信小程序开发UI组件

    第一  view和input和button组件 1.UI组件的通用属性 (1)id       唯一标识 (2)class  设置组件的样式类 (3)style 设置组件的内联样式 (4)hidden ...

  9. 微信小程序里自定义组件,canvas组件没有效果

    methods: { /** * el:画圆的元素 * r:圆的半径 * w:圆的宽度 * 功能:画背景 */ drawCircleBg: function (el, r, w) { const ct ...

随机推荐

  1. Hibernate-注解

    一, 为啥用注解 Hibernate注解使得原本放在xml文件中的信息直接表现在类中 为什么要用注解呢,因为注解可以简洁快速地在编写代码的同时实现映射关系 注解的好处就是语言简洁,即插即用.  坏处就 ...

  2. python实现压缩当前文件夹下的所有文件

    import os import zipfile def zipDir(dirpath, outFullName): ''' 压缩指定文件夹 :param dirpath: 目标文件夹路径 :para ...

  3. patindex

    功能:返回模式在字符串中第一次出现的位置 解释:patindex('%pattern%',expression) pattern:要查找的模式 expression:被找的字符串 例子:select ...

  4. SQLServer删除重复行

    1.如果有ID字段,就是具有唯一性的字段 delect table where id not in ( select max(id) from table group by col1,col2,col ...

  5. python获取设备主机名和IP地址

    import socket def print_machine_info(): host_name = socket.gethostname() ip_address = socket.gethost ...

  6. 数据库根据id排序

    select * from 表名 order by id 根据 id 从小到大排序

  7. js逗号表达式

    在js中的某些场景,","是一种运算符号,只不过他的优先级要低于普通的原酸符,在变量声明或者return中,经常看到逗号表达式. 声明变量: var a=1,b=2,c=3; co ...

  8. struts2-第一章-基础用法3

    一,结果类型配置 在之前servlet学习中,知道网页页面路径跳转有两种方式,内部跳转(请求转发)和外部跳转(重定向),两者的区别,内部跳转浏览器地址不会变化 可以保存上一次请求的数据 外部跳转浏览器 ...

  9. CocosCreator脚本中向依赖的组件赋值后, 被依赖的组件没有取到值的问题!

    问题描述: 两个节点parent&child(其中都包含脚本组件), parent脚本组件依赖了child组件, 节点关系如下图: parent脚本内容如下: child脚本内容如下: 预览时 ...

  10. C# 编译运行原理