跨端开发框架uni-app实践
一、项目背景
开发中我们遇到一个需求，在非常短的时间内，开发一款APP，APP内容简单，主要是静态页面，没有和原生的交互，没有性能要求；我们前端团队的情况是，使用Vue技术栈，有Web、小程序开发经验，无APP开发经验，基于此背景，我们对跨端框架进行了调研。
目前主流的跨端框架主要有Flutter、React Native、Taro、uni-app。其中Flutter、React Native主要是用来开发跨安卓和IOS客户端的APP，没有WEB开发和小程序开发的能力，适用于跨端APP开发，性能好，有一定学习成本。Taro和uni-app类似，既能生成APP，也支持Web和小程序，但是Taro开始只支持React技术栈，虽然现在也支持Vue技术栈，但是从目前的社区和生态来看，还是更适合React技术栈使用。uni-app使用Vue开发，上手简单，可直接打包成APP，鉴于时间紧和没性能需求的前提，我们把目标锁在上了uni-app上。
二、uni-app介绍
uni-app是一款非常主流的跨端开发框架，开发者只需编写一套代码，即可同时生成Android应用、IOS应用、Web页面、快应用以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）。当业务需要在不同端都有所表现的时候，非常适合，只需开发和维护一套代码，能节省很多开发资源；在团队没有APP开发能力，而需要短时间产出一款APP的时候，也非常适用。在主流跨端框架中，占据非常重要的地位。uni-app主要优势如下：
1、基于通用前端技术栈，采用Vue和微信小程序API，只要有前端基础就能很快上手；
2、有丰富的周边生态，插件市场有数千款插件，内置大量组件；
3、社区活跃，有35+个2000人的交流群，github目前有39.7k的star，更新频繁；
4、有自己的开发工具HBuilderX，集成度、工程化程度高，能提升开发、打包部署效率；
5、有非常详细且随uni-app发展及时更新的文档；
6、专业公司开发，不是API项目，2018年开源，有大量开发者和开发案例，成熟稳定。
综合分析之后，采用uni-app进行开发是当下最合适的技术方案。
三、uni-app实践
首先介绍下uni-app相关基础：uni-app的跨端原理、开发规范、可构建目标。
1、uni-app跨端原理
uni-app分为编译器和运行时(runtime)，uni-app能实现一套代码多端运行，就是基于编译器将代码进行编译，编译的输出物再由各端runtime进行解析，每个平台（Web、Android App、iOS App、各家小程序）都有各自的runtime。编译器运行在电脑开发环境，HBuilderX工具里有内置，也可以使用cli版。我们按照uni-app开发规范编写代码，编译器即可将代码编译成每个平台支持的代码。
2、开发规范
uni-app代码编写，基本语言包括JS、Vue、CSS以及TS、SCSS等预编译器。除此之外，为了实现多端兼容，uni-app还约定了几条开发规范：
1) 页面文件遵循Vue单文件组件规范，即每个页面是一个.vue文件；
2) 组件标签和接口能力类似微信小程序规范，只是将前缀wx、my等替换为uni；
3) 数据绑定和事件处理同Vue规范，同时添加了类似小程序的应用生命周期和页面生命周期。
3、可构建目标
1) 编译器可以将.vue文件编译为JS文件，构建成Web端可以直接运行的包；
2) 可以将.vue文件拆分生成wxml、wxss、js等代码，构建为小程序端可以运行的包；
3) 可以将.vue文件编译为JS文件后，加上外壳，构建为APP包，让JS文件在webview中运行。uni-app App端还内置了一个基于weex改进的原生渲染引擎，如果使用.nvue页面，则支持原生渲染。鉴于weex已经长时间没更新，并不推荐采用.nvue文件进行原生渲染。（去年底新出的uni-app x，可以直接构建原生APP，后面会详细介绍）。
uni-app可以通过HBuilderX或者vue-cli命令行两种方式创建应用，下面我们将使用HBuilderX结合实际项目讲述下uni-app的使用。
1、下载HBuilderX编辑器
HBuilderX是通用前端开发工具，但为uni-app做了特别强化。
2、初始化一个项目
点击文件 -> 新建 -> 项目，即可初始化一个项目，日常开发推荐选择uni-ui模版，该模版已内置大量常用组件。
3、运行项目
项目创建完成后，会生成初始目录，和demo文件。点击运行 -> 运行到内置浏览器，可看到如下界面，左侧是项目目录，中间是代码区，右侧是项目预览和调试区：
通过一个具体的页面也可以看到，uni-app的标签和API类似微信小程序，只是将前缀wx.改为了uni.，.vue文件同时支持选项式方式和组合式API，setup的方式。
4、开发和配置
然后和常规Web和小程序开发类似，构建页面，组件等。功能开发完成之后，可以点击manifest.json文件，进行可视化配置，针对需要构建的端进行相应的配置，如图标，页面标题，打包配置等。
5、开发和配置都完成之后，可以点击发行，选择打包成APP、Web或者小程序。APP打包可以选择云打包或者本地打包，选择云打包无需额外操作，默认勾选安心打包，不提交本地应用代码，安全，也很快。
打包后的文件都会在unpackage目录下。比如进行原生APP云打包之后，将会在unpackage -> release -> apk下面看到打包之后的xxx.apk文件，可以直接在安卓手机上安装使用。
四、总结
整体上来说，uni-app上手简单，熟悉Vue和微信小程序就能直接上手，但整体使用下来，也遇到一些bug。社区上对uni-app的讨论也很多，正面的就是上手简单，在跨端场景下，一套代码能生成多端应用，大大提高开发和维护效率。负面的就是bug多，生成的APP应用性能低，遇到问题，还是需要原生APP开发解决。每个框架都有其擅长的应用场景，针对自己实际的开发场景选择最合适的就可以。
另外uni-app背后的公司Dcloud在去年底又出了一个更强大的跨端框架uni-app x，是下一代uni-app，引入了新的uts语言，uvue渲染引擎，uts在iOS端编译为swift、在Android端编译为kotlin，实现了APP原生渲染，性能与原生一致。uni-app x目前还在逐步完善中，期待一下它的表现吧！
