多端开发之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的问题。

posted @ 2022-02-20 10:25  freephp  阅读(2759)  评论(3编辑  收藏  举报