uni-app：基于Vue的跨端框架（闪电演讲内容整理) | 掘金开发者大会

落日映苍穹つ 2022-05-11 03:40 32阅读 0赞

感谢掘金提供机会，跟大家闪电分享一下uni-app ^\_^

一句话介绍[uni-app][] ：一款基于vue的跨平台前端框架；  
多说两句就是：开发者通过编写 Vue.js 代码，uni-app 将其编译到iOS、Android、微信小程序等多个平台，保证其正确运行并达到优秀体验。

![70][]

随着微信小程序的成熟火爆，支付宝、百度、手机厂商等阵营也逐步推出自己的小程序/快应用规范，除了之前的iOS、Android、H5平台外，前端开发者还要面临多家小程序的适配开发，工作量在剧增，规范学习成本在提高，uni-app就是为了解决这些跨端兼容而生。

**规范**  
从设计开始，uni-app有一个基本原则：充分利用现有前端生态，尽量不新立规范，减少前端学习成本，因 此[uni-app][] 的开发规范大量借鉴了微信小程序和Vue.js；  
具体来讲，组件标签和api靠近微信规范，数据绑定和文件系统靠近vue，开发者编写一个业务页面时，无需像原生小程序那样编写wxml、wsxx、js、json四个文件，而只需要编写一个扩展名为 .vue 的 single-file components(单文件组件)文件即可。这样的设计，方便有一定 Vue.js 和微信小程序开发经验的开发者可快速上手 uni-app ，开发出兼容多端的应用。

**跨端**  
关于跨端框架，很多开发者可能会担心跨端意味着丢失平台特色，uniapp 对此的解决方案是引入[条件编译][Link 1]，开发者可以优雅的为某平台写个性化代码、调用专有能力而不影响其他平台。

**工具**  
关于IDE支持，HBuilderX对uni-app提供了良好的开发支持，包括语法提示、代码块、真机运行、云端打包等。HBuilderX 是HBuilder的下一代产品，全新架构，更轻量化，欢迎大家使用。

**生态**  
生态方面，DCloud发布了一些常用的扩展组件和业务模版，比如索引列表，城市联动；围绕DCloud产品有大量前端开发者，也贡献了不少组件模板，比如图片裁剪等。另外，uni-app兼容mpvue项目，mpvue相关的开源组件和项目，都可以快速迁移到uni-app中。

最后，屏幕右下角的小程序码是 uni-app 的[组件能力演示程序][Link 2]，大家可以扫码体验。

我的演讲到此结束，谢谢大家！

[uni-app]: http://uniapp.dcloud.io
[70]: /images/20220511/b71b269a0e2146378b2ae831eb3f28ce.png
[Link 1]: http://uniapp.dcloud.io/platform
[Link 2]: http://m3w.cn/uniapp