0

0

如何快速开发多端应用?

php中文网

php中文网

发布时间:2016-06-07 08:41:49

|

2385人浏览过

|

来源于php中文网

原创

现在一个应用需要有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——关于创造桌面版, 我便想着这也是可能的,我只需要写一个启动脚本和编译脚本即可。

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

芒果商城系统GSHOP
芒果商城系统GSHOP

芒果系统GSHOP 纯静态商城系统,你还在为商城的优化而苦恼?GSHOP是全站纯静态商城系统,一键seo优化功能解决seo问题,自定义URL链接解决商城同质化问题;多页面显示:动态页、伪静态页面、纯静态页面增加收录,提升网站权重,提升流量等。安全稳定、功能强大的商城系统。1、芒果商城系统基于 php5.0开发,企业级应用。2、产品功能Ajax设计,响应速度更快,购物体验更好。3、全新密钥存放机制,

下载
如何快速开发多端应用?

除了显示到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/

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

76

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

73

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

67

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

19

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React Native进阶精讲视频教程
React Native进阶精讲视频教程

共17课时 | 3.4万人学习

React Native基础精讲视频教程
React Native基础精讲视频教程

共21课时 | 4.7万人学习

React Native 电商项目实战
React Native 电商项目实战

共74课时 | 18.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号