成人a大片在线观看,h无码动漫在线观看

鑰匙要點

要安裝Cordova，您需要在系統(tǒng)上安裝Node.js。安裝了Node.js後，您可以通過在終端或命令提示符中運行命令NPM安裝-G Cordova來使用NPM（Node Package Manager）安裝Cordova。 -g標誌用於在系統(tǒng)上全球安裝Cordova。使用Cordova的設(shè)備，您需要在系統(tǒng)上安裝以下內(nèi)容：Node.js，Cordova，用於移動工具鏈的Chrome應(yīng)用程序以及Android SDK或iOS SDK取決於您要定位的平臺。

以在Cordova項目中添加平臺，您需要使用Cordova平臺添加命令，然後是平臺的名稱。例如，Cordova平臺添加Android將添加Android平臺。然後是平臺的名稱。例如，Cordova Build Android將為Android平臺構(gòu)建您的項目。 >

>如何在設(shè)備上運行我的Cordova項目？

>我可以在我的Chrome應(yīng)用中使用Cordova插件嗎？是的，您可以在Chrome應(yīng)用中使用Cordova插件。為此，您需要使用Cordova插件添加命令將插件添加到您的項目中。然後是插件的名稱。

首頁

web前端

js教程

使用Cordova在移動設(shè)備上運行Chrome應(yīng)用程序

Joseph Gordon-Levitt

Feb 20, 2025 am 09:26 AM

使用Cordova在移動設(shè)備上運行Chrome應(yīng)用程序

鑰匙要點

Chrome應(yīng)用程序，這是一種使用HTML，CSS和JavaScript包裝移動應(yīng)用程序的開源框架。 Cordova使用本機外殼包裝這些Web應(yīng)用程序，允許在Google Play，Apple App Store和其他商店上分發(fā)。
>在Android上運行Chrome應(yīng)用，Java JDK 7或更高版本，Android SDK 4.4.2或更高，以及Apache Ant需要安裝在系統(tǒng)上。還需要CCA命令行工具。設(shè)置環(huán)境後，可以使用特定命令從現(xiàn)有Chrome應(yīng)用程序到端口創(chuàng)建一個新項目。
Chrome應(yīng)用在Chrome用戶中很受歡迎。為什麼不，他們提供了一種在Chrome瀏覽器熟悉的環(huán)境中創(chuàng)建便攜式“應(yīng)用程序”的方法。

想像一下智能手機上可用的Chrome應(yīng)用程序的功能?，F(xiàn)在，我們可以使用基於Apache Cordova的工具集在Android和iOS上運行我們喜歡的Chrome應(yīng)用程序。

> Cordova是使用HTML，CSS和JavaScript包裝移動應(yīng)用程序的開源框架。 Cordova使用本機外殼包裝HTML，CSS和JavaScript Web應(yīng)用程序，並允許在Google Play，Apple App Store和其他商店上分發(fā)。

概述

在本教程中，我們將使用HTML，CSS和JavaScript創(chuàng)建自己的Chrome應(yīng)用程序，然後將其移植到Android模擬器中。我們將創(chuàng)建的應(yīng)用程序?qū)⑹且粋€簡單的應(yīng)用程序，可以根據(jù)特定的Twitter主題標籤獲取最新推文。

創(chuàng)建Chrome App

我們將首先創(chuàng)建我們的Chrome應(yīng)用程序。創(chuàng)建Chrome應(yīng)用並在Chrome瀏覽器上進行了測試後，我們將其移植到Android。

>本教程中的源代碼可在GitHub上找到。

>

創(chuàng)建一個名為TwitterChroMeApp的項目文件夾。在項目文件夾中，創(chuàng)建一個名為sustest.json的清單文件，該文件將是我們應(yīng)用程序的配置文件。在清單內(nèi)部。 JSON我們將定義Chrome App所需的一些設(shè)置。 Chrome應(yīng)用程序要求Subtest_version為2。我們還將定義應(yīng)用程序的名稱，其版本和背景腳本的路徑，以執(zhí)行啟動該應(yīng)用程序。我們將從外部服務(wù)URL中獲取推文，因此我們還將在此文件中指定該推文。這是清單的樣子。

>當Chrome應(yīng)用啟動時，我們將顯示一個窗口，其中將顯示Twitter的推文。 Chrome Apps具有一個名為Onlaunched的事件，我們使用該應(yīng)用程序在應(yīng)用程序啟動時為應(yīng)用程序創(chuàng)建窗口。

在項目文件夾TwitterChroMeApp中，創(chuàng)建另一個稱為腳本的文件夾，在其中創(chuàng)建了名為main.js的背景腳本。將以下代碼添加到main.js：

在啟用的活動中，我們將為Chrome應(yīng)用創(chuàng)建寡婦。將以下代碼添加到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>

在上面的代碼中，我們使用屏幕對象獲取可用的屏幕寬度和高度?；镀聊坏膶嶋H寬度，我們將新Chrome窗口的外部邊界設(shè)置為正確顯示。

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創(chuàng)建一個新窗口。在項目文件夾內(nèi)部TwitterChroMeApp內(nèi)部創(chuàng)建一個名為index.html的新文件，如下所示：>

>現(xiàn)在嘗試將Chrome應(yīng)用程序安裝在Chrome瀏覽器中。打開對

>工具 - >擴展

（可能

更多工具

）。從右上角的複選框中啟用開發(fā)人員模式，然後單擊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>或擴展窗口運行擴展名，您應(yīng)該看到以下內(nèi)容：>

接下來，我們將創(chuàng)建一個Ajax調(diào)用，該窗口啟動從服務(wù)URL檢索推文時會觸發(fā)。我們將使用Heroku上託管的服務(wù)。該服務(wù)有一些限制。它僅使用主題標籤perkytweets 進行推文，這足以讓我們的示例。 > >我們將使用jQuery進行Ajax調(diào)用，因此請將其下載到腳本文件夾中，並將其包含在index.html中，例如：>

現(xiàn)在，在腳本文件夾中創(chuàng)建一個名為script.js的新文件，並創(chuàng)建AJAX調(diào)用，如下所示：

index.html中的script.js：

現(xiàn)在打開

>工具 - >擴展

<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>

重新加載

以反映更改。接下來單擊該應(yīng)用程序以重新啟動它。如果您檢查Chrome Console（只是您在Chrome中訪問的普通控制臺），則應(yīng)顯示服務(wù)URL的響應(yīng)。

接下來，我們將在index.html中顯示響應(yīng)。我們將使用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>

>在項目文件夾中創(chuàng)建一個樣式文件夾，然後將Bootstrap CSS文件下載到文件夾中。將Bootstrap CSS文件包括在index.html。在index.html中包含一個UL元素以顯示推文。這是index.html現(xiàn)在應(yīng)該看起來的樣子：> >在Ajax成功中的scripts.js中的包括以下代碼，以附加從index.html中獲取的項目中獲取的項目。

重新啟動並重新啟動應(yīng)用程序，您應(yīng)該可以看到一個屏幕上充滿推文。

>為Android創(chuàng)建Chrome應(yīng)用

>由於我們將在Android上運行應(yīng)用程序，請確保您的Java JDK 7或更高，Android SDK 4.4.2或更高以及安裝在系統(tǒng)上的Apache Ant。

>我們還需要CCA命令行工具。您可以使用

安裝它

在官方文檔中可以找到有關(guān)設(shè)置Chrome應(yīng)用程序的環(huán)境以將Chrome應(yīng)用程序移植到Android和iOS的詳細信息。

>設(shè)置環(huán)境完成後，我們將創(chuàng)建一個新項目，從現(xiàn)有的TwitterChroMeApe到端口到Android。運行以下命令來創(chuàng)建項目：

<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>

>導(dǎo)航到TwitterAppForandroid並運行以下命令以在Android模擬器中運行該項目：

模擬器成功啟動後，您應(yīng)該看到模擬器中運行的應(yīng)用程序。

結(jié)論

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

在本教程中，我們看到瞭如何創(chuàng)建一個簡單的Chrome應(yīng)用程序並將其移植到Android平臺?？梢栽诠賳T文檔中找到有關(guān)使用Apache Cordova在移動設(shè)備上運行Chrome應(yīng)用程序的更多信息。

>您如何看待創(chuàng)建移動應(yīng)用程序的Chrome應(yīng)用程序選項？與僅使用標準HTML，CSS和JavaScript Web應(yīng)用程序中，它是否具有任何優(yōu)點？

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

在移動設(shè)備上運行Chrome應(yīng)用程序的常見問題（常見問題解答）

>如何在系統(tǒng)上安裝Cordova？