当前位置:Gxlcms > html代码 > 如何快速开发多端应用?

如何快速开发多端应用?

时间:2021-07-01 10:21:17 帮助过:11人阅读

现在一个应用需要有IOS,Android,webapp(通过phonegap等打包工具可变成app),这个是最基本的,有可能还需要微信端等等。现在国内有一些工具,比如:wex5,appcan,apicloud,HBuilder等等这些工具说是可以开发多端应用,在这么多工具之中我们应该如何选择呢?如果不使用这些工具用h5开发多端应用是否有更好的选择呢?比如:react native,可能后续vue也会出一个类似react native的解决方案。请了解的童鞋分析一下各种方案利弊或者你们有更好的选择求分享。

回复内容:

上周写了一篇文章:

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:phodal
链接:zhuanlan.zhihu.com/phod
来源:知乎

Web本身就是跨平台的,这意味着这中间存在着无限的可能性。

我是一名Web Developer,对于我来能用Web开发的事情就用Web来完成就好了——不需要编译,不需要等它编译完。我想到哪我就可以写到哪,我改到哪我就可以发生哪发生了变化。

最近我在写Growth——一个帮助开发人员成长的应用,在近一个月的业余时间里,完成了这个应用的:

  • 移动应用版:Android、Windows Phone、iOS(等账号和上线)
  • Web版
  • 桌面版:Mac OS、Windows、GNU/Linux

截图合并如下:

而更重要的是它们使用了同一份代码——除了对特定设备进行一些处理就没有其他修改。相信全栈的你已经看出来了:

Web = Chrome + Angular.js + Ionic

Desktop = Electron + Angular.js + Ionic

Mobile = Cordova + Angular.js + Ionic

除了前面的WebView不一样,后面都是Angular.js + Ionic。

从Web到混合应用,再到桌面应用

在最打开的时候它只是一个单纯的混合应用,我想总结一下我的学习经验,分享一下学习的心得,如:

  • 完整的Web开发,运维,部署,维护介绍
  • 如何写好代码——重构、测试、模式
  • 遗留代码、遗留系统的形成
  • 不同阶段所需的技能
  • 书籍推荐
  • 技术栈推荐
  • Web应用解决方案

接着我用Ionic创建了这个应用,这是一个再普通不过的过程。在这个过程里,我一直使用Chrome在调度我的代码。因为我是Android用户,我有Google Play的账号,便发布了Android版本。这时候遇到了一个问题,我并没有Apple Developer账号(现在在申请ing。。),而主要的用户对象程序员,这是一群不土的土豪。

偶然间我才想到,我只要上传Web版本的代码就可以暂时性实现这个需求了。接着找了个AWS S3的插件,直接上传到了AWS S3上托管成静态文件服务。

几天前在Github上收到一个issue——关于创造桌面版, 我便想着这也是可能的,我只需要写一个启动脚本和编译脚本即可。

所以,最后我们的流程图就如下所示:

除了显示到VR设备上,好像什么也不缺了。并且在我之前的文章《Oculus + Node.js + Three.js 打造VR世界》,也展示了Web在VR世界的可能性。

在这实现期间有几个点可以分享一下:

  1. 响应式设计
  2. 平台/设备特定代码
响应式设计

响应式设计可以主要依赖于Media Query,而响应式设计主要要追随的一点是不同的设备不同的显示,如:


这也意味着,我们需要对不同的设备进行一些处理,如在大的屏幕下,我们需要展示菜单:


而这可以依赖于Ionic的expose-aside-when="large",而并非所有的情形都是这么简单的。如我最近遇到的问题就是图片缩放的问题,之前的图片针对的都是手机版——经过了一定的缩放。

这时在桌面应用上就会出现问题,就需要限定大小等等。

而这个问题相比于平台特定问题则更容易解决。

平台特定代码

对于特定平台才有的问题就不是一件容易解决的事,分享一下:

存储

我遇到的第一个问题是数据存储的问题。最开始的时候,我只需要开始混合应用。因此我可以用Preferences、或者SQLite来存储数据。

后来,我扩展到了Web版,我只好用LocalStoarge。于是,我就开始抽象出一个$storageServices来做相应的事。接着遇到一系列的问题,我舍弃了原有的方案,直接使用LocalStoarge。

数据分析

为了开发方便,我使用Google Analytics来分析用户的行为——毕竟数据对我来说也不是特别重要,只要可以看到有人使用就可以了。

这时候遇到的一个问题是,我不需要记录Web用户的行为,但是我希望可以看到有这样的请求发出。于是对于Web用户来说,只需要:


        trackView: function (view) {
          console.log(view);
        }
Ionic + LeanCloud; react 方面暂时没有能够像 ionic 提供这么充足的满足移动场景的框架体系 wex5,appcan,apicloud,HBuilder等等这些工具确实是都在推广一次开发多端运行,不过宣传是宣传,具体操作也都有自己非常明显的优缺点,在这里简单的说一下(谨代表个人观点,不喜勿喷)
wex5的界面比较赏心悦目一些,开发过程比较爽,数据和视图是分离的,当然这个东西是锦上添花并非关键,混合开发最受质疑的是性能问题,运行卡顿,在这几款工具中,能够把这个问题处理的最好的应该是wex5,唯一一个用单页加载的开发工具,页面加载极速,这个想必也是他铁杆粉丝大爱的原因之一吧,虽然开发中会遇到一些问题,不过还好都不是重点。
appcan是这个行业中最古老的了,宣传也一直以领导者倡导者自居,在互联网世界中历史悠久难道是好事么,这个总觉着有点奇怪,不过话说产品是王道,各方面来说总的还可以,不过比较致命的是打包好的app会加入他们的一些代码,这些代码会做一些服务器请求,然后呢,由于他们的服务器非常不稳定,经常导致无法请求成功,其结果就是app没法打开或者直接崩溃,这点让人很无语,就我个人的观察来看,基本上可以保证每个月都出问题,官方的响应也非常慢经常一两天搞不定(要是周六周末就更惨,肯定找不到人-_-)。基本上你喊破喉咙也没人理你。总之,就我个人的使用经验来看,appcan对免费版的支持相当差(你可以认为是没支持-,-),至于企业版,我没买,所以不知道是个什么程度。所以如果你做的东西不是什么要紧的东西,那么用它就无所谓,如果是打算开发靠谱的东西,建议你绕道
apicloud是以前appcan里的一位核心技术人员,后来走了,就自己创办的apicloud,这个是背景,也不能说因为此就断定apicloud肯定是没有appcan有实力的,我只发表我个人使用过的观点,所谓的组件化(UzModule)开发,对Android的生命周期支持非常不到位,常见的onPause,onResume都无法实现;onCreate也没有使用,在社区里逛了之后,感觉很多东西都是二手的,抄袭无疑是apicloud让开发者最反感的一点,2015年5月, APICloud因抄袭、反编译DCloud产品代码而被DCloud起诉侵权。
HBuilder主打云+端为优势,倡导像国外软件一样能够联网开发,但是开发者不接受这一套,我就开发个软件 还需要注册登录,感觉像是被偷窥了代码一样的感觉,让人费解,HBuilder团队终于在2015年夏季推出了可离线编辑,但是依然每天会有建议强制联网提示,其他的倒是还可以接受的。
总的来说,各有各的优势,楼主要是想深入了解的话可以下载下来大体看一下,如果比较着急开发东西的话,建议用wex5吧,我现在常用的也是wex5,虽然也有小缺憾,不过相比较而言,是用起来比较爽的国内开发工具了。 目前能多端开发且体验优良的,应该只有mui了。
mui在微信下使用普通浏览器api,在app下使用增强api,可以做到app模式下窗体切换、下拉刷新、ajax跨域这些效果都达到原生体验,并且是一套代码兼容。
单页是不靠谱的,div的渲染效果比不上原生view的渲染。
以窗体切换为例,使用mui.openWindow,在app模式下是自动走原生的view动画切换,而web下则走网页切换,但代码还是一套代码,框架自动兼容处理了。

另外回下 @阳光下的我们 HBuilder不强调联网开发,开发者写的代码根本没有办法存在DCloud的服务器。但是HBuilder的开发者有社区的概念,有账户、提问回答、积分威望,所以DCloud鼓励开发者注册账户。话说现在vs、dreamweaver这些软件也都有账户概念。 说到快,那么你试试meteor吧 GitHub - benoitvallon/react-native-nw-react-calculator: Mobile, desktop and website Apps with the same code

虽然build流程有点复杂,但是对于react的生态圈来说,成熟的跨平台pipeline应该会慢慢出现。至少我打算试验一下。 没有人提Xamarin吗。。。 越是多端的应用,最核心的越是数据结构和API的交互设计。
核心的业务逻辑清晰了,搭建好API之后,不管有多少端,加一个端只是多加一套界面而已。。。 Ionic: Advanced HTML5 Hybrid Mobile App Framework

CSS Components

ngCordova - Simple extensions for common Cordova Plugins 我推荐使用Qt

qt.io/developers/

人气教程排行