新型应用

  • 项目

新型网站与本机应用与混合应用

Rachel Appel

Rachel Appel当今新型开发领域面临的一个常规问题是构建移动网站还是本机应用还是混合应用。作为一名开发人员，在开始开发软件之前，您需要花时间考虑几点注意事项。一点是确定您的目标受众。从很大程度上讲，这一点将决定您的目标平台。

您的用户将使用不同设备访问您的软件。部分人只能通过公司网络访问应用，而其他应用关注客户需求。您确定好受众和平台之后，必须弄清楚哪种软件可以满足这些受众的需求，可能还需要带有特定于平台的功能。

主要的新型应用有以下三种类型：移动 Web 应用、本机应用和混合应用。我将回顾每种类型、其优缺点以及如何开始开发。鉴于本文的目的，这里我没有讨论使用 Windows 表单或 Windows Presentation Foundation (WPF) 创建的传统桌面（本机）应用。他们不能称为新型应用，因为他们只能在大型桌面屏幕上运行，也不能跨多设备使用。

移动网站

在三种主要应用类型中，移动网站的受众最广。任何智能手机都至少可以显示内容，并让用户与移动页面交互，尽管其效果参差不齐。除到达率之外，另一个优势是易于部署。只需更新一个位置，所有用户都可以自动访问站点的最新版本。

如果您已拥有一个网站，要设计一个套间应用或者扩展到应用市场，您可以先使您的网站适合移动设备。也就是做少量修改，以小投资获得大回报，尤其与构建完整的本机应用组相比。面向桌面或大型监视器的网站很难在小型设备上使用。对他们进行修改使其易于在移动设备上使用将直接影响客户的满意度。

使移动性成为您的站点的一级功能也会增加到达率。移动网站易于使用。弹出窗口和干扰更少。同时，移动设计通常更倾向于使用易于用手指点按的大号方形或长方形按钮。

您可以使用当前所有的 Web 开发技能构建网站的移动版本。也就是说使用 HTML、JavaScript、CSS 以及少量常用框架。将应用移动化所需的知识不仅限于某个平台或供应商。

移动化要考虑的两个重要事项包括集成可响应的设计和重组内容，以便网站可在小型硬件上运行。CSS 媒体查询将涵盖可响应设计。媒体查询是一种编写 CSS 代码以定义面向特定设备表单因素的样式规则的方法。例如，您的站点应具有针对多个设备表单因素（如手机、平板、手机平板、便携式计算机和大型屏幕）的媒体查询。

幸运的是，您可以在一个目录中构建适合多个设备的媒体查询。重组内容需要将布局更改为可以在小屏幕上显示，以便用户查看。这也会更改数据量。包含使您可以快速入门的响应性设计的 CSS 和样式的 Twitter Bootstrap 随附了默认媒体查询。

例如，图 1 包含可在大量设备上运行的 CSS。图 1 中的代码虽然不能适用于所有场景，但适用于大部分场景。为满足您的需要，您可能需要对代码做部分修改。

图 1 适用于常用表单因素的 CSS 媒体查询

Smartphones
Portrait and Landscape
@media only screen and (min-device-width : 320px) and
(max-device-width : 480px) { ... }
Landscape
@media only screen and (min-width : 321px) { ... }
Portrait
@media only screen and (max-width : 320px) { ... }
Tablets, Surfaces, iPads
Portrait and landscape
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) { ... }
Landscape
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) and (orientation : landscape) { ... }
Portrait
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) and (orientation : portrait) { ... }}
Desktops, laptops, larger screens
@media only screen  and (min-width : 1224px) { ... }
Large screen
@media only screen  and (min-width : 1824px) {  ... }
Smartphones
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { ... }
Portrait
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { ... }

图 1 中的 CSS 不仅适用于移动 Web 应用，还适用于本机应用。即适用于本文所述的所有三种应用。在 Windows 平台上，您可以在 Windows Library for JavaScript (WinJS) 项目中使用该 CSS，而混合应用使用 C#。有关响应性应用设计的深入研究，请参阅我在 2013 年10 月撰写的专栏文章“使用 CSS 为 WinJS 应用构建响应性新型 UI”(msdn.microsoft.com/magazine/dn451447)。

移动站点 UI 和 UX 可能与主机操作系统的 UI 和 UX 不匹配，因为 Web 和本机平台倾向于面向某些设计样式和技术。许多专家尝试将面向桌面监视器的网站融入智能手机或手机平板的小屏幕中。但这种方法并不可行。请确保考虑用户是如何在小设备上使用信息的。

移动网站的一个缺点是本机应用提供的许多功能不适用于移动网站。即使混合应用可用的部分本机功能也不能用于移动网站。这主要是为了安全起见。

不能在网站中使用文件系统和本地资源，不管是否是移动设备。当浏览器广泛使用文件 API 时，情况会发生变化。但目前移动 IE、Opera Mini 和部分 iOS Safari 版本尚不支持文件 API。代码不能调用网络摄像头、传感器或其他硬件组件。在某些时候，浏览器应提供大部分硬件功能，但现在基本上仍受限。

要启用脱机功能，移动网站必须使用 Web Storage、IndexedDb 和 AppCache Web 等 Web 技术。网站不能利用文件系统资源，但沙箱模型仍允许某些基于客户端的存储。许多现有网站不支持脱机功能，在断开连接时会使这些功能无效。

本机应用

对于您要面向的大部分平台，您应能够保留您的技能。如果您正在 Windows 上进行开发，您可以使用 C#、Visual Basic 或 C++ 来开发应用，以及使用 XAML 创建 UI。您也可以使用 JavaScript 以及 HTML、CSS 和 WinJS 编写 UI。在 Android 上可以使用 Java 来进行开发，而 iOS 则可以使用 Objective-C。

选择本机方案时，您可以利用应用商店的营销能力。哪个商店真的无关紧要。事实上他们都会尝试通过免费展示或促销帮助您推广您的应用，否则您将无法得到这些帮助。当然，应用商店的缺点是潜在用户需要查找并安装您的应用。即使商店在营销方面给您提供了很大帮助，但用户还是有可能找不到您的应用。

常阻止您面向多平台的一个因素是您需要针对每个目标平台重新创建至少部分 UI。也就是说您需要创建适用于 Windows 应用商店、Windows Phone、iOS 和 Android 的 UI。构建可在多个有细微差别的屏幕上正常运行的灵活的 UI 确实是个很大的挑战。但结果是用户可以从高质量的应用获取他们想要的丰富的本机体验。最后，应用商店的排名将反映可提供优秀 UX 的应用。

选择本机方案时，您需要制定跨平台策略。请考虑您要面向哪个平台以及您要发布的顺序。从移动 Web 应用与本机应用与混合应用这个问题的角度来看，最佳顺序是从移动 Web 应用到混合应用到本机应用。

尽管您可能发布本机应用，但您需要正常维护移动网站，因为移动网站负责 Moat 流量。然后选择一个平台（可能是一个符合您的开发人员背景的平台）然后开始开发。有关创建跨平台应用时的不同注意事项的指南，请参阅我在 2014 年 5 月撰写的专栏文章“设计跨平台新型应用基础架构”(msdn.microsoft.com/magazine/dn683800)。

Visual Studio 包含许多项目模板，可用于创建适用于 Windows 平台的本机应用。在 C#、Visual Basic 和 C++ 下，您可以查找 Windows 应用商店和 Windows Phone 应用。Visual Studio 还包含适用于 JavaScript 应用的模板。您首先要确定您要使用的语言，因为这里有许多注意事项，包括应用是否要跨平台。我在 2013 年 9 月撰写的专栏文章“了解如何选择开发新型应用的语言”(msdn.microsoft.com/magazine/dn385713) 可帮助您决定使用哪个语言。如您所希望的，有大量适用于本机应用的工具，包括面向您感兴趣的每个平台的 API 和控件。

特定平台上的大部分本机应用都具有相似的导航模式。例如，Windows 应用商店平台使用工具栏和策略性返回按钮。通过采用内置导航方案，您的应用可以让用户感觉熟悉，且没有学习曲线。这样会得到更高的评级和更多下载。我在 2014 年 4 月撰写的专栏文章“在 Windows 应用商店应用中导航的基础知识”(msdn.microsoft.com/magazine/dn342878) 包含有关 Windows 应用商店应用导航的所有内容。

混合应用

混合应用介于移动网站和本机应用之间。混合应用是一种以应用格式展示来自现有网站的内容的方式。这是一种读取 Web 内容并打包，并在应用商店中发布的极佳方法。您可以在以下主要应用商店中发布混合应用：Microsoft Windows 应用商店、Google Play、Apple 应用商店、Amazon 应用商店和 BlackBerry World。

混合应用最棒的地方在于它可以是发布的应用，或是您在创建本机应用组时用于填充商店的临时方法。混合应用使您在进入市场发布内容方面有很大进展，并可您在完成本机应用组时开始营销（如果这是您的目标）。如果您不打算营销，混合应用可以用于在应用商店中正式列出某个内容以用于展示。

与移动网站相比，混合应用还可以拥有更多权限，具体取决于主机操作系统规则。也就是说网络摄像头或某些传感器可能无法在每个地方正常使用。

如果您在考虑使用混合应用，好消息是您可以使用熟悉的 Web 开发技能。混合实际上是网站封装程序。其基础是您已了解的相同的旧 HTML、JavaScript 和 CSS。

针对不同应用商店构建混合应用有一个完整的第三方生态系统。正如您所预期的，Visual Studio 中有用于创建混合应用的模板。常见的供应商（如 Xamarin、Telerik、DevExpress 和 Infragistics）都提供了可加速混合应用开发过程的工具和控件。

通过在 Visual Studio JavaScript 应用中使用 iFrame，您可以完全从 Web 语言创建混合应用。您也可以使用 C# 或 Visual Basic .NET 基于 Windows Phone HTML5 项目模板构建混合应用。最后获得基于 XAML 的应用，并添加具有相同作用的 WebView 控件。WebView 控件的行为类似于浏览器。即您可以通过导航、刷新或停止等调用方法（通常会映射到对应的用户驱动的操作）来控制该控件。WebView 控件和导航到应用开始页面的基本代码示例如下：

在 MainPage.Xaml 中

<WebView x:Name="webView"/>

在 MainPage.Xaml.Cs 中

public MainPage()
{
  this.InitializeComponent();
  Uri targetUri = new Uri("http://rachelappel.com");
  webView.Navigate(targetUri);
}

您可以轻按进入 WebView 事件，以执行导航、页面加载或其他任务。例如，您可以轻按进入导航以记录常用链接，如下所示：

private void webView_NavigationCompleted(Windows.UI.Xaml.Controls.WebView sender,
  WebViewNavigationCompletedEventArgs args)
{
  logNavigation(args.Uri.ToString());
}

Rachel Appel 是一名顾问、作家、导师和前 Microsoft 员工，在 IT 行业有 20 多年的经验。她常在 Visual Studio Live!、DevConnections、MIX 等顶级行业大会上发言。她的专业是开发侧重于 Microsoft 系列开发技术和开放式 Web 并且符合业务和技术需要的解决方案。有关 Appel 的详细信息，请访问她的网站 rachelappel.com。

衷心感谢以下 Microsoft 技术专家对本文的审阅：Frank La Vigne