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的名称。

    First Android Application
  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文件夹中看到它。

    First Android Application
  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

    First Android Application

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编码屏幕。

First Android Application

科尔多瓦:修改我们的应用程序 (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文件。

First Android Application

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应用程序

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值