天天看點

cordova應用程式_Cordova:第一個Android應用程式

cordova應用程式

Now we are ready to create our own first android app using Apache Cordova.

現在,我們準備使用Apache Cordova建立自己的第一個android應用。

  1. Open

    cmd

    .

    打開

    cmd

  2. Go to the location where you want to create your first application. Suppose you want to create your first app on desktop . So type the following code in command prompt:

    cd desktop

    , if you are here "C:user\system_name\" . The command

    cd desktop

    will take you to desktop location.

    轉到要建立第一個應用程式的位置。 假設您要在

    桌面 上建立第一個應用程式。 是以,在指令提示符下鍵入以下代碼:

    cd desktop

    ,如果您在此處 “ C:user \ system_name \”

    cd desktop

    指令将帶您到桌面位置。
  3. Type

    cordova create [project_name] [package_name] [apk_name]

    and press enter.

    鍵入

    cordova create [project_name] [package_name] [apk_name]

    ,然後按Enter鍵。 project_name → This will be your project name, like myFirstApp . After executing 3rd step, a folder will be created with the specified name on the desktop. You may check there. project_name →這将是您的項目名稱,例如 myFirstApp 。 執行第3步後,将在桌面上建立具有指定名稱的檔案夾。 您可以在那裡檢查。 package_name → Every App has a unique application ID which is known as package name, like com.stuytonight.app, com.myfirstapp.android, anything.anything.anyotherthing etc. 程式包 →每一個應用程式具有被稱為包名稱的唯一的應用程式ID,像com.stuytonight.app,com.myfirstapp.android,anything.anything.anyotherthing等 apk_name → It is the name of the apk. apk_name →它是apk的名稱。
    cordova應用程式_Cordova:第一個Android應用程式
  4. Type

    cd [project_name]

    and press enter, to get inside the project directory.

    鍵入

    cd [project_name]

    并按Enter鍵進入項目目錄。
  5. Now we will specify the name of the platform for which we want to create our mobile application, for example we can inform cordova, that we want to create android application by using the command,

    cordova platform add android

    . It will add android platform. You can see it in platforms

    folder, inside the project folder.

    現在,我們将指定要為其建立移動應用程式的平台的名稱,例如,我們可以通知cordova,我們要使用指令

    cordova platform add android

    建立android應用程式。 它将添加android平台。 您可以在項目檔案夾内的 platform 檔案夾中看到它。
    cordova應用程式_Cordova:第一個Android應用程式
  6. Type

    cordova build android

    . This command will generate the apk.

    鍵入

    cordova build android

    。 此指令将生成apk。

    For first time, Step 5 or Step 6 will take time, because the gradle file will be downloaded.

    第一次, 步驟5或步驟6将花費時間,因為gradle檔案将被下載下傳。

    Your apk's location will be:

    project_name/platforms/android/build/output/apk

    .

    您的apk位置将為:

    project_name / platforms / android / build / output / apk
    cordova應用程式_Cordova:第一個Android應用程式

You can run this

apk

on emulator or copy it to your android phone and install it there. After launching the app, you will see the default apache HTML coded screen.

您可以在模拟器上運作此

apk

或将其複制到您的android手機并在此處安裝。 啟動應用程式後,您将看到預設的Apache HTML編碼螢幕。

cordova應用程式_Cordova:第一個Android應用程式

科爾多瓦:修改我們的應用程式 (Cordova: Modifying our App)

Now we will add our own files to the app folder after the Step 4.

現在,在步驟4之後,我們将自己的檔案添加到app檔案夾中。

Our HTML file: index.html

我們的HTML檔案: index.html

<html>
    <head>
        <script type="text/javascript" src="index.js"></script>
        <link rel="stylesheet" type="text/css" href="name.css" target="_blank" rel="external nofollow" >			
    </head>
    <body onload="ask()">
        <div id='question'>Tell us your experience on Studytonight</div>
        <div id='answer'></div>
    </body>
</html>
           

Our CSS file: style.css

我們的CSS檔案: style.css

#question {
	margin-top:100px;
	text-align:center;
	color:red;
	border: blue solid 2px;
}

#question:hover {
	color:geen;
}

#answer {
	margin-top:30px;
	text-align:center;
	color:yellow;
	border: red solid 2px;
}
           

Our Javascript file: index.js

我們的Javascript檔案: index.js

function ask(){			
    // This function will be called when page will be loaded.
    var k = prompt("Tell us your experience on Studytonight"); 
    if(k.length > 0) {			
        // Before inserting string into the div, it clear it first.
        document.getElementById('answer').innerHTML = "";
        // Now it will inject string into the div.
        document.getElementById('answer').innerHTML = k;
    } 
    else {	  	
        // If length of string is 0, then it will again ask you the same question.
	   ask();
    }
}
           

Now open

project_name

folder, go to

www

folder, delete all the pre-existing files and place all the three file (

index.html

,

index.js

and

style.css

). Then follow the steps 5 & 6 again.

現在打開

project_name

檔案夾,轉到

www

檔案夾,删除所有先前存在的檔案,然後放置所有三個檔案(

index.html

index.js

style.css

)。 然後再次執行步驟5和6。

config.xml

檔案有什麼用? (What is

config.xml

file for?)

When you open

project_name

folder, then you will see a

config.xml

file. So let's explore what this file is for? Open this

config.xml

file in notepad, notepad++, Atom or Sublime, any good editor.

當您打開

project_name

檔案夾時,您将看到

config.xml

檔案。 那麼,讓我們探讨一下該檔案的作用是什麼? 在任何好的編輯器中的記事本,notepad ++,Atom或Sublime中打開此

config.xml

檔案。

cordova應用程式_Cordova:第一個Android應用程式
config.xml

is the global configuration file for our project. Every project will have this file. It specifies the platform, plugins used, first page to open, permissions etc.

config.xml

是我們項目的全局配置檔案。 每個項目都将有此檔案。 它指定平台,使用的插件,打開的第一頁,權限等。

  1. It specify for which platform, developer wants to create the app.

    它指定開發人員要為哪個平台建立應用程式。

  2. Required plugin.

    必需的插件。

  3. In config.xml, the

    content

    tag is used to specify the first page to open,

    在config.xml中 ,

    content

    标簽用于指定要打開的第一頁,
    <content src="index.html" />
               
    Whenever the app is opened, it gets redirected to this page

    index.html

    . You can edit it and you can change it to anything like

    index.html

    。 您可以對其進行編輯,也可以将其更改為

    firstpage.html

    , just by modifying the configuration in the

    firstpage.html

    東西,隻需修改config.xml file.config.xml檔案中的配置即可。

For more information, follow the link: https://cordova.apache.org/docs/en/latest/config_ref/

有關更多資訊,請通路以下連結: https : //cordova.apache.org/docs/en/latest/config_ref/

翻譯自: https://www.studytonight.com/apache-cordova/first-android-application

cordova應用程式