创建组件文件
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的名称,可使用单标签的形式