多端开发之uniapp开发app

最近在给f做一些工具app，学习了不少关于uniapp编写android应用的知识。

首先，App应用的创建的时候要选择项目类型为uniapp类型。最开始我选择的是h5+项目，这种项目就比较容易写成纯js的项目，利用一些html5plus能力，或者使用mui来编写手机app。

我调研了一下，uniapp和h5+（mui为代表）的差异和优缺点如下所示。

技术类型	优点	缺点
uniapp	可以使用unipp封装的组件和api，有海量的插件可以从插件市场中找到。兼容多端，也可以用html5plus的api能力。可以复用小程序项目的逻辑代码，对团队的技术积累有好处。	需要学习vue语法，可能性能没有mui的优化效果好。
H5+	也可以跨端生成多种应用，但是不能使用uniapp的组件、插件以及api中涉及h5的能力。其中mui号称可以达到原生应用级别的性能和交互效果。	局限于原生js以及依赖库的编写方式。无法统一和小程序项目的技术栈和编程方式，无法服用代码。

我首先尝试了一下h5+的mui项目，发现写起来很原始，因为大部分能力都是mui的js库提供的，写法完全和uniapp项目不同，很多uniapp封装的组件和api都不能直接使用。为了长远考虑，如果以后还要生成ios的app，mui技术未必适合。

再加上之前的小程序端也是uniapp类型项目，有很多基础库和方法是可以借鉴的，所以最终选择使用uniapp类型的项目来开发f端的app。

不得不说uniapp来开发跨端的应用是非常方便的，同一套代码除了平台特性的代码不能直接在其他平台上用，大部分通用的能力和代码是可以复用的。

tab上的定义还是在pages.json里面的tabBar定义，图片资源的目录结构也可以参考之前的项目。

然后就是一些功能开发了，其中uuid的获取方式和小程序不通，原始app的获取uuid（设备的唯一标识）的api在html5plus上也有对应的api，获取方式如下所示。

const uuid = plus.device.uuid;

值得一提的是html5plus里面提供了非常多好用的html5新特性，包括蓝牙（Bluetooth）、AD（广告联盟模块）、设备麦克风（Audio）、二维码（BarCode）、设备的摄像头（Camera）、设备信息（Device）、系统相册（Gallery）等。上面获取uuid的方法就属于管理设备信息的API之一。国内有专门的HTML5产业联盟，相关API可以从这里跳转。

由于我是开发的andorid app，所以在调试的时候也会使用到android studio，关于调试的方法我会单独写一篇文章来讲述，这里不展开说。大部分时候我们都有2种选择，要么使用AVD（虚拟设备）来调试app，要么连接真实手机进行调试（假设你有android系统的手机）。

调试的过程会遇到一些坑（后面写专题单独讲），但是最终我们是可以开发出较为满意的app，通过hbuilder可以打包成需要的apk。

这种开发模式非常流畅，适合创业团队或者全栈技术人，一套代码生成多端，开发效率非常高。测试代码也可以复用之前的，uniapp项目的自动化测试都是类似的，对测试团队也是非常友好。

性能方面，由于是小范围使用，数据量不是很大，体验上和原生app差别不大。对于资源也能预加载，这方面我还没有深入了解，但是提供了相关api，不用太担心lazy load的问题。