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

栏目: IOS · Android · 发布时间: 6年前

内容简介:我们在往常用vue或者是react编程的时候,最常用最常见的一个词就是组件,在小程序开发中,组件也是很nice的,毕竟谁也不想把1+1 = 2每一个页面写一遍。本篇文章适合知道小程序基本开发的手足,总结一些自己在开发小程序组件的过程需要注意的点,有写的不对的地方还请指指教。新建组件就跟新建页面一样,还是js、json、wxml、wxss四个文件,这里需要注意的有四点。右键直接新建page,这样就会在app.json的配置文件中的pages下面,根据路径多加一项,需要注意的是,这一项不像是页面,删掉也没关系。

我们在往常用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)
            }
    }

复制代码

以上所述就是小编给大家介绍的《微信小程序自定义组件的关键记录》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Masterminds of Programming

Masterminds of Programming

Federico Biancuzzi、Chromatic / O'Reilly Media / 2009-03-27 / USD 39.99

Description Masterminds of Programming features exclusive interviews with the creators of several historic and highly influential programming languages. Think along with Adin D. Falkoff (APL), Jame......一起来看看 《Masterminds of Programming》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具