标签式导航
准备菜单图标(每个图标有选中和未选中两种),放在项目的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 通知栏