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

首页

web前端

js教程

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

Joseph Gordon-Levitt

Feb 20, 2025 am 09:26 AM

使用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>
</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中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

在JavaScript中替换字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答本文将探讨两种在JavaScript中替换字符串字符的方法：在JavaScript代码内部替换和在网页HTML内部替换。在JavaScript代码内部替换字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项，需使用正则表达式并添加全局标志g： str = str.replace(/fi

构建您自己的Ajax Web应用程序Mar 09, 2025 am 12:11 AM

因此，在这里，您准备好了解所有称为Ajax的东西。但是，到底是什么？ AJAX一词是指用于创建动态，交互式Web内容的一系列宽松的技术。 Ajax一词，最初由Jesse J创造

如何创建和发布自己的JavaScript库？Mar 18, 2025 pm 03:12 PM

文章讨论了创建，发布和维护JavaScript库，专注于计划，开发，测试，文档和促销策略。

如何在浏览器中优化JavaScript代码以进行性能？Mar 18, 2025 pm 03:14 PM

本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。

如何使用浏览器开发人员工具有效调试JavaScript代码？Mar 18, 2025 pm 03:16 PM

本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。

jQuery矩阵效果Mar 10, 2025 am 12:52 AM

将矩阵电影特效带入你的网页！这是一个基于著名电影《黑客帝国》的酷炫jQuery插件。该插件模拟了电影中经典的绿色字符特效，只需选择一张图片，插件就会将其转换为充满数字字符的矩阵风格画面。快来试试吧，非常有趣！工作原理插件将图片加载到画布上，读取像素和颜色值： data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data 插件巧妙地读取图片的矩形区域，并利用jQuery计算每个区域的平均颜色。然后，使用

如何构建简单的jQuery滑块Mar 11, 2025 am 12:19 AM

本文将引导您使用jQuery库创建一个简单的图片轮播。我们将使用bxSlider库，它基于jQuery构建，并提供许多配置选项来设置轮播。如今，图片轮播已成为网站必备功能——一图胜千言！决定使用图片轮播后，下一个问题是如何创建它。首先，您需要收集高质量、高分辨率的图片。接下来，您需要使用HTML和一些JavaScript代码来创建图片轮播。网络上有很多库可以帮助您以不同的方式创建轮播。我们将使用开源的bxSlider库。 bxSlider库支持响应式设计，因此使用此库构建的轮播可以适应任何