标签式导航

 

 准备菜单图标（每个图标有选中和未选中两种），放在项目的static目录中

pages目录中创建（四个）对应的页面文件并在pages.json文件中配置注册，同时也要在pages.json文件中设置tabBar栏的样式

 

 

 组件

组成页面的零件，具有复用性，利用参数实现差异性变化，uniapp具有 eacycom 机制（传统vue组件需要安装、引用、注册，三个步骤才能使用组件， easycom 将其精简为一步）

在项目的文件夹中创建目录文件 components（与pages、static等文件目录平级），组件必须放在这个命名的文件夹下，就可以全局使用，而无需提前注册。

 

 

 

生命周期

uniApp 的生命周期分 3 类（应用级别：App.vue；页面级别：模仿微信小程序；组件级别：vue组件）

1. 应用级别生命周期在项目的 App.vue文件中

 

 

2. 页面的生命周期，监听页面，举例如下（具体较多，官网查看）

 再例如：mounted(){ console.log('mounted  组件挂载完毕...') }；

 

 

 3. 组件生命周期，监听组件，例如下（具体较多，官网查看）

 

ui 组件

uni 官网中组件查询，其中视图容器库中的组件和小程序官方提供的组件一样；扩展组件库是 uni 针对实际开发做的组件补充库

使用扩展组件时创建新的项目模板要勾选 uni-ui项目 （在默认项目基础上添加一套扩展的组件库），创建后会多出一个 uni_modules 的文件夹，这个文件夹就是相关的组件库

 

Badge 数字角标  uni-badge

 

注意：html 代码中都是字符串类型，js 代码中才有数据类型的概念 

　　添加 is-dot 属性，不展示数字，只显示一个小点

　　添加 :offset="[10,10]" 属性,控制小图标的移动位置

 

 

card 卡片

 另外还提供插槽组件，替代 note 属性。note 属性只能书写普通的文本，利用插槽可以自定义脚部的内容

 

 

 

uni-dateformat 日期格式化     （把日期转化为人容易识别的格式）

 也可以规定一个预支，在某个时间段之内，显示 刚刚 | 马上

 

 

 

collapse 折叠面板

 

 还可以给 uni-collapse 标签添加 accordion 属性（手风琴效果），表示当这一组中只有当前点击的这一个是展开的效果

 

 

 

NoticeBar 通知栏