小程序的组件化开发

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 构造器