热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何快速开发多端应用?-

现在一个应用需要有IOS,Android,webapp(通过phonegap等打包工具可变成app),这个是最基本的,有可能还需要微信端等等。现在国内有一些工具,比如:wex5,appcan,apicloud,HBuilder等等这些工具说是可以开发多端应用,在这么多工具之中我们应该如何选择呢?如果不使用这些工具用h5开发多端应用是否有更好的选择呢?比如:reactnative,可能后续vue也
现在一个应用需要有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跨域这些效果都达到原生体验,并且是一套代码兼容。
单页是不靠谱的,p的渲染效果比不上原生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/
推荐阅读
  • Python应用实例大揭秘:七大令人惊叹的高阶技巧展示
    2020年,Python无疑成为了最炙手可热的编程语言,其影响力已远远超出程序员的范畴。从初学者到资深从业者,甚至小学生,都在纷纷加入Python的学习热潮中。凭借其低门槛、易上手和强大的功能,Python正逐渐成为各行业不可或缺的工具。本文将揭示七个令人惊叹的Python高级应用技巧,帮助读者进一步提升编程水平。 ... [详细]
  • 掌握这些技巧,轻松获取超过90%的资源信息
    在数字时代,高效获取所需资源是每个人必备的技能。本文将分享一系列实用技巧,帮助读者轻松获取超过90%的网络资源信息,无论是学术资料、技术文档还是最新资讯,都能迅速找到。通过优化搜索引擎使用、利用专业数据库和社群资源等方法,读者将能够在信息海洋中游刃有余。 ... [详细]
  • Android工程师最容易遇到4个瓶颈是什么?附带学习经验
    一些感悟穷人的一次失败,为了还债可能一辈子都翻不了身,为还债一辈子送外卖。你将不再会有精力去思考和投机。穷人的失败可能断送了他所有暴富的机遇和时间&# ... [详细]
  • 资源:吊炸天!74款APP完整源码!android界面中点击输入框时弹出输入法如果输入框在底部会出现输入法遮挡输入内容的问题解决办法设置activity的windowsoftinpu ... [详细]
  • 来自微信官方:微信支付跨平台软件架构首次曝光
    大纲背景线上效果指标什么是软件架构为什么需要软件架构从零到一构建支付跨平台软件架构1.抽象业务流程2.加入路由机制3.管理网络请求4.规范数据传递总结背景作为一个重要业务ÿ ... [详细]
  • 开发笔记:Appium自动化测试之微信h5元素识别和代码实战
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了Appium自动化测试之微信h5元素识别和代码实战相关的知识,希望对你有一定的参考价值。总会有人问微信的自动化测试怎么做 ... [详细]
  • 我们程序员为什么要关注 JavaScript ?_js
    受这周我在企业中看到的JS现状的启发,我写了这篇文章。10年之前,我从来没有想过现在的JavaScript竟然会变得几乎无处不在。下面是几个你之所以要关注Java ... [详细]
  • 工作8年后薪资从1万跃升至7万,网友惊叹:本科学历实属难得
    一位本科毕业生在工作8年后,凭借扎实的技术能力和不断的学习提升,成功将月薪从1万元提高到7万元,引发了网友们的广泛赞叹。这一成就不仅体现了个人的努力与坚持,也反映了当前技术领域对高素质人才的迫切需求。 ... [详细]
  • 帝国CMS中的信息归档功能详解及其重要性
    本文详细解析了帝国CMS中的信息归档功能,并探讨了其在内容管理中的重要性。通过归档功能,用户可以有效地管理和组织大量内容,提高网站的运行效率和用户体验。此外,文章还介绍了如何利用该功能进行数据备份和恢复,确保网站数据的安全性和完整性。 ... [详细]
  • Python 伦理黑客技术:深入探讨后门攻击(第三部分)
    在《Python 伦理黑客技术:深入探讨后门攻击(第三部分)》中,作者详细分析了后门攻击中的Socket问题。由于TCP协议基于流,难以确定消息批次的结束点,这给后门攻击的实现带来了挑战。为了解决这一问题,文章提出了一系列有效的技术方案,包括使用特定的分隔符和长度前缀,以确保数据包的准确传输和解析。这些方法不仅提高了攻击的隐蔽性和可靠性,还为安全研究人员提供了宝贵的参考。 ... [详细]
  • 本文探讨了如何有效地构建和优化微信公众平台账号,涵盖了用户信息管理、内容创作与发布、互动策略及数据分析等方面。通过合理设置用户信息字段,如用户名、昵称、密码、真实姓名和性别等,确保账号的安全性和用户体验。同时,文章还介绍了如何利用微信公众平台的各项功能,提升用户参与度和品牌影响力。 ... [详细]
  • 如何完美的解决时间轴开发中的
    这些天,正在赶一个Ionic+phoneGap+Angular1.0的项目整改,具体涉及到的一个时间轴的开发。首先贴出UI设计图,是图中的蓝色部分的开发:备注:由于这部分 ... [详细]
  • 前后端分离,我怎么就选择了 Spring Boot + Vue 技术栈?
    前后端分离,我怎么就选择了 Spring Boot + Vue 技术栈? ... [详细]
  • 四十六、PhoneGapPhoneGap可能是Android最初的替代应用框架,于200 ... [详细]
  • 本文给大家讲解下如何在Ubuntu11.04环境下使用Eclipse,AndroidSDK和PhoneGap搭建Android开发环境。#1,安装Eclipse和AndroidSD ... [详细]
author-avatar
手机用户2502939177
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有