文章目录

  • 前言
  • 创建组件
  • 声明组件
  • 引入组件

前言

项目结构方面可以单独建立一个目录来盛放组件, 我比较倾向于这种结构, 就像这样.

也可以…嗯…我在github上看过一些项目, 我发现作者们会把那些组件放在页面目录下, 但这样每个用到的页面都要复制一份, 会不会导致项目体量增大?


创建组件

创建好components之后先在里面新建一个文件夹NavBar作为组件目录, 不要直接创建components, 它会把你的组件4个文件直接扔在components目录下…


然后右键NavBar点击建立components, 这样看起来就会正常一些了…

这还没完, 因为要边做边看效果, 所以我们先把他随便引入到一个空页面, 就custom吧(随便一个就好)

如果你有接触过Vue的话, 不知道还记不记着Vue引入组件是要先使用componets来注册组件, 是的…小程序也有这一步, 只不过是在页面的json文件完成的, 待会会说到.


声明组件

这样还不够, 还要到组件的JSON, 将该页面声明为组件
"component": true
该页面是否作为组件? “是的”

//NavBar.json, 请删除本行
{"component": true,"usingComponents": {}
}

引入组件

usingComponents里挂载组件, 另外记得JSON里必须用双引号.

//custom.json, 请删除本行
{"usingComponents": { "navbar": "../../components/NavBar/NavBar"}
}

然后就可以在页面WXML文件里用了:

<!-- custom.wxml -->
<navbar></navbar>

NavBar.wxml里随便写点甚麽, 然后去custom.wxml页面:
<text>I am NavBar</text>


微信小程序 自定义组件并引入相关推荐

  1. 微信小程序自定义组件方案

    前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...

  2. 微信小程序自定义组件(二)

    微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注 为何存在组件 组件间的关系 使用rel ...

  3. 微信小程序--自定义组件(超详细 从新建到使用)

    微信小程序–自定义组件 微信小程序官网介绍! 本文提供给急需使用自定义组件人群,以下是博主个人理解和案例!可以辅助官网来看 介绍: 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所 ...

  4. 小程序组件onload_微信小程序自定义组件(一)

    好吧,突然发现学不完了,一下子,那就分开吧,由于时间太久,直接重新大致复习了一下 微信小程序自定义组件 微信小程序支持自定义组件 下方的目录 其中,components为组件目录,nodemodule ...

  5. 一步步教你实现微信小程序自定义组件

    一步步教你实现微信小程序自定义组件 更新时间:2022年03月21日 11:12:34   作者:naluduo233 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,下面这篇文章主 ...

  6. 微信小程序自定义组件,提示组件

    微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...

  7. 微信小程序自定义组件子传父详解(多图)

    微信小程序自定义组件子传父详解 前言: 刚开始为了测试父传子,所以把页面的数组放在了父组件中 1. 然而子组件中绑定的自定义点击事件依然放在子组件的js文件中 2. 所以就会出现我们点击页面的文字能改 ...

  8. 微信小程序自定义组件的基本使用

    微信小程序自定义组件的基本使用 组件与模块类似,实现了功能的复用,提高开发速率,减少代码量 在开发过程中 , 总会遇到一些功能板块是相同或很类似的 .如两个不同页面都有搜索框 , 或者 导航栏等 . ...

  9. 基于canvas 2D实现微信小程序自定义组件-环形进度条

    基于canvas 2D实现微信小程序自定义组件-环形进度条 最近开发一个小程序项目博闻金榜答题小程序,需要使用到一个可以显示答题倒计时的组件,基于进度条实现,下面就主要介绍基于canvas2D实现一个 ...

最新文章

  1. 在linux系统里安装软件,如何使用Homebrew在Linux和Windows上安装软件
  2. 我的2019年度总结
  3. Ansible入门及组件介绍
  4. android java 调用js,Android中Java和JavaScript交互实例
  5. java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä'
  6. springmvc使用requestmapping无法访问控制类_研究人员称人类使用的新烟碱类杀虫剂让蜜蜂无法入睡...
  7. Kubernetes之配置与自定义DNS服务
  8. Windows 上好用的7款下载工具
  9. Java 度分秒转经纬度,经纬度转度分秒,度分转经纬度,经纬度转度分
  10. 【Android智能硬件开发】【004】通过PackageInstaller静默安装apk
  11. No serializer的解决方法
  12. MSF Exploit入侵电脑实践(Win7/Win10皆可)
  13. 怎么p出模糊的照片_ps怎么把模糊的图片变清楚?ps把模糊图片高清化的具体教程...
  14. 计算机共享文件登录人员记录,如何查看共享文件夹的访问记录,查看共享文件访问日志?...
  15. 【Linux】MBR磁盘分区表只能有四个分区?
  16. 前端js、功能性工具插件网站(持续更新,欢迎分享)
  17. 转战物联网·基础篇01-物联网之我见
  18. 2022新URL网址SEO外链自动发布网站源码+LayUI开发
  19. 【04 核心类库 6.网络编程】
  20. uniapp集成极光推送证书与描述文件申请

热门文章

  1. 00 汇编语言从小白到入门---先导课
  2. matlab外罚函数实验报告,(实验三)外罚函数法-实验指导书
  3. 华为防火墙常见问题总结
  4. Collectors 中的各种方法
  5. Trie 树——Golang实现
  6. Redis是单线程的,为什么还会这么快?
  7. C#序列化、反序列化学习
  8. 2012,传说中的世界末日!
  9. 数据结构课程设计——图书信息管理系统设计
  10. 频率学派和贝叶斯学派的一些区别