如何快速开发多端应用?-H5 Tutorial-php.cn

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

回复内容：

上周写了一篇文章：

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

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世界的可能性。

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

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

响应式设计

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

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

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

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

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

平台特定代码

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

存储

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

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

数据分析

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

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

<code class="language-text">        trackView: function (view) {
          console.log(view);
        }
</code>Copy after login

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

http://www.qt.io/developers/