使用Cordova在移动设备上运行Chrome应用程序

钥匙要点

可以使用基于Apache Cordova的工具集在Android和iOS设备上运行
• Chrome应用程序，这是一种使用HTML，CSS和JavaScript包装移动应用程序的开源框架。 Cordova使用本机外壳包装这些Web应用程序，允许在Google Play，Apple App Store和其他商店上分发。
创建Chrome应用程序的过程包括创建一个项目文件夹，在subtest.json文件中定义所需的设置，在启动时为应用程序创建一个窗口，并设置Ajax调用以检索数据。创建一个简单的Twitter Chrome应用程序。
• >在Android上运行Chrome应用，Java JDK 7或更高版本，Android SDK 4.4.2或更高，以及Apache Ant需要安装在系统上。还需要CCA命令行工具。设置环境后，可以使用特定命令从现有Chrome应用程序到端口创建一个新项目。
• Chrome应用在Chrome用户中很受欢迎。为什么不，他们提供了一种在Chrome浏览器熟悉的环境中创建便携式“应用程序”的方法。

想象一下智能手机上可用的Chrome应用程序的功能。现在，我们可以使用基于Apache Cordova的工具集在Android和iOS上运行我们喜欢的Chrome应用程序。

>

> Cordova是使用HTML，CSS和JavaScript包装移动应用程序的开源框架。 Cordova使用本机外壳包装HTML，CSS和JavaScript Web应用程序，并允许在Google Play，Apple App Store和其他商店上分发。

概述

在本教程中，我们将使用HTML，CSS和JavaScript创建自己的Chrome应用程序，然后将其移植到Android模拟器中。我们将创建的应用程序将是一个简单的应用程序，可以根据特定的Twitter主题标签获取最新推文。

>

创建Chrome App

我们将首先创建我们的Chrome应用程序。创建Chrome应用并在Chrome浏览器上进行了测试后，我们将其移植到Android。

>本教程中的源代码可在GitHub上找到。

>

创建一个名为TwitterChroMeApp的项目文件夹。在项目文件夹中，创建一个名为sustest.json的清单文件，该文件将是我们应用程序的配置文件。在清单内部。JSON我们将定义Chrome App所需的一些设置。 Chrome应用程序要求Subtest_version为2。我们还将定义应用程序的名称，其版本和背景脚本的路径，以执行启动该应用程序。我们将从外部服务URL中获取推文，因此我们还将在此文件中指定该推文。这是清单的样子。

>当Chrome应用启动时，我们将显示一个窗口，其中将显示Twitter的推文。 Chrome Apps具有一个名为Onlaunched的事件，我们使用该应用程序在应用程序启动时为应用程序创建窗口。

在项目文件夹TwitterChroMeApp中，创建另一个称为脚本的文件夹，在其中创建了名为main.js的背景脚本。将以下代码添加到main.js：

在启用的活动中，我们将为Chrome应用创建寡妇。将以下代码添加到main.js：

<span>{
</span>    <span>"manifest_version": 2,
</span>    <span>"name": "Tweet Chrome App",
</span>    <span>"version": "1.0",
</span>    <span>"app": {
</span>        <span>"background": {
</span>            <span>"scripts": ["scripts/main.js"]
</span>        <span>}
</span>    <span>},
</span>    <span>"permissions": [
</span>        <span>"http://twittersearchapi.herokuapp.com/search"
</span>    <span>]
</span><span>}</span>

在上面的代码中，我们使用屏幕对象获取可用的屏幕宽度和高度。基于屏幕的实际宽度，我们将新Chrome窗口的外部边界设置为正确显示。

chrome<span>.app.runtime.onLaunched.addListener(function() {
</span>  <span>// creating window for app code will be here
</span><span>});</span>

chrome.app.window.create使用文件index.html中的html创建一个新窗口。 在项目文件夹内部TwitterChroMeApp内部创建一个名为index.html的新文件，如下所示：>

>现在尝试将Chrome应用程序安装在Chrome浏览器中。打开对

>工具 - >扩展

（可能

更多工具

）。从右上角的复选框中启用开发人员模式，然后单击chrome<span>.app.runtime.onLaunched.addListener(function() { </span> <span>var screenWidth = screen.availWidth; </span> <span>var screenHeight = screen.availHeight; </span> <span>var width = 500; </span> <span>var height = 300; </span> chrome<span>.app.window.create('index.html', { </span> <span>id: "tweetAppID", </span> <span>outerBounds: { </span> <span>width: width, </span> <span>height: height, </span> <span>left: Math.round((screenWidth - width) / 2), </span> <span>top: Math.round((screenHeight - height) / 2) </span> <span>} </span> <span>}); </span><span>});</span>加载Untage Extension ，然后选择项目文件夹。 >通过apps>或扩展窗口运行扩展名，您应该看到以下内容：>

接下来，我们将创建一个Ajax调用，该窗口启动从服务URL检索推文时会触发。我们将使用Heroku上托管的服务。该服务有一些限制。它仅使用主题标签perkytweets 进行推文，这足以让我们的示例。> >我们将使用jQuery进行Ajax调用，因此请将其下载到脚本文件夹中，并将其包含在index.html中，例如：>

现在，在脚本文件夹中创建一个名为script.js的新文件，并创建AJAX调用，如下所示：

index.html中的script.js：

现在打开

>工具 - >扩展

<span><span>
</span><span><span><span>></span>
</span>
<span><span><span>></span>
</span>    <span><span><span><meta> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><title>></title></span>Chrome Tweet App<span><span></span>></span>
</span><span><span><span></span>></span>
</span>
<span><span><span>></span>
</span>    <span><span><span><h1 id="gt">></h1></span>Tweets !!<span><span></span>></span>
</span>
<span><span><span></span>></span>
</span>
<span><span><span></span>></span></span></span></span></span></span></span></span></span>

（或更多工具

），然后单击

<span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/jquery-1.11.1.min.js"</span>></span><span><span></span>></span></span>

重新加载

以反映更改。接下来单击该应用程序以重新启动它。如果您检查Chrome Console（只是您在Chrome中访问的普通控制台），则应显示服务URL的响应。

接下来，我们将在index.html中显示响应。我们将使用Bootstrap来造型页面。

<span>$(function() {
</span>    $<span>.ajax({
</span>        <span>type: 'GET',
</span>        <span>url: 'http://twittersearchapi.herokuapp.com/search',
</span>        <span>success: function(response) {
</span>            <span>var resObj = JSON.parse(response);
</span>            <span>console.log(resObj);
</span>        <span>},
</span>        <span>error: function(error) {
</span>            <span>console.log(error);
</span>        <span>}
</span>    <span>});
</span><span>});</span>

>在项目文件夹中创建一个样式文件夹，然后将Bootstrap CSS文件下载到文件夹中。将Bootstrap CSS文件包括在index.html。 在index.html中包含一个UL元素以显示推文。这是index.html现在应该看起来的样子：> >在Ajax成功中的scripts.js中的包括以下代码，以附加从index.html中获取的项目中获取的项目。

重新启动并重新启动应用程序，您应该可以看到一个屏幕上充满推文。

>为Android创建Chrome应用

>由于我们将在Android上运行应用程序，请确保您的Java JDK 7或更高，Android SDK 4.4.2或更高以及安装在系统上的Apache Ant。

>我们还需要CCA命令行工具。您可以使用

安装它

在官方文档中可以找到有关设置Chrome应用程序的环境以将Chrome应用程序移植到Android和iOS的详细信息。

>设置环境完成后，我们将创建一个新项目，从现有的TwitterChroMeApe到端口到Android。 运行以下命令来创建项目：

<span>{
</span>    <span>"manifest_version": 2,
</span>    <span>"name": "Tweet Chrome App",
</span>    <span>"version": "1.0",
</span>    <span>"app": {
</span>        <span>"background": {
</span>            <span>"scripts": ["scripts/main.js"]
</span>        <span>}
</span>    <span>},
</span>    <span>"permissions": [
</span>        <span>"http://twittersearchapi.herokuapp.com/search"
</span>    <span>]
</span><span>}</span>

>导航到TwitterAppForandroid并运行以下命令以在Android模拟器中运行该项目：

模拟器成功启动后，您应该看到模拟器中运行的应用程序。

结论

chrome<span>.app.runtime.onLaunched.addListener(function() {
</span>  <span>// creating window for app code will be here
</span><span>});</span>

在本教程中，我们看到了如何创建一个简单的Chrome应用程序并将其移植到Android平台。可以在官员文档中找到有关使用Apache Cordova在移动设备上运行Chrome应用程序的更多信息。

>您如何看待创建移动应用程序的Chrome应用程序选项？与仅使用标准HTML，CSS和JavaScript Web应用程序中，它是否具有任何优点？

使用Cordova

chrome<span>.app.runtime.onLaunched.addListener(function() {
</span>
    <span>var screenWidth = screen.availWidth;
</span>    <span>var screenHeight = screen.availHeight;
</span>    <span>var width = 500;
</span>    <span>var height = 300;
</span>
    chrome<span>.app.window.create('index.html', {
</span>        <span>id: "tweetAppID",
</span>        <span>outerBounds: {
</span>            <span>width: width,
</span>            <span>height: height,
</span>            <span>left: Math.round((screenWidth - width) / 2),
</span>            <span>top: Math.round((screenHeight - height) / 2)
</span>        <span>}
</span>    <span>});
</span><span>});</span>

在移动设备上运行Chrome应用程序的常见问题（常见问题解答）

>如何在系统上安装Cordova？

>

要安装Cordova，您需要在系统上安装Node.js。安装了Node.js后，您可以通过在终端或命令提示符中运行命令NPM安装-G Cordova来使用NPM（Node Package Manager）安装Cordova。 -g标志用于在系统上全球安装Cordova。使用Cordova的设备，您需要在系统上安装以下内容：Node.js，Cordova，用于移动工具链的Chrome应用程序以及Android SDK或iOS SDK取决于您要定位的平台。

>

>如何将我的Chrome应用程序转换为Cordova项目？

>

将您的Chrome应用转换为Cordova项目，您需要使用CCA命令遵循通过创建命令和项目的名称。例如，CCA创建myproject。这将在一个名为myproject的目录中创建一个新的Cordova项目。

如何将平台添加到我的Cordova项目？

以在Cordova项目中添加平台，您需要使用Cordova平台添加命令，然后是平台的名称。例如，Cordova平台添加Android将添加Android平台。然后是平台的名称。例如，Cordova Build Android将为Android平台构建您的项目。>

>如何在设备上运行我的Cordova项目？

在设备上运行您的Cordova项目，您需要使用Cordova Run命令，然后使用平台的名称。例如，Cordova Run Android将在Android设备上运行您的项目。

>如何调试我的Cordova项目？

来调试您的Cordova项目，您可以使用Chrome DevTools。为此，您需要导航到Chrome：//在Chrome浏览器中检查并单击设备下的Inspect Link。 Cordova允许您在移动设备上运行Chrome应用程序，但存在一些限制。例如，并非支持所有Chrome API，并且由于基础平台的差异，Chrome App和Cordova应用程序之间的行为可能存在差异。

>我可以在我的Chrome应用中使用Cordova插件吗？是的，您可以在Chrome应用中使用Cordova插件。为此，您需要使用Cordova插件添加命令将插件添加到您的项目中。然后是插件的名称。

>

>如何更新我的Cordova项目？

Cordova项目，您可以使用Cordova Platform Update命令，然后使用该平台的名称。例如，Cordova平台更新Android将在您的项目中更新Android平台。

以上是使用Cordova在移动设备上运行Chrome应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！