使用Cordova在移动设备上运行Chrome应用程序-js教程-PHP中文网

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

钥匙要点

Chrome应用程序，这是一种使用HTML，CSS和JavaScript包装移动应用程序的开源框架。 Cordova使用本机外壳包装这些Web应用程序，允许在Google Play，Apple App Store和其他商店上分发。
>在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.app.runtime.onLaunched.addListener(function() { var screenWidth = screen.availWidth; var screenHeight = screen.availHeight; var width = 500; var height = 300; chrome.app.window.create('index.html', { id: "tweetAppID", outerBounds: { width: width, height: height, left: Math.round((screenWidth - width) / 2), top: Math.round((screenHeight - height) / 2) } }); });加载Untage Extension ，然后选择项目文件夹。 >通过apps>或扩展窗口运行扩展名，您应该看到以下内容：>

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

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

index.html中的script.js：

现在打开

>工具 - >扩展

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span>
<span><span><span><head</span>></span>
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><title</span>></span>Chrome Tweet App<span><span></title</span>></span>
</span><span><span><span></head</span>></span>
</span>
<span><span><span><body</span>></span>
</span>    <span><span><span><h1</span>></span>Tweets !!<span><span></h1</span>></span>
</span>
<span><span><span></body</span>></span>
</span>
<span><span><span></html</span>></span></span>

登录后复制

（或更多工具

），然后单击

<span><span><span><script</span> type<span>="text/javascript"</span> src<span>="scripts/jquery-1.11.1.min.js"</span>></span><span><span></script</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？