简单介绍概念
uni-app是终极跨平台框架,跨平台能力、体验、生态、文档、客服各个方面均超过5+或mui模式,以及超过所有其他跨平台框架。
uni-app的开发规范
- 页面文件遵循 Vue 单文件组件 (SFC) 规范
- 组件标签靠近小程序规范,详见 组件使用的入门教程 | uni-app官网 (dcloud.net.cn) uni-app 组件规范
- 接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni,详见uni-app接口规范
- 数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期
- 为兼容多端运行,建议使用flex布局进行开发
uni-app创建项目的两种方式
1.可视化界面
使用可视化创建项目的方式比较简单,HBuilderX内置相关环境,开箱即用,无需配置nodejs。
开始之前,开发者需先下载安装如下工具:
- HBuilderX:官方IDE下载地址
选择uni-app类型,输入项目名,选择模板,点击创建,即可成功创建。
uni-app自带的模板有。Hello uni-app,是官方的组件和API示例。还有一个重要模板是uni ui项目模板,日常开发推荐使用该模板,已内置大量常用组件。
2.cli 脚手架
除了HBuilderX可视化界面,也可以使用 cli
脚手架,可以通过 vue-cli
创建 uni-app
项目。
环境安装
全局安装vue-cli
创建uni-app
注意 :项目名中不能包含大写字母
选择模板
创建成功之后 cd到目录,yarn serve || npm run serve 启动项目,就可以点击连接查看页面啦!
uni-app项目框架
uni-app跨平台开发框架的优点
-
简单易上手:uni-app 支持 Vue.js 开发模式,适用于大多数前端工程师,而且它提供了类似于原生应用的开发体验。
-
多平台兼容性好:uni-app 可以生成多个平台的应用,包括 H5、小程序、App、快应用等,各个平台之间兼容性好,能够更好的节省开发时间。
-
性能高效:uni-app 内置了 Weex,Vue.js 和 Nerv 等渲染引擎,可以有效地提高应用的运行效率。
-
社区庞大:uni-app 拥有庞大的技术支持社区,有成千上万的开发者热爱并积极参与到其建设中来,使得它的生态系统更加完善。
-
跨行业应用广泛:uni-app 不仅应用于互联网领域,也适用于物联网、智能家居、汽车等行业,可以更好地满足不同用户的需求。
综上所述,uni-app 是一款强大的跨平台开发框架,有着开发简单易上手,多平台兼容性好,性能高效,社区庞大和应用广泛等优势,非常适合各种类型的应用开发。