官方地址
1.基本信息
1)优点
- 1,同一套代码可以编译运行多端(小程序,安卓,ios,web等)
- 2,节省人力和维护成本
- 3,接近原生,体验效果更好
- 4,开发效率高,开发时间更短
- 5,学习成本比较低(3-15天即可入门)
- 6,社区活跃,版本迭代快,有问题更容易在社区解决
2)功能框架图
开发一套代码在主流平台上全平台运行
3)uniapp和vue、小程序
uniapp基于vue框架
开发规范和小程序相似
2.使用
1)HBuilderX
开发工具安装和项目启动可以参考
https://blog.csdn.net/sjp991012/article/details/125389443
2)目录结构
·官方目录结构详解
┌─uniCloud 云空间目录,支付宝小程序云为uniCloud-alipay,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb(详见uniCloud) │─components 符合vue组件规范的uni-app组件目录 │ └─comp-a.vue 可复用的a组件 ├─utssdk 存放uts文件 ├─pages 业务页面文件存放的目录 │ ├─index │ │ └─index.vue index页面 │ └─list │ └─list.vue list页面 ├─static 存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源都应存放于此目录 ├─uni_modules 存放uni_module 详见 ├─platforms 存放各平台专用页面的目录,详见 ├─nativeplugins App原生语言插件 详见 ├─nativeResources App端原生资源目录 │ ├─android Android原生资源目录 详见 | └─ios iOS原生资源目录 详见 ├─hybrid App端存放本地html文件的目录,详见 ├─wxcomponents 存放小程序组件的目录,详见 ├─unpackage 非工程代码,一般存放运行或发行的编译结果 ├─main.js Vue初始化入口文件 ├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期 ├─pages.json 配置页面路由、导航条、选项卡等页面类信息,详见 ├─manifest.json 配置应用名称、appid、logo、版本等打包信息,详见 ├─AndroidManifest.xml Android原生应用清单文件 详见 ├─Info.plist iOS原生应用配置文件 详见 └─uni.scss 内置的常用样式变量
·文件目录使用规范(官方)
- pages 页面存放目录
- static 静态资源目录(如图片、视频等,静态文件只能存放到这里)
- App.vue 应用入口文件(跟小程序 app.js 类似,如:APP全局样式、监听声明周期)
- main.js 应用入口文件(如:Vue 初始化、定义全局组件 ...)
- manifest.json 项目配置文件(如:应用名称、appid、logo、版本、启动页 ...)
- pages.json 页面配置文件(如:页面路由、导航条、选项卡 ...)
- uni.scss 全局样式(如:按钮颜色、样式风格 ...)
- unpackage 编译后的文件存放目录- 注意:下面需要自建的,根据项目开发情况创建即可。
- api 请求封装存放目录(自建)
- common 公共文件存放(自建)
- components 自定义组件存放(自建)- uniapp
- wxcomponents 小程序组件存放(自建)- wx
- store vuex 状态管理(自建)
- utils 公共工具目录(自建)
- hybrid 存放本地网页目录(自建)
- platforms 存放各平台专用页面目录(自建)
- vue.config.js vue 配置管理(自建)
- vite.config.js vite 配置管理(自建)
3)生命周期
具体参考官网:https://uniapp.dcloud.net.cn/tutorial/vue-api.html
1.应用生命周期
注意:仅在App.vue中有效,在其他页面监听无效
2.页面生命周期
3.组件生命周期
3.常用组件
官网学习地址
https://uniapp.dcloud.net.cn/component/
view组件
相当于一个盒子,可以用来装一些别的组件。它类似于传统html中的div,用于包裹各种元素内容
代码应用
text组件
主要用来展示文字
代码应用
input组件
主要用来获取用户输入的信息的,一般在用户填写信息,提交数据,登录注册和提交表单时会用到。
代码应用
使用方式和ementUI中的el-inout类似
uniapp官网使用:https://uniapp.dcloud.net.cn/component/input.html