混合移动应用开发的简单案例

Abhishek_Narain

4.29/5 (6投票s)

2015年12月23日

CPOL

8分钟阅读

19342

在B2C场景中，关注点有所不同。最终用户期望您的应用程序提供最简单、最佳的体验。因此，您将开始关注用户体验、性能、简洁性、粘性等。

什么是混合移动应用？

混合移动应用类似于您从各自应用商店下载的任何应用程序，但其工作原理与原生应用不同。

与网站一样，混合移动应用使用HTML、CSS和JavaScript等Web技术构建。因此，大多数开发人员在Web上使用的JS库也可以用于混合应用。关键区别在于混合应用托管在一个原生应用程序中，该应用程序利用移动平台的WebView。这使它们能够使用设备功能，如加速度计、摄像头和许多其他系统API。这些功能通常无法通过在移动设备上运行的网站访问。Web也比以往任何时候都更具互操作性——包括Microsoft Edge的EdgeHTML等现代浏览器引擎——因此，如果您之前排除了混合解决方案，那么现在是重新考虑托管Web应用解决方案的好时机（更多内容见下文）。

混合移动应用从何而来？

上图清楚地表明，移动用户数量已明显超过桌面用户，这导致企业重新调整优先级以满足移动用户。虽然企业已经在Web上有所存在，在大多数情况下是网站，但它们扩展到所有移动平台最简单的选择是考虑混合方法。这有助于它们保留拥有相似技能的团队，而无需一次性在iOS、Android、Windows原生开发人员上投入巨资。所以这听起来像是一个具有成本效益的策略。让我们深入探讨。

移动应用中的HTML5、CSS3、ES6。真的吗？

最近Web已经走向标准化。我们很少发现带有IE6兼容性元标签的新Web应用程序。这意味着Web现在更干净，无需更改代码即可在标准浏览器上运行。这就是为什么HTML5、CSS3、ES6标准完全有利于更干净、更愉快、更美好的Web！事实上，您可以在这里扫描您的Web以获取互操作性最佳实践，这也有助于开发跨平台混合应用程序。

鉴于此，我们可以利用这些标准来确保即使在所有平台上的混合移动应用中也能使用相同的DOM。这种方法有助于我们编写干净的代码并易于维护。请查看JSFiddle上iOS、Android和Windows Phone的原生外观标题栏 21的代码。
借助新的HTML5和CSS元素，我们可以处理混合应用将运行的各种屏幕分辨率。为了让您的图像对每个人都清晰，您通常需要提供两倍于应用中实际显示的尺寸。为所有不同分辨率提供适当尺寸的图像是响应式网页设计中最常讨论的话题之一。有各种方法，每种方法都有其优缺点，涉及带宽、代码可维护性和浏览器支持。让我们快速回顾最流行的几种：
- 服务器端图像调整大小
- 通过JavaScript进行客户端检测和替换
- HTML5 picture元素
- HTML5 srcset属性
- CSS image-set
- CSS媒体查询
- 分辨率无关图像 (SVG)

CSS3媒体查询非常适合根据混合应用程序呈现的屏幕尺寸适当加载徽标

/* Normal-resolution CSS */
.logo {
   width: 120px;
   background: url(logo.png) no-repeat 0 0;
}

/* HD and Retina CSS */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx) {
	.logo {
      background: url(logo@2x.png) no-repeat 0 0;
      background-size: 120px; /* Equal to normal logo width */
   }
}

类似地，我们可以通过查询设备类型来使用特定于平台的字体。

/* Windows Phone */
font-family: 'Segoe UI', Segoe, Tahoma, Geneva, sans-serif;
/* Android */
font-family: 'RobotoRegular', 'Droid Sans', sans-serif;

/* iOS */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

单页应用程序（SPA）是一种适应单个网页的Web应用程序，旨在提供类似于桌面应用程序的更流畅的用户体验。有一些库可以帮助Web开发人员创建更流畅的Web体验
- AngularJS
- EmberJS
- BackboneJS等。

进入混合应用开发平台

如今，大多数混合移动应用程序都利用Apache Cordova，这是一个通过插件（使用原生代码构建）提供一致的JavaScript API来访问设备功能的平台。John Bristowe在他的博客上提供了很好的解释。它早期被称为PhoneGap。现在，PhoneGap作为Apache Cordova的一个发行版存在，包含Adobe提供的附加工具。关于历史，请参阅PhoneGap、Cordova以及名称的由来？

这些插件包括用于访问设备加速度计、联系人、摄像头等的API。还有许多由广大开发人员社区构建和维护的插件。这些插件可以在Apache Cordova插件注册表中找到。

HTML、CSS、JavaScript等应用程序资产通过Apache Cordova提供的工具打包，以针对平台SDK。构建完成后，您将获得一个可以在设备上像任何其他应用程序一样运行的应用程序。虽然Apache Cordova提供的工具主要通过命令行界面驱动，但开发人员也可以使用像Visual Studio这样的IDE。我将向您展示如何操作

使用 Visual Studio 2015 开始混合应用开发

在安装 Visual Studio 2015（可以尝试适用于 Mac、Linux 或 Windows 的 VS Code 或新的Dev Essentials 产品，其中包含跨平台工具）时，请确保选择自定义安装并选中“Apache Cordova 工具”复选框。
在 Visual Studio 中创建一个“新项目”。在 JavaScript 下选择“空白应用 (Apache Cordova)”模板。
您可以使用 AngularJS 或您选择的任何其他 JS 库，并具有Intellisense。因此，开发人员可以使用 VS 更高效地工作。不仅如此，调试体验也非常好。Visual Studio 附带了一个 Android 模拟器，与 SDK 中提供的模拟器相比，它启动速度飞快。

尝试托管 Web 应用解决方案

越来越多地，托管 Web 应用是使用现有 Web 体验构建跨平台应用的一种新的、低成本的方式。Web 应用托管在服务器上，HTML/CSS/JS 文件不会本地存在于包中。像manifold.JS 这样的开源库使得这条路径变得越来越容易——您构建清单文件，上传徽标，然后可以快速将您的 Web 应用放入 Android、iOS 和 Windows 商店中。一些平台（如通用 Windows 平台）还允许使用通知和货币化功能等原生 API。这不是很棒吗？您可以按照本教程在几分钟内为 Windows 10 创建一个托管 Web 应用程序。

优点

对于已经拥有响应式Web应用程序的Web开发人员来说，这听起来是一个很好的选择，可以让他们无需从头开始即可开始使用UWP API。
应用程序更新由服务器控制。因此应用程序始终处于最新状态。
通过商店实现货币化
原生 API 访问/Cortana/Windows Hello 等。

缺点

它需要稳定的网络连接，因为应用程序文件托管在某些服务器上。

那为什么还要使用原生应用呢？

过去，Facebook 曾采用混合方法来交付其跨平台应用程序，后来他们用原生应用程序取代了它，声称原生应用程序利用平台特定 API 能够提供更快的性能。我并不是说混合应用程序总是失败的！绝对不是！但您需要根据您的应用程序需求、用户期望、您想要利用的 API 等明智地选择方法。归根结底，您希望的是用户感觉良好并尽可能多地使用您的应用程序。

以下Flurry的统计数据显示了Android和iOS上不同类别应用程序的使用情况。

了解这一点很有趣，因为它让我们深入了解终端用户在每个平台上最喜欢做什么。因此，如果您的应用程序类别与使用率较高的应用程序重合，您将拥有更多的受众，但也可能面临与其他应用程序更激烈的竞争。因此，在决定采用混合应用程序开发还是原生应用程序开发时，您可能需要考虑这一点。

结论

根据我的经验，我看到许多B2B应用利用混合方法来满足业务需求，并且更侧重于业务流程的实现而非最终用户体验，因为他们可以拥有一批经过良好培训的用户群体。

在B2C场景中，关注点有所不同。最终用户期望您的应用程序提供最简单、最佳的体验。因此，您将开始关注用户体验、性能、简洁性、粘性等。如果能利用原生平台特定功能（例如在Windows应用上通过扫描视网膜/生物识别技术登录用户的“Windows Hello”）或在iOS应用中利用TouchID，那将是再好不过了！