一、组件的介绍:
组件是视图层的基本组成单元。是一个单独且可复用的功能模块的封装。
组件名称是由尖括号包裹的,可以看成一个语义化标签,是有开始标签和结束标签的。
如下举个简单的例子:
<uni-card> //这是开始标签
<text>这是一个基础卡片示例,内容较少,此示例展示了一个没有任何属性不带阴影的卡片。</text>
</uni-card>//这是结束标签
官网文档权威解释:基础知识的文档跳转到:组件使用的入门教程 | uni-app官网
uni-app的组件,分为基础组件和扩展组件。
基础组件可以直接使用,不需要再注册内置组件。
基础组件主要分为以下几大类
详情可以到官方文档根据需求进行了解和使用。
扩展组件,则需要进行注册和声明 !
二、学习组件的目的:
了解好组件可以在我们的开发中更加得心应手,熟悉的使用可以大大提高我们的开发效率,组件的封装功能非常强大,我们只需要看懂相关组件的内容以及使用,就算是比较初级的掌握。进阶的话我们可以根据自己的需求去自己写组件使用。
三、组件的结构目录:
- 组件的使用
- 体验项目(直接导入项目体验)
可以在官网搜索相关的组件进行导入使用(这里是使用了uni-list列表进行展示)
每一个组件下面还会有相关的内容,可以下拉进行学习以及根据自己需求去使用。
安装方式的事项都会在下面进行补充以及详解。这里只是进行一个使用引导。官方API会更加系统的进行讲述。
通常选用uni-ui来建项目,∵存在许多现有的组件库可以直接调用,提升了编码效率,所以我们要先了解组件的结构目录,从而更好的使用。
- 项目体验配置
需要在此处添加编译才能继续预览效果,通常他只能预览一个页面,可能需要手动添加,这个时候我们要进入的全局文件进行相应的页面添加。
红色标注是添加的,然后才能实现上面图片的选择编译文件中找到。
- uni-list成果展示:
- 实战例子
以上是一个demo,name我们在实际开发中引入uni相关的内置组件是很简单的,只需要根据他的规则来进行即可。
通过相关的引入,即可直接使用我们的内置组件,【这个是仅限于uni开头的内置组件】
然而扩展组件使用则在实际开发中需要在js中进行调用才能使用。实例如下图:
如图我们看到,都是先要进行导入,就像是java中的导包一样,声明然后才会有相关的效果出现在你的页面。
注意事项:
我们必须在目录结构中将外部组件先放入我们的components文件夹中,这个文件夹也是专门放组件的。你的项目需要引用什么组件你就要放什么东西在这个文件夹中。
收获:
Uni-list的组件展示:可以运用到新闻系统,以及聊天系统。
Uni的插件直接导入,可以看到项目成果,学会这一步然后进阶才能将插件使用到自己的项目中。
相应的组件有相应的用法,可以找到自己比较常用的组件进行一个系统的学习。