使用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？