使用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性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

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

將矩陣電影特效帶入你的網頁！這是一個基於著名電影《黑客帝國》的酷炫jQuery插件。該插件模擬了電影中經典的綠色字符特效，只需選擇一張圖片，插件就會將其轉換為充滿數字字符的矩陣風格畫面。快來試試吧，非常有趣！工作原理插件將圖片加載到畫布上，讀取像素和顏色值： data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data 插件巧妙地讀取圖片的矩形區域，並利用jQuery計算每個區域的平均顏色。然後，使用

如何使用瀏覽器開發人員工具有效調試JavaScript代碼？Mar 18, 2025 pm 03:16 PM

本文討論了使用瀏覽器開發人員工具的有效JavaScript調試，專注於設置斷點，使用控制台和分析性能。

如何構建簡單的jQuery滑塊Mar 11, 2025 am 12:19 AM

本文將引導您使用jQuery庫創建一個簡單的圖片輪播。我們將使用bxSlider庫，它基於jQuery構建，並提供許多配置選項來設置輪播。如今，圖片輪播已成為網站必備功能——一圖胜千言！決定使用圖片輪播後，下一個問題是如何創建它。首先，您需要收集高質量、高分辨率的圖片。接下來，您需要使用HTML和一些JavaScript代碼來創建圖片輪播。網絡上有很多庫可以幫助您以不同的方式創建輪播。我們將使用開源的bxSlider庫。 bxSlider庫支持響應式設計，因此使用此庫構建的輪播可以適應任何