使用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中文網其他相關文章！