微信小程序自定义组件的关键记录

1,514 阅读4分钟

我们在往常用vue或者是react编程的时候,最常用最常见的一个词就是组件,在小程序开发中,组件也是很nice的,毕竟谁也不想把1+1 = 2每一个页面写一遍。本篇文章适合知道小程序基本开发的手足,总结一些自己在开发小程序组件的过程需要注意的点,有写的不对的地方还请指指教。

1. 基本配置

新建组件就跟新建页面一样,还是js、json、wxml、wxss四个文件,这里需要注意的有四点。

一、或许很多人在新建组件的时候

右键直接新建page,这样就会在app.json的配置文件中的pages下面,根据路径多加一项,需要注意的是,这一项不像是页面,删掉也没关系。

二、新建组件之后

需要在组件的配置文件json中添加component: true字段; 需要在引用组件的配置文件中添加usingComponents字段来定义组件的名字和路径【可以直接用/+app.json中自动生成的,以免路径找不到】

三、新建的组件

如果是直接一键生成的,那么这个时候js文件中的还是page({...生命周期等执行函数}),所以这个时候需要我们把这些换成组件需要的component({...组件需要的对象})

2.组件样式

关于样式,就是我们的css了,至于里面的slot,无非就是一个插槽,而模版文件中数据绑定等我们都可以按照页面中的来实现,需要注意的是选择器和样式污染问题

一、选择器

在编写组件的时候,不能使用id选择器(#a)、属性选择器([a])和标签名选择器,建议统一使用class 子选择器只能用于view组件,和其子节点之间,其余的不建议使用 比如text > text 继承样式的话 font还有color这种样式继承,会从组件外继承到组件内部 除继承样式之外,app.wxss中的样式,组件所在页面的样式对组件内部是无效的

其实呢,我们只用class选择器就好了。。。

二、外部样式定义

组件定义好了之后,在使用的时候,如果我忽然在调用页面加一个class控制样式,想加一个class怎么办呢? 在组件内部的js文件中配置externalClasses:['xxx'],这样在外部引用的时候,可以直接使用这里定义的,毕竟单节点上面,同一节点同时使用普通样式和外部样式的时候,优先级会出现错乱,所以这能很好的避免这种情况 我们前面说了,自定义组件内部样式,是不会受到外部样式的影响的,除非是全局的标签或者是options配置中添加assGlobalClass字段

三、样式配置

3.component构造器 其实这里的构造器都是制定组件重的属性、数据、方法等等,定义的字段可以参考官方文档,我这里不多做累述,把容易混淆的点拿出来对比一下。

properties: 组件的对外属性 data: 组件的内部数据 组件生命周期:生命周期有优先级,一般情况下直接当作普通方法,但是如果需要优先级的时候,可以写到lifetimes对象里面

组件生命周期:

4.组件事件

组件的事件,我们和vue差不多的写法,会有一个methods统一来管理。但是我们通常有两种类型

1. 组件内部调用的方法。

和普通一样就好了,无非就是完全在组件内部自己玩,不和外部页面进行数据通信,请求也是自己完成

2. 和父组件或者页面有数据通信的方法。

我们在vue中需要使用到自组件向父组件传递消息,有一种方法就是this.$emit('...', msg)
但是我们在小程序中也需要这种场景 【监听事件】:组件间通信的主要方式之一

组件内部


        // wxml
        <view bindtap="onHandle"></view>
        // js
        methods: {
            onHandle() {
                .....
                this.triggerEvent('eventName', detailMsg)
            }
    }

页面或者组件调用该组件的时候调用定义好的方法

// wxml
<my-component bind:eventName="handleComponent"></my-component>
// 页面js
page({
    handleComponent(e) {
        组件中返回的detailMsg信息 达到交互效果
        e.detail------->detailMsg
    }
})

后续持续记录。。。。