欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

cordova应用程序_Cordova:第一个Android应用程序

程序员文章站 2022-07-14 20:43:34
...

cordova应用程序

Cordova:第一个Android应用程序 (Cordova: First Android Application)

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

现在,我们准备使用Apache Cordova创建自己的第一个android应用。

  1. cmd.cmd
  2. desktop. So type the following code in command prompt: 桌面上创建第一个应用程序。 因此,在命令提示符下键入以下代码: cd desktop, if you are here cd desktop ,如果您在此处"C:user\system_name\". The command “ C:user \ system_name \”cd desktop will take you to desktop location.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. 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">			
    </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.htmlindex.jsstyle.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. config.xml, the config.xml中content tag is used to specify the first page to open, 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应用程序