微信小程序开发入门与实战（组件的使用）

@作者 : SYFStrive

 

： 微信小程序
： 微信小程序专栏链接
： 感谢支持,学累了可以先看小段由小胖给大家带来的街舞

微信小程序（）

组件的创建与引用

    1、 创建组件

创建步骤：
1、在项目的根目录中，鼠标右键，创建 components test 文件夹
2、在新建的 components test 文件夹上，鼠标右键，点击“新建 Component”
3、键入组件的名称之后回车，会自动生成组件对应的 4 个文件，后缀名分别为 .js，.json， .wxml 和 .wxss

注意：为了保证目录结构的清晰，可以把不同的组件，存放到单独目录中

如

    2、 组件

组件的引用类型：局部引用”和“全局引用

1. 局部引用：组件只能在当前被引用的页面内使用
2. 全局引用：组件可以在每个小程序页面中使用

    3、局部引用组件

在页面的.json引用的叫局部配置

使用如

    4、全局引用组件

在全局配置的 app.json 引用的叫全局配置

使用如

    5、全局引用 VS 局部引用

根据组件的使用频率和范围选择引用方式：

1. 如果某组件在多个页面中经常被用到，建议进行“全局引用”
2. 如果某组件只在特定的页面中被用到，建议进行“局部引用”

    6、组件和页面的区别

从表面来看，组件和页面都是由 .js、.json、.wxml 和 .wxss 这四个文件组成的。但是，组件和页面的 .js 与.json 文件有明显的不同如 ：

1. 组件的 .json 文件中需要声明 “component”: true 属性
2. 组件的 .js 文件中调用的是 Component() 函数
3. 组件的事件处理函数需要定义到 methods 节点中（vue类似）

自定义组件 - 样式

    1、组件样式隔离

自定义组件的样式只对当前组件生效，不会影响到组件之外的UI 结构

如

1. 组件 A 的样式不会影响组件 C 的样式
2. 组件 A 的样式不会影响小程序页面的样式
3. 小程序页面的样式不会影响组件 A 和 C 的样式

好处如 ：

1. 防止外界的样式影响组件内部的样式
2. 防止组件的样式破坏外界的样式

    2、组件样式隔离的注意点

1. app.wxss 中的全局样式对组件无效
2. 只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响

注意：在组件和引用组件的页面中建议使用 class 选择器，不要使用 id、属性、标签选择器！

    3、修改组件的样式隔离选项

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过 styleIsolation 修改组件的样式隔离选项

    4、styleIsolation 的可选值

可选值	默认值	描述
isolated	是	表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响
apply-shared	否	表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面
shared	否	表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件

如

Component({
    options:{
        styleIsolation:'isolateds'
    },
})

最后

本文到这里就结束了,大佬们的支持是我持续更新的最大动力，希望这篇文章能帮到大家

 

                 相关专栏连接

下篇文章再见ヾ(￣▽￣)Bye_Bye