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

最新推荐文章于 2024-04-30 17:04:54 发布

dingshi7798

最新推荐文章于 2024-04-30 17:04:54 发布

阅读量189

点赞数

文章标签： json javascript 移动开发 ViewUI

Chrome应用很受Chrome用户欢迎。而且为什么不这样做，它们提供了一种在Chrome浏览器熟悉的环境中创建可移植“应用程序”的方法。

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

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

总览

在本教程中，我们将使用HTML，CSS和JavaScript创建自己的Chrome应用，并将其移植到Android仿真器。我们将创建的应用程序将是一个简单的应用程序，用于基于特定的Twitter主题标签获取最新的推文。

创建Chrome应用

我们将从创建我们的Chrome应用开始。创建了Chrome应用并在Chrome浏览器上对其进行测试后，我们会将其移植到Android。

该教程的源代码可在GitHub上获得。

创建一个名为TwitterChromeApp的项目文件夹。在项目文件夹中，创建一个名为manifest.json的清单文件，它将是我们应用程序的配置文件。在manifest.json内部，我们将定义Chrome应用所需的一些设置。 Chrome应用程序要求manifest_version为2 。我们还将定义应用程序的名称，其版本以及启动应用程序时要执行的后台脚本的路径。我们将从外部服务URL中获取这些推文，因此我们还将在此文件中指定该推文。这是manifest.json外观：

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

Chrome应用启动后，我们将显示一个窗口，其中将显示来自Twitter的推文。 Chrome应用程序有一个名为onLaunched的事件，我们可以在应用程序启动时使用该事件为我们的应用程序创建窗口。

在项目文件夹TwitterChromeApp ，创建另一个名为scripts文件夹，并在其中创建名为main.js的后台脚本。将以下代码添加到main.js ：

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

在onLaunched事件中，我们将为我们的Chrome应用创建一个寡妇。将以下代码添加到main.js ：

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)
        }
    });
});

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

chrome.app.window.create使用index.html文件中的html创建一个新窗口。

在项目文件夹TwitterChromeApp创建一个名为index.html的新文件，如下所示：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Chrome Tweet App</title>
</head>

<body>
    <h1>Tweets !!</h1>

</body>

</html>

现在，尝试在Chrome浏览器中安装Chrome应用。打开“ 工具”->“扩展” （可能是“ 更多工具” ）。从右上方的复选框启用开发人员模式，然后单击“ 加载解压缩的扩展名”并选择项目文件夹。

通过“ 应用程序”或“ 扩展程序”窗口运行扩展程序，您应该看到以下内容：

Chrome应用预览

接下来，我们将创建一个ajax调用，该调用将在窗口启动时触发，该调用从服务URL中检索推文。我们将使用Heroku上托管的服务。该服务有一些限制。它仅获取带有标签perkytweets的 tweet，对于我们的示例而言，这就足够了。

我们将使用jQuery进行AJAX调用，因此将其下载到scripts文件夹并将其包含在index.html ，例如：

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

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

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

在index.html包含script.js ：

<script type="text/javascript" src="scripts/script.js"></script>

现在打开工具->扩展 （或更多工具 ），然后单击重新加载以反映更改。接下来，点击该应用以重新启动。如果您检查Chrome控制台（只是您在Chrome中访问的普通控制台），它应该显示来自服务URL的响应。

接下来，我们将在index.html显示响应。我们将使用Bootstrap来设置页面样式。

在项目文件夹中创建一个styles文件夹，并将Bootstrap css文件下载到该文件夹中。在index.html包含Bootstrap CSS文件。

<link href="styles/bootstrap.min.css" rel="stylesheet">

在index.html包含ul元素以显示鸣叫。这是index.html现在的外观：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Chrome Tweet App</title>
    <link href="styles/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script> <!-- Check this matches your jQuery version and file name -->
    <script src="scripts/script.js"></script>

</head>

<body>
    <h1>Tweets !!</h1>
    <ul id="ulTweets" class="list-group">

    </ul>
</body>

</html>

在scripts.js的AJAX成功回调内部，包含以下代码，将从服务调用中获取的项目附加到index.html的ul中。

$.each(resObj, function(index, value) {
    $('#ulTweets').append('<li class="list-group-item"><span class="badge">' + resObj[index].retweet_count + '</span>' + resObj[index].text + '</li>');

});

重新加载并重新启动该应用程序，您应该能够看到满是推文的屏幕。

创建适用于Android的Chrome应用

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

我们还需要cca命令行工具。您可以使用安装

npm install -g cca

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

设置好环境后，我们将从现有的TwitterChromeApp创建一个新项目，以移植到Android。

运行以下命令来创建项目：

cca create TwitterAppForAndroid --copy-from=path/to/TwitterChromeApp/manifest.json

导航到TwitterAppForAndroid并运行以下命令以在android仿真器中运行项目：

cd TwitterAppForAndroid
cca emulate android

模拟器成功启动后，您应该会看到该应用在模拟器中运行。

结论

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

您如何看待用于创建移动应用的Chrome应用选项？与仅在Cordova中使用标准HTML，CSS和JavaScript Web应用程序相比，它具有任何优势吗？

From: https://www.sitepoint.com/running-chrome-apps-mobile-device-using-cordova/

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Cordova在移动设备上运行Chrome应用

Chrome应用很受欢迎Chrome使用者。为什么不，他们提供创造了Chrome浏览器的熟悉环境中的便携式“应用”的方法。试想一下，镀铬的功耗应用智能手机上。我们现在可以运行使用基于工具集Android和iOS上我们最喜欢的Chrome应用的Apache科尔多瓦。科尔多瓦是用于包装使用HTML，CSS和JavaScript的移动应用程序的开源框架。科尔多瓦包装使用本机外壳的HTM...
复制链接

扫一扫