小程序#组件创建使用

创建组件文件

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 好吧,突然发现学不完了,一下子,那就分开吧,由于时间太久,直接重新大致复习了一下 微信小程序自定义组件微信小程序支...
    小小小8021阅读 2,630评论 0 9
  • 微信小程序的特点 小程序是一种不需要下载、安装即可使用的应用,它出现了触手可及的梦想,用户扫一扫或者搜一下即开打开...
    Simple_3f19阅读 882评论 0 0
  • 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6....
    IU憨憨阅读 1,295评论 1 1
  • 第一章 什么是微信小程序 1. 小程序介绍 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取...
    呆毛和二货阅读 861评论 0 1
  • 当代诗人 李昌瑿 过去云影映光天 拨云见日如青莲 青莲随影月不见 日中有月无共眠 2017 10 5...
    李昌瑿阅读 241评论 0 2