Uni-app组件使用

时间:2024-12-17 22:17:03

一、组件的介绍:

组件视图层的基本组成单元。是一个单独且可复用的功能模块的封装

组件名称是由尖括号包裹的,可以看成一个语义化标签,是有开始标签和结束标签的。

如下举个简单的例子:

<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的插件直接导入,可以看到项目成果,学会这一步然后进阶才能将插件使用到自己的项目中。

相应的组件有相应的用法,可以找到自己比较常用的组件进行一个系统的学习。