跨端开发应用案例分享（跨端云开发）

本篇文章给大家谈谈跨端开发应用案例分享，以及跨端云开发对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 今天给各位分享跨端开发应用案例分享的知识，其中也会对跨端云开发进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、阿里跨终端的H5游戏开发解决方案——Hilo
• 2、跨端开发面面谈之基于WebView的Hybrid开发模式
• 3、移动互联网应用的应用案例分析
• 4、移动APP开发框架盘点2：Web移动前端框架大全
• 5、如何用 ionic 框架快速开发跨平台移动应用

阿里跨终端的H5游戏开发解决方案——Hilo

Hilo是由阿里巴巴集团开发的一款 HTML5 跨终端 游戏 解决方案，可以帮助开发者快速创建 HTML5 游戏 。有以下特征：独立模块设计，支持多种模块范式的包装版本;面向对象程序化开发;多重渲染模型，其中包括 Canvas，DOM 和 WebGL 等;兼容多台台式机和移动浏览器；使用 Flash Shim 来支持 IE ;支持物理扩展： Chipmunk；支持骨骼动画扩展： DragonBone！
1、Hilo 支持多种模块范式的包装版本，包括AMD，CMD，COMMONJS，Standalone多种方式接入。另外，你可以根据需要新增和扩展模块和类型；
2、极精简的模块设计，完全面向对象；
3、多种渲染方式, 提供DOM，Canvas，Flash，WebGL等多种渲染方案（目前已经申请专利）；
4、全端浏览器的支持和高性能方案，独有的Flash渲染方案，即使在低版本IE浏览器下也可以跑起来“酷炫” 游戏 ； DOM渲染方案能显著解决低性能手机浏览器遇到的性能问题；
5、物理引擎支持——Chipmunk，支持自扩展物理实现；骨骼动画支持——DragonBones，同时内建骨骼动画系统——Tahiti（目前内部使用）；
6、案例丰富，框架成熟，已经经历多届阿里巴巴双十一，年中大促互动营销活动考验；
舞台Stage是一个各种图形、精灵动画等的总载体。所以可见的对象都要添加到舞台或其子容器后，才会被渲染出来。

Stage构造函数接收一个参数properties，此参数包含创建stage的各种属性。

舞台Stage上的物体的运动等变化，都是通过一个定时器Ticker不断地调用Stage.tick()方法来实现刷新的。

舞台上的一切对象都是可视对象，可以是图片、精灵、文字、图形，甚至DOM元素等等。Hilo提供了一些基本的可视类供您使用，比如添加一个图片到舞台上：

要想舞台上的图形、精灵动画等对象能响应用户的点击、触碰等交互事件，就必需先为舞台开启DOM事件响应，然后就可以使用View.on()来响应事件。

接下来，您就可以开始利用hilo提供的各种可视类来创建各种图形、精灵动画，尽情发挥您的创造力，开始您的HTML5 游戏 之旅吧！

Hilo对于开发H5 游戏 的开发者和对Web端渲染感兴趣的小伙伴来说值得一看，Hilo有诸多案例可供参考，如果你想继续深入了解它，可移步官方文档或者Github一探究竟！

跨端开发面面谈之基于WebView的Hybrid开发模式

跨终端移动开发是近期准备总结的一个主题，作为这一系列的开始，首先简单说说基于WebView的Hybrid混合开发模式。

有过混合应用开发经验的同学，对基于WebView的Hybrid开发模式应该不会陌生。借助于原生端各平台的WebView组件，可以实现Native和JavaScript的双向通信，从而将Web APP与Mobile App融合起来，开启混合开发的新模式。

基于WebView的Hybrid开发模式到如今已经非常成熟，不再是一个实验性新技术，而是广泛应用在各大厂商的平台型应用如微信、手Q中。

JSBridge作为连接Native和JavaScript的桥梁，是基于WebView的Hybrid开发模式中的关键点。
在了解其通信原理后，再来看JSBridge究竟是什么。从前端角度来看，可能会把JSBridge理解为业务开发过程中，以全局变量注入到WebView中，帮助调用原生API的JavaScript工具库。这样的理解不够准确，按照我的理解，JSBridge不是一个标准的规范，基于原生系统为WebView组件提供的能力，已经可以建立起WebView JavaScript bridge，即使不再做更高程度的封装，也可以完成从Native到JavaScript的双向通信了。

我们所说的JSBridge，是对底层通道的抽象封装，这一过程包括了原生和JavaScript两侧内容，在原生端需要考虑系统API差异，对上层调用提供统一接口，在JavaScript端需要考虑调用方式，请求管理等内容。JSBridge的设计实现已经是成熟技术了，其设计可以参考 In-depth Profiling of JSBridge 、 Hybrid APP架构设计思路 ，一个安卓端完整JSBridge实现可以参考 JsBridge实现 。

目前，基于WebView的Hybrid开发模式非常成熟，广泛应用于各类平台型App中。实现一个完善的JSBridge是在现有App中集成使用Hybrid开发模式的基础，在完成这一基础设施建设后，大家继续在各个方向深挖，在不同的维度不断优化性能和体验。

多数App的Hybrid部分做到上面部分，已经有了还不错的体验。在我的了解中，空间团队在上面基础上继续优化给出的是当前做的更好的方案。其主要流程如下图所示，详细内容可以参考 QQ空间前端工程师如何做首屏优化
除了在现有App中集成使用这一开发模式，还可以使用这一技术开发独立App。早期的PhoneGap、Cordova、现在的Ionic，是这一领域较为知名的开发框架。

我司前端技术栈曾以Angular为主，一些App也由前端团队基于Angular技术栈选型Ionic。初入团队曾维护过基于Angular 1.x的Ionic App，用于我司投资顾问服务客户的以IM为主、综合一些其他业务，可以算一个比较复杂的应用。

前端技术背景的同学，采用Ionic框架开发App的学习成本不高。开发过程中仍在沿用前端技术，写的仍是Web App,跑在原生WebView容器中。采用Ionic提供的组件库，可以快速搭建项目界面。其扩展原生的机制也比较方便，如有原生能力的需求，并且没有现成实现的，可以自行封装使用，不过这个过程就需要原生开发同学的参与了。在我们的上述App开发中，主要是安卓端消息推送模块由原生开发同学提供了支持，其余对原生能力的需求如拍照、相册访问等常见需求，都有现成方案。

然而，采用Ionic完成上述应用，也有明显不足的地方。首先是聊天列表方面，我们知道，如微信和QQ聊天窗口，这是一个异构的无限滚动长列表，在进入聊天界面时，一般只加载最近的一屏聊天数据，然后通过滚动加载历史消息。在原生端完成这一需求有各种常见手段，而仅靠Web端技术，在各种折腾后，效果都不尽如人意。其次是动画，这里的动画包括了换页动画和其他动画，流畅程度一般。最后是前端开发通病，要处理浏览器兼容性问题，crosswalk只是一个理论解决方案，其体积限制了几乎不会被采用。

Ionic不断迭代，新的版本中依赖新的Angular。新的Angular与Angular 1.x开发体验已经完全不同，如果你还不了解，可以阅读我们团队书籍 揭秘Angular 2 。新的Ionic的开发体验，相比以往也有提升，在其工具链中，提供了拖拽式项目生成工具
同时，Ionic pro提供的开发者工具，为应用整个生命周期提供了完善的支持平台，包括了以下功能，不过，使用需要付费。

站在当下来看，对于前端技术背景开发者来说，如果已有Angular基础，不希望引入过高学习成本，需要快速开发一个复杂程度不算太高、或者对应用性能不是特别敏感的跨终端App，选择Ionic依然是一个可行方案。

然而，既然你已经身在前端领域这样一个技术更迭日新月异的圈子里，还是应该使劲的折腾，关注跨端开发这个主题新的技术热点，接下来我也会继续谈谈在NativeScript、React Native、Flutter的一些体验，可以保持关注。

移动互联网应用的应用案例分析

使用SMS汇钱。这一业务与传统转账业务相比，成本更低、速度更快、方便性更高。这一业务对发展中的市场会有很强的吸引力，在投入使用的第一年，用户可能超过几百万。
这一业务推出后也会面临挑战，包括管制和运营风险。由于移动转账发展很快，在管制方面，很多市场的管制者都会面临用户成本、安全、造假、洗钱等方面的问题。在运营方面，运营商要进入新的市场，市场条件的变化、业务运营商本地资源的运作，要求运营商采用不同的战略。 移动搜索的最终目的是促进手机的销售和创造市场机会。为跨端开发应用案例分享了达到这一目标，业界首先要改善移动搜索的用户体验。它列在十大业务的第三位，是因为它对技术创新和行业收入有很大的影响力。用户会对一些移动搜索保持忠诚度，而不是仅选择一家或两家移动搜索运营商。
根据Gartner的估计，移动搜索的利润将在若干移动搜索运营商间分摊，这些移动搜索提供商在技术上会有其独特之处。 2009年，全球生产的手机中，60%具有移动浏览功能。根据Gartner的计算，到2013年，这个比例会上升到80%。移动浏览列在十大业务第四位的原因是跨端开发应用案例分享：它在商业领域的广泛应用。
移动网站系统具有潜在、好的投资回报率。而且，它的开发成本相对较低。重复使用许多现有的技术和工具，使发送更新更灵活。因此，移动网站已被许多数企业用于B2C的移动战略。 移动健康监控是使用IT和移动通信实现远程对病人的监控，还可帮助政府、关爱机构等降低慢性病病人的治疗成本，改善病人们的生活质量。
在发展中国家的市场，移动性的移动网络覆盖比固定网更重要。今天，移动健康监控在成熟的市场也还处于初级阶段，项目建设方面到目前为止也仅是有限的试验项目。未来，这个行业可实现商用，提供移动健康监控产品、业务和相关解决方案。 移动支付通常用于三个目的：
一、在方式很少的情况下，它可进行支付;
二、它是在线支付的一种扩展，而且更容易和更方便;
三、安全性增加则是另一个原因。移动支付入主10佳业务，源于它对多方的影响，包括移动运营商、银行、装置提供商、管制者和用户。
发展中的市场和发达市场都对这一业务有兴趣，由于技术选择和商业模式多，管制需求和当地的条件，移动支付将是一个高度多样化的市场。在部署上没有统一的标准，每一个具体方案要一事一办。 近场通信(NearFieldCommunication，简称NFC)可实现相互兼容装置间的无线数据转输，只需将它们放在靠近的地方(10CM)。这一技术可用于零售购买、交通、个人识别和信用卡。Gartner将NFC排在第七位是基于它可增加用户对所有业务提供商的忠诚度，对运营商的商业模式产生跨端开发应用案例分享了很大的影响，比如：银行和交通公司。
Gartner期望从2010年下半年开始NFC会有大规模的部署。NFC电话生产方面，亚洲将保持领先，跟随其后的是欧洲和北美。 在全球经济衰退的情况下，各地区的移动广告业务继续增长。智能手机和无线互联网的使用增加，促进了移动广告业务的发展。2008年，移动广告总支出是5.302亿美元，2012年，这个数字可以达到75亿美元。
Gartner将移动广告排在前10位中，因为这一业务是在移动互联网上实现内容套现的重要方式，可为终端用户提供免费的应用和业务。移动渠道将被用于各种媒体，包括电视、广播、印刷和室外广告的竞争广场。
从历史上看，价格和使用性问题是一直影响移动即时信息发展的因素。商业化障碍和商业模式的不确定性，对运营商的部署和促销产生了负面影响。
Gartner将移动即时信息排在第九位，是因为存在潜在的用户和市场条件，将引导未来移动即时信息的发展。在发展中国家，很多用户依靠手机作为跨端开发应用案例分享他们通信的唯一工具。移动即时信息为移动广告和社会组网创造了发展的机会，因为它已建立了更多的移动即时信息用户。 移动音乐的发展上，除彩铃和振铃外，其它发展尽人失望。这是个可产生数以百万计收入的业务。
另一方面，放弃移动音乐价值的是不公平的。用户对手机音乐有需求，喜欢它随时相伴。跨端开发应用案例分享我们看到了这一产业链上各环节运营者在创新模式上所做的努力，比如：装置、业务捆绑、强调定价和可用性。iTunes的推出，让用户愿意为音乐付费，让用户获得超级体验和大不同。 传统电话会议机等产品对特定终端设备及空间的固化要求，逐渐让开会变成了很多商务人士的困扰。移动电话会议已经成为众多企业不可或缺的沟通工具。移动电话会议应用一经发布，便在Iphone苹果商店及安卓市场中就引来了-热，尤其以企业高管、律师、金融界从业者居多。及时语是利用手机快速召开电话会议的移动电话会议解决方案。借助3G/wifi网络体验全新概念的移动会议,在您参加会议的同时仍然可以随时利用手机来管理会议。

移动APP开发框架盘点2：Web移动前端框架大全

开源项目其实有一个成熟周期跨端开发应用案例分享，这个周期大概是三年左右，自React框架在2013年发布并引爆了前端框架的大潮，这个属于前端的周期就此开始了。

之后在2015年5月开源的React Native又开启了属于Web移动前端的周期，15-16年，18-19年，21-22年正好就是属于移动前端的三个爆发点。

三年前，在第一个成熟收获期，跨端开发应用案例分享我盘点了移动开发框架。在这第二个成熟收获期，理所当然要来盘点一波。

不过，当我点开github项目的code-frequency时，还是被这个准到吓人的周期猜想惊呆了，先给你们看一波，剩下的自行验证。

1、https://github.com/youzan/vant/graphs/code-frequency

2、https://github.com/quasarframework/quasar/graphs/code-frequency

再来说第二个比较有意思的发现，停止维护的项目绝大多数是Vue框架项目。

盘点开始的时候我还觉得React框架处于绝对劣势，到完成时我发现React无论在选择面还是成熟度上都超过了Vue。

原因我这里就不分析了，反正大家都有自己的看法。

网页类框架就是前端组件框架，这一次虽然有大量项目停止维护，但是也有很多项目坚持了下来，而且还涌现出了一批新项目。

大厂占了主导，因为这些年大厂在移动开发上的需求，远高于其它方面。个人项目要坚持确实不易。

本来是想要做一个验证项目，把所有框架都试用一遍并给出推荐度的。由于进度太慢，还是下一次再发吧。

这次的重点是渐进类框架，就是所谓多端同构框架（小程序框架）。这几年国内的重点的各种小程序平台，所以多端框架的需求很是旺盛。

不过大多数先行者都没挺过来还是让我很意外，只有Taro成功了，想想还是有很多让人唏嘘的东西。

在这里还是先预测一波吧，因为这一类框架最变化最大，最终还是有很多框架要出局的。

渐进类框架是一个过渡性的产品，最终会变成桥接类框架的一部分，所以，与桥接类框架协同才是框架的出路。

这个赛道基本全是大厂了。

腾讯新一代跨端开发框架Hippy

Hippy一看就是淘宝Weex的对标项目，Kpi功能全面压制。所以官方支持 React 和 Vue 两种主流前端框架。在Weex2019年实质停更后发布，要不要这么卷跨端开发应用案例分享？

Hippy 2.x 架构主要分成三层，UI(JS) 层 Hippy-React 和 Hippy-Vue 负责驱动 UI 指令生成跨端开发应用案例分享；中间层 C++ HippyCore 负责抹平平台差异性和提供高性能模块跨端开发应用案例分享；渲染层 Android 和 iOS 负责提供终端底层模块、组件，并与布局引擎通信。

对Weex惨遭遗弃，我上次就说过：「ReactNative提供工具，Weex提供框架，将平台差异化屏蔽（Write Once, Run Everywhere）。所以Weex则注定功能相对弱小，并且坑比较多。」Weex最终下马也是必然的，淘宝又发布升级版北海，为了实现（Write Once, Run Everywhere），它采用自绘，而且是基于Flutter自绘。

所以Hippy3.x就一如既往的Kpi功能层层加码，很有腾讯风格。在未来的 3.x 中业务与渲染层中的具体实现可根据用户实际场景进行切换：业务层上不再局限于 JS 驱动，还可选择（如：DSL/Dart/WASM 等）其它语言进行驱动；在渲染层中，渲染引擎除了支持现有原生（Native）渲染之外，还可以选择其他渲染 Renderer，如 Flutter(Voltron) 渲染。

「Kraken 北海」是一款高性能Web渲染引擎。底层基于 Flutter 进行渲染。

Kraken 不限制上层开发者使用的框架，无论你是使用 Vue 、Rax 还是 React 都可以开发 Kraken 应用。

Kraken 的 runtime 通过 JS Engine Binding 的方式提供了一系列 Web 标准的 API 接口，调用相应 API 会执行相关逻辑并创建一系列需要发送给 Dart 层处理的指令。

Kraken 其实就是一个小程序平台，而且追求全平台完全一致。我虽然认为各平台不一致是很自然的事情，但是也表示理解，毕竟别人吹牛有当真的传统（KFC表示认同）。

Kraken 现在也是一个小号浏览器，所以它的主要工作就是抠标准，毕竟它是一款基于 W3C 标准的高性能渲染引擎。

最后，我劝淘宝领导定Kpi要理智些，毕竟Hippy4我还蛮期待的。

滴滴出品的超轻量级动态化跨端开发框架，主打轻量和实用。

Hummer 以 JS 引擎为基石，目前已支持 JavaScriptCore、Hermers、QuickJS 等业内知名 JS 引擎（这里本来还有个V8的，我删除了，源码里面没有，Kpi需要）。再配合经过调优的 Yoga 布局引擎，抹平了两端视图布局差异（性能更佳的自研布局引擎开发中）。顺便提一下，Hippy采用V8（功能更强）自研布局引擎（性能更佳）。

Hummer 的特点是抛弃了业界其他动态化跨端框架普遍使用的DSL层和VDOM层，因此原生 Hummer 不具备前端开发常用的响应式编程的能力，但同时换来的是接近原生开发的体验和性能。再以原生 Hummer 为基础，在此之上开发了一套基于MVVM架构的开发框架 —— Tenon ，通过 Tenon，可以把使用 Vue/React 编写的代码，转换成原生 Hummer 的代码。

Hummer也是一个小程序平台，而且超轻量。如果想要无限提升自己APP的能力，可以考虑嵌入Hummer。

Web移动前端框架正在迎来第三个高速发展期，各类框架得到极大繁荣。

个人在具体项目的贡献已经微乎其微了，创新、架构创新是唯一制胜的手段，这也是我看好React的根本原因。

最后，还是想做点微不足道的 探索 ，现在前端组件库层出不穷，更换组件库带来的代价有点大。想创建一个框架，来实现上次说的组件公约数和公倍数，无缝切换组件库。理论上支持所有组件库 ，也能为后来者提供弯道超车的机会。我想大厂可能没有需求，也不会愿意发布这种框架，毕竟都是平台部门说了算。

这个库就是useMobile，当然分为useMobileReact和useMobileVue。下次先发布useMobileReact。等我发布后，再来填上面表中缺的推荐度。

原文地址： https://www-blogs.com/windfic/p/16019457.html

如何用 ionic 框架快速开发跨平台移动应用

Ionic是一个前端的框架，帮助开发者使用HTML5, CSS3和JavaScript做出原生应用。ionic的理念类前端开发的BootStrap，目标是封装HTML5移动跨平台开发的最佳实践，就像Twitter Bootstrap在前端开发中做的一样。Ionic框架目前发展很迅速，我们从2014年3月开始使用，当时是1.0.0beta2，现在已经更新到1.0.0beta10，大概每2个星期会出一个beta版本，并且都包含实质性更新。Ionic框架很先进，js部分是基于AngularJS框架，大量使用了Css3，css生成基于Sass，构建工具基于最新的gulp，版本升级基于bower，原生层无缝封装了cordova。
使用Ionic框架，可以有效利用AngularJs的特性，极大的提供HTML5应用开发效率，质量，模块化程度。根据我们的经验，使用ionic开发，比使用基于jquery的移动框架，同样功能代码量会减少50%，开发速度提高一倍以上；与原生开发相比，不考虑原生应用开发不能跨平台的因素，同样是在iOS上开发，使用ionic要比使用oc开发快一倍以上。用户体验方面，在iOS和高端Android设备（1500元以上的手机，平板）上，与原生应用差别不大，一般用户无法分辨出是HTML5的。目前来看，市场竞争激烈的App，暂时还不适合用HTML5开发，即使HTML5完全能实现业务需求，例如去哪儿，携程这种竞争性的App。但在企业应用领域，使用ionic有明显优势，我们已经用ionic框架上线了iPad和android
Pad企业应用。
ionic官网为开发者提供了多个开发模板，如默认的Tab模板（页面基于类微信的Tab组织，使用了ionTab指令），Sidemenu模板等 关于跨端开发应用案例分享和跨端云开发的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 跨端开发应用案例分享的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于跨端云开发、跨端开发应用案例分享的信息别忘了在本站进行查找喔。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。