小程序的组件化开发

1、组件化是啥

如果将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。但如果将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了。

虽然小程序在刚推出时是不支持组件化的,但如今小程序开始支持自定义组件开发,这无疑给开发人员提供了极大的便利,通过开发出一个个独立可复用的小组件来构造大的的应用。任何应用都会被抽象成一棵组件树,如下图所示:

小程序的组件化开发_第1张图片

组件化思想的应用:尽可能的将页面拆分成一个个小的、可复用的组件,这样代码将更加方便组织和管理,并且扩展性也更强。

2、自定义组件的过程

类似于页面,自定义组件由 .json .wxml .wxss .js 4 个文件组成。一般来说会先在根目录下创建一个 components 文件夹,里面存放之后自定义的公共组件,比如新创建一个自定义组件 my-cpn:包含对应的四个文件,这时你的 my-cpn 组件就创建好了。第二步,如果你封装好了你的组件,希望在 home 界面上对其进行引用,则需要先到 home.json 文件中对该组件进行注册:{"usingComponents":{"my-cpn":/component/my-cpn/mu-cpn}},然后再到 home.wxml 通过标签对其进行引用。

注意:my-cpn 组件的 json 文件中,有一个 {"component":true} 标识,只有加上这行代码,当前的文件夹才是一个组件。


{{title}}            
我是自定义组件的内容 


{"usingComponents":{"my-cpn":/component/my-cpn/mu-cpn}}    



            

自定义组件的过程:(1)首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true :表示这一组文件设为自定义组件);(2)在 wxml 中编写组件自己的模板;(3)在 wxss 中编写属于组件自己的样式;(4)在 js 文件中,可以定义数据或组件内部的相关逻辑。(5)在目标页面的 json 文件中编写组件路径代码,并在 wxml 通过定义的组件名引用该组件。

3、自定义组件注意事项

3.1、组件的引用细节

(1)因为 wxml 节点标签名只能是小写字母中划线下划线的组合,所以自定义组件的标签名也只能包含这些字符。(2)自定义组件可以引用别的自定义组件,引用方法类似于页面引用自定义组件的方式(使用 usingComponents 字段)。(3)自定义组件和页面所在项目根目录名不能以 “wx-” 为前缀,否则会报错。(4)如果在 app.json 的 usingComponents 声明某个组件,那么所有页面和组件可以直接使用该组件。

3.2、组件的样式细节

组件内的样式对外部样式的影响:(1)组件内的 class 样式,只对组件 wxml 内的节点生效,对于引用组件的 Page 页面不生效。(2)组件内不能使用 id 选择器、属性选择器、标签选择器。

外部样式对组件内样式的影响:(1)外部使用 class 的样式,只对外部 wxml 的 class 生效,对组件内是不生效的。(2)外部使用了 id 选择器、属性选择器不会对组件内产生影响。(3)外部使用了标签选择器,会对组件内产生影响

总结:组件内的 class 样式和组件外的 class 样式,默认是有一个隔离效果的,为了防止样式的错乱,官方不推荐使用 id、属性、标签选择器。如果希望让 class 样式相互影响:可以组件的 .js 文件中的 Component 构造器传入一个 options 属性,其中 options 属性中有一个 stylelsolation(隔离)属性。stylelsolation 有三个取值:(1)isolated 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(默认取值);(2)apply-shared 表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面;(3)shared 表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置。

Component({
    options:{
        styleIsolation:"share"
    }
})

4、自定义组件的 Component 构造器

小程序的组件化开发_第2张图片

小程序的组件化开发_第3张图片

你可能感兴趣的:(微信小程序)