微信小程序-自定义组件

一、组件的创建与引用

1. 创建组件

①、在项目的根目录中，鼠标右键，创建 components -> test 文件夹

②、在新建的 components -> test 文件夹上，鼠标右键，点击“新建 Component”

③、键入组件的名称之后回车，会自动生成组件对应的 4 个文件，后缀名分别为 .js，.json， .wxml 和 .wxss

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

2. 引用组件

组件的引用方式分为“局部引用”和“全局引用”，顾名思义：

        局部引用：组件只能在当前被引用的页面内使用

        全局引用：组件可以在每个小程序页面中使用

3. 局部引用组件

在页面的 .json 配置文件中引用组件的方式，叫做“局部引用”。示例代码如下：

//在页面配置文件中引用
{
  "usingComponents": {
    "my-test": "/component/test/test"
  }
}



//在页面的.wxml文件中使用使用
<my-test></my-test>

 4. 全局引用组件

在 app.json 全局配置文件中引用组件的方式，叫做“全局引用”。示例代码如下：

//在全局配置文件app.json中引用
{
  "usingComponents": {
    "my-test1": "/component/test/test"
  }
}



//在页面的.wxml文件中使用使用
<my-test1></my-test1>