Uniapp 是什么?
- uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
- DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app(详见),腾讯课堂官方为uni-app录制培训课程(详见),开发者可以放心选择。
- uni-app在手,做啥都不愁。即使不跨端,uni-app也是更好的小程序开发框架(详见)、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目,你都可以快速交付,不需要转换开发思维、不需要更改开发习惯。
基本语言和开发规范
- uni-app代码编写,基本语言包括js、vue、css。以及ts、scss等css预编译器。
- 在app端,还支持原生渲染的nvue,以及可以编译为kotlin和swift的uts。
- DCloud还提供了使用js编写服务器代码的uniCloud云引擎。所以只需掌握js,你可以开发web、Android、iOS、各家小程序以及服务器等全栈应用。
- 为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范:
- 页面文件遵循 Vue 单文件组件 (SFC) 规范,即每个页面是一个.vue文件
- 组件标签靠近小程序规范,详见uni-app 组件规范
- 接口能力(JS API)靠近小程序规范,但需将前缀 wx、my 等替换为 uni,详见uni-app接口规范
- 数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期
- 如需兼容app-nvue平台,建议使用flex布局进行开发
- uni-app分编译器和运行时(runtime)。uni-app能实现一套代码、多端运行,是通过这2部分配合完成的。
- 编译器将开发者的代码进行编译,编译的输出物由各个终端的runtime进行解析,每个平台(Web、Android App、iOS App、各家小程序)都有各自的runtime。
App原生渲染
- uni-app App 端内置了一个基于 weex 改进的原生渲染引擎,提供了原生渲染能力。
- 在 App 端,如果使用 vue 页面,则使用 webview 渲染;如果使用 nvue 页面(native vue 的缩写),则使用原生渲染。一个 App 中可以同时使用两种页面,比如首页使用 nvue,二级页使用 vue 页面,hello uni-app 示例就是如此。
- 虽然 nvue 也可以多端编译,输出 H5 和小程序,但 nvue 的 css 写法受限,所以如果你不开发 App,那么不需要使用 nvue。
- 以往的 weex ,有个很大的问题是它只是一个高性能的渲染器,没有足够的 API 能力(比如各种 push sdk 集成、蓝牙等能力调用),使得开发时非常依赖原生工程师协作,开发者本来想节约成本,结果需要前端、iOS、Android 3 拨人开发,适得其反。 nvue 解决了这个问题,让前端工程师可以直接开发完整 App,并提供丰富的插件生态和云打包。这些组合方案,帮助开发者切实的提高效率、降低成本。
Uniapp 新冠抗疫案例
- uni-app助力数百家单位快速上线抗疫系统,开源众多项目。
- 首都疫苗服务 App
- 广东 粤核酸 微信小程序
- 广东 粤健通 微信小程序
- 广州市 穗康生活 微信小程序
- 海南 海易办 微信小程序
- 陕西一码通 微信小程序
- 健康陕西公众服务 微信小程序
- 健康西安公众服务 微信小程序
- 河南疾控 微信小程序
- 平顶山 鹰城官微 微信小程序
- 开封市 汴易检 微信小程序
- 三门峡市 灵宝一码通 微信小程序
- 湖北健康码 微信小程序
- 山西 晋快检 微信小程序
- 云南省居民电子健康卡 微信小程序
- 西双版纳 平安版纳 微信小程序
- 黑龙江 健康龙江服务平台 微信小程序
- 黑龙江 密山疫情防控 微信小程序
- 贵州健康码 微信小程序
- 贵州 黔康码 微信小程序
- 河北新冠疫苗预约 懂苗服务 微信小程序
Uniapp 品牌案例
- 华为荣耀亲选商城: 华为公司旗下荣耀品牌精品电商平台。
- 星巴克:全球最大的咖啡连锁店,世界领先的特种咖啡零售商
- Crimaster犯罪大师:火爆的全球推理侦探专属社区。优秀App案例,Appstore娱乐分类排名曾排第1位
- 中国教育发布:中华人民共和国教育部官方App
- CSDN: Appstore新闻类榜单前十
- vivo官方商城: vivo公司旗下的官方自营商城。