15-1.创建与引用自定义组件

目录

1  创建自定义组件

2  引用自定义组件

2.1  局部引用

2.2  全局引用

3  自定义组件的样式


1  创建自定义组件

在项目根目录下创建components,然后在components中创建 自定义组件名称 的文件夹,然后再自定义组件名称的文件夹中点击 新建Component

15-1.创建与引用自定义组件_第1张图片

然后输入自定义组件名称

之后就可以得到自定义组件的四个文件

15-1.创建与引用自定义组件_第2张图片

打开wxml,发现里面有该组件的路径

15-1.创建与引用自定义组件_第3张图片

wxss与页面的wxss一样,都是空的。

在js文件中,页面的最外层是page,组件的最外层是components,而且里面的东西也不一样

15-1.创建与引用自定义组件_第4张图片

json相对于页面的json多了一个 component:true

15-1.创建与引用自定义组件_第5张图片

2  引用自定义组件

2.1  局部引用

在页面的json文件中的usingComponents注册组件

15-1.创建与引用自定义组件_第6张图片

然后直接使用就行了

15-1.创建与引用自定义组件_第7张图片

2.2  全局引用

在项目中基本都会使用全局引用

在app.json中加入usingComponents节点,然后把组件注册进去就可以全局引用了

  • usingComponents与pages,windows是平级的

15-1.创建与引用自定义组件_第8张图片

3  自定义组件的样式

默认情况下app.wxss中的类选择器对组件的wxss是无效的(其他选择器有效)

默认情况下其他的wxss不会影响组件的wxss,也就是默认值isolated

可以在组件的js或json文件中用如下的方式取消隔离,将isolated改为apply-shared或shared

15-1.创建与引用自定义组件_第9张图片

15-1.创建与引用自定义组件_第10张图片

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