赞
踩
最近开发小程序项目,小程序的的文档挺详细的,特别是官方提供了很多组件。但是,对于一些项目适用场景,官方所提供的组件是无法满足的。这时候,需要我们自己去开发一个自定义组件,来满足当前项目的需求。
从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。
开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。
首先,我们需要新建一个 components 文件夹,用于存放我们以后开发中的所用组件,我们在 components 组件中新建一个 module文件夹来存放我们的组件,在 module下右击新建 Component 并命名为 module后,会生成对应的 json wxml wxss js 4个文件,这就是一个自定义组件的组成部分,这样组件初始化工作已完成。同时我们还需要声明组件,需要在module. json 文件中进行自定义组件声明(将 component 字段设为 true ):
{
"component": true,
"usingComponents": {}
}
同时,还要在 wxml
文件中编写组件模版,在 wxss
文件中加入组件样式,它们的写法与页面的写法类似。具体细节和注意事项参见 组件模版和样式 。下面为一个组件的完整结构。
<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
{{innerText}}
<button type='primary' bindtap='change'>子组件点击按钮</button>
</view>
<slot></slot>
<slot name="homePage"></slot>
/* 这里的样式只应用于这个自定义组件wxss结构 */
.inner {
color: red;
}
在自定义组件的js文件中,需要使用 Component() 来注册组件,并提供组件的属性定义、内部数据和自定义方法,
/* 这个自定义组件js结构 */ Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, properties: { // 这里定义了innerText属性,属性值可以在组件使用时指定 innerText: { type: String, value: 'default value', } }, data: { // 这里是一些组件内部数据 someData: {} }, methods: { // 这里是一个自定义方法 change: function(){ // 子组件触发事件传给父页面 this.triggerEvent("change") }, // 子组件自己的方法 childrenFunction(){ console.log('我被父组件调用了') } } })
既然是组件,必然是在页面引入使用的,我们一般称该页面为父页面。首先,我们应该在要用组件的那个页面中(父页面)引用声明.也就是在.json文件。如index.json文件:
"usingComponents": {
"module": "/components/module/module"
}
当我们引入组件之后,就可在父页面使用该自定义组件了。
父页面如何将数据传给子组件呢?
父页面通过inner-text将数据传给子组件,子组件通过innerText来接受父页面传过来的父页面变量text的数据。
父页面该如何获取子组的data,以及子组件的方法?
我们在引入组件时,给子组件设置一个id,通过this.selectComponent(’#module’)的方法来获取module组件,即获得了该组件里的所有内容,包括data里的内容(this.module.data),以及方法的调用(this.module.childrenFunction())。
子组件如何调用父页面的方法呢?
通过this.triggerEvent(“change”)方法,将子组件触发的事件传给父页面,父页面通过bind绑定一个方法来接受子组件传过来的change事件方法,从而调用到父组件的方法。triggerEvent()函数有三个参数,第一个参数为暴露给父节点的事件类型。第二个参数为向父组件传递的数据,第三个参数为选项,传入对象进去。
组件slot的理解?
slot与vue插槽很类似,有了slot的话,可以使组件更加灵活使用。例如,一个组件的的某些内容在不同页面引用所展示的内容不一样,这时我们使用slot来实现。name为homePage的slot,我们在index.wxml使用了,而在别的页面未使用的话,别的页面就不会显示里的内容。
具体如下:
<!-- 父页面 -->
<!-- 页面的 WXML -->
<view class="container">
<module
id='module'
inner-text="{{text}}"
bind:change="change">
<view>这里是插入到组件slot中的内容</view>
<view name='homePage'>这里插入到组件homePage的slot中的内容</view>
</module>
<button type='primary' style='height: 40px;' bindtap='childrenFunction'>父页面调用子组件方法</button>
</view>
//index.js // 获取应用实例 const app = getApp() Page({ data: { text: '初始值1' } /* 生命周期函数--监听页面初次渲染完成*/ onReady: function () { // 获得module组件 this.module = this.selectComponent('#module'); } // 点击事件 change() { console.log('moudule组件点击事件') this.setData({ text: '子组件点击事件改变了我' }) } // 父页面调用子组件的方法 childrenFunction(){ this.module.childrenFunction() } })
微信小程序中自定义组件的用法还有很多, 调用Component构造器时可以指定组件的属性、数据、方法等,更多的内容可以参考官方文档.
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。