微信小程序自定义组件

如果很多界面使用到了很多同样的样式,那么就要想到复用了,这样好维护还能提高效率,那么怎么自定义组件呢？看官方文档

自定义组件

从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似

创建自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可这一组文件设为自定义组件）：

{
  "component": true
}

同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。具体细节和注意事项参见 组件模板和样式 

我们就按照它的步骤一步步来,首先新建一个components目录,这个目录是放置所有自定义的组件,比如你要新建一个点赞效果的组件,那么就在components下新建一个like目录,然后再like目录下新建一个compnente就取名叫做like吧,

这个时候like.json自动就有如下代码：

{
  "component": true,
  "usingComponents": {}
}

我们在like.wxss中随便写点东西

<view>
 <text>我是自定义组件</text>
</view>

那么我在别的界面怎么使用到它呢？

注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器

怎么使用直接官网文档

 

使用自定义组件

使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

开发者工具 1.02.1810190 及以上版本支持在 app.json 中声明 usingComponents 字段，在此处声明的自定义组件视为全局自定义组件，在小程序内的页面或自定义组件中可以直接使用而无需再声明

比如我们要在classice页面中要使用到该自定义组件,上面已经写好了,我们只要在classice.json中把上面代码,

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

其中component-tag-name是组件名字,这个名字随便取,value是对应的路径,路径可以是相对路径也可以写绝对路径,

绝对路径写法:

{
  "usingComponents": {
    "zgz_like": "/components/like/like"
  }
}

相对路径写法:

{
  "usingComponents": {
    "zgz_like": "../../components/like/like"
  }
}

其中../表示上一级

在使用的wxml中是这样的：

<zgz_like/>

这个组件名字就是你在上面json中写好的key的组件名 

效果：

还有关于自定义组件的其他方面知识,可以去查阅官网文档.