小程序#组件创建使用

创建组件文件

1、在根目录下创建components文件
2、在components下创建我们的组件文件夹con-title
3、在文件夹con-title创建4个文件以js、json、wxml、wxss结尾的。

组件的的文件与pages下的文件格式是一样的，我们所有的页面都是依赖这四个文件。

快捷创建方式：
可以现在components文件夹下创建组件文件夹，点击鼠标右键，选择新建component，就会自动创建四个文件了

创建成功后的结构

之后就可以在wxml文件中写入组件内容了。

注意：先查看下组件中json文件中component字段是否为true，没有的话，需要写上，默认情况是有的。

{
  "component": true,    # 目的是证明自己是个组件
  "usingComponents": {}
}

我们在组件con-but.wxml写入内容：

<button>按钮1</button>
<button>按钮2</button>
<button>按钮2</button>

如果想调用组件的内容，需要在我们的页面中的json中usingComponents中进行注册引用

{
  "usingComponents": {
    "con-btn":"/components/con-button/con-but"
  }
}

注意：con-title是给组件起的别名，后面跟着组件的路径。
路径可以是相对路径，也可以是绝对路径均可。

直接在wxml文中引用别名标签就可以了

<con-btn/>
<con-btn></con-btn>

注意：这里可以使用单标签，也可以使用双标签。

总结
1、组件是放在components目录下
2、创建组件时，一定要在组件json文中声明"component": true,我是组件。
3、在调用时，要在页面中的json文件中usingComponents对象下声明，key：values的形式。
4、在页面中使用组件时，是使用起的别名key的名称，可使用单标签的形式