Cordova入门系列（二）分析第一个helloworld项目 转发 https://www.cnblogs.com/lishuxue/p/6015420.html
Cordova入门系列（二）分析第一个helloworld项目
版权声明：本文为博主原创文章，转载请注明出处
上一章我们介绍了如何创建一个cordova android项目，这章我们介绍一下创建的那个helloworld项目的代码，分析其运行。
MainActivity.java
我们已经将MainActivity导入到了eclipse中。打开scr下com.example.hello下的MainActivity.java。
//MainActivity继承了CordovaActivity
public class MainActivity extends CordovaActivity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
// Set by <content src="index.html" /> in config.xml
loadUrl(launchUrl);
}
}
学过安卓的都知道，Activity在启动的时候会首先调用onCreate方法。
loadUrl(launchUrl);会在当前的WebView中去加载首页，当然这个首页是我们自己配置的，在res/xml/config.xml中。<content src="index.html" />。这个路径都是指的assets/www下的路径。
这样这个app启动的时候会首先调用这个MainActivity(当然这是在AndroidManifest.xml中配置的)，然后Activity启动的时候会将index.html加载在其WebView中，然后我们就看到了Cordova的页面。
index.html
我们再来看看index.html中都有什么内容。
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
在显示这个index页面的时候，会加载两个js文件。cordova.js就是cordova的api，调用原生内容用的，相当于jar包。
index.js
再看这个index.js。
var app = {
// 初始化方法，会调用绑定事件的方法
initialize: function() {
this.bindEvents();
},
// 绑定事件的方法,事件可以是这些:
// 'load', 'deviceready', 'offline', and 'online'.
//该事件是在 cordova 载入完成后发生的事件，它表示cordova 加载完成并准备访问，yourCallbackFunction，相当于程序的入口功能
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready 后事件处理
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// 事件处理，更新DOM，改变两个元素的css
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
//调用初始化方法
app.initialize();
加载index.js之后，程序会首先调用初始化方法，初始化的时候会去绑定事件监听：document.addEventListener('deviceready', this.onDeviceReady, false);
deviceready事件，该事件是在 cordova 载入完成后发生的事件，它表示cordova 加载完成并准备访问，你传进去的回调函数，相当于程序的入口函数。
当cordova准备好的时候，会去首先执行你传进去的回调函数，这里是onDeviceReady()。这个方法会改变DOM元素的css样式。
最终效果就是，当cordova没有加载完的时候，页面上Apache Cordova下面那里显示的是：Connecting to Device（背景是灰色）。加载完之后，cordova准备好之后，原来显示的消失，现在显示的是：Device is Ready（背景是绿色）
Cordova入门系列（二）分析第一个helloworld项目 转发 https://www.cnblogs.com/lishuxue/p/6015420.html的更多相关文章
- 【系列教程1】Gradle入门系列二：第一个Java项目
这篇教程的主要内容是讲解如何用Gradle编译和打包一个简单的Java项目. 该Java项目只有一个需求:我们的构建脚本必须创建一个可执行的Jar文件,换句话说,我们必须能够使用命令java -jar ...
- Cordova入门系列（一）创建项目 转发 https://www.cnblogs.com/lishuxue/p/6008678.html
版权声明:本文为博主原创文章,转载请注明出处 Cordova是什么? 初学Cordova的人,虽然了解一点点,知道Cordova是用来将html, css, js变成app的,但并不知道到底是怎么用的 ...
- Cordova入门系列（三）Cordova插件调用 转发 https://www.cnblogs.com/lishuxue/p/6018416.html
Cordova入门系列(三)Cordova插件调用 版权声明:本文为博主原创文章,转载请注明出处 上一章我们介绍了cordova android项目是如何运行的,这一章我们介绍cordova的核心 ...
- Cordova入门系列（二）分析第一个helloworld项目
版权声明:本文为博主原创文章,转载请注明出处 上一章我们介绍了如何创建一个cordova android项目,这章我们介绍一下创建的那个helloworld项目的代码,分析其运行. MainActiv ...
- C# 互操作性入门系列(二)：使用平台调用调用Win32 函数
好文章搬用工模式启动ing ..... { 文章中已经包含了原文链接 就不再次粘贴了 言明 改文章是一个系列,但只收录了2篇,原因是 够用了 } --------------------------- ...
- [转]C# 互操作性入门系列(二)：使用平台调用调用Win32 函数
传送门 C#互操作系列文章: C# 互操作性入门系列(一):C#中互操作性介绍 C# 互操作性入门系列(二):使用平台调用调用Win32 函数 C# 互操作性入门系列(三):平台调用中的数据封送处理 ...
- Maven入门系列(二)--设置中央仓库的方法
原文地址:http://www.codeweblog.com/maven入门系列-二-设置中央仓库的方法/ Maven仓库放在我的文档里好吗?当然不好,重装一次电脑,意味着一切jar都要重新下载和发布 ...
- mybatis入门系列二之输入与输出参数
mybatis入门系列二之详解输入与输出参数 基础知识 mybatis规定mapp.xml中每一个SQL语句形式上只能有一个@parameterType和一个@resultType 1. 返回 ...
- Cordova入门系列（四）自定义Cordova插件--showToast
前三篇Cordova入门系列,简单讲解了Cordova,以及如何调用Cordova插件,今天我们讲解一下如何自己做一个插件. 自定义插件,就是自己写一些安卓java代码,然后和js代码以及配置文件,封 ...
随机推荐
- python 基础语法梳理
最近涉及到python的东西比较多,抽一点时间把基础语法规整下. 1.面向对象 #coding=utf-8 def _class_test_01(): s = squire(3,4) print(&q ...
- [WP]BugkuCtf - pwn2
1.首先运行一下该程序 2.我们权限不够于是去修改一下权限(改前,改后) 3.改后我们重新运行一下(123是输入的语句) 4.拖进IDA,查看字符串,此处应该就是得到flag的地方 5.之后我们查看m ...
- 部署tomcat环境
1.安装java jdk Java环境变量配置 2.下载64位tomcat https://tomcat.apache.org/download-70.cgi 3.配置service 打开cmd,执行 ...
- Spring之旅第三篇-Spring配置详解
上一篇学习了IOC的概念并初步分析了实现原理,这篇主要学习Spring的配置,话不多说,让我们开始! 一.Bean元素配置 1.1 基本配置 看一个最基本的bean配置 <bean name=& ...
- 查看ntp时间是否同步
nptq -p 命令 ntpq用来监视ntpd操作,ntpq -p查询网络中的NTP服务器,同时显示客户端和每个服务器的关系,也可以用watch实时查看. 位置 标志 含义 remote之前 * 响应 ...
- 拓扑排序的 +Leapms 线性规划模型
知识点 拓扑排序 拓扑排序的+Leapms模型 无圈有向图 一个图G(V,E), 如果边有向且不存在回路,则为无圈有向图.在无圈有向图上可以定义拓扑排序.下图是一个无圈有向图的例子. 拓扑排序 给定一 ...
- 《C#并发编程经典实例》学习笔记—2.6 任务完成时的处理
问题 正在 await 一批任务,希望在每个任务完成时对它做一些处理.另外,希望在任务一完成就立即进行处理,而不需要等待其他任务. 问题的重点在于希望任务完成之后立即进行处理,而不去等待其他任务. 这 ...
- .net工具类 分享一个简单的随机分红包的实现方式
废话不多说,直接上代码 /// <summary> /// 分红包 /// </summary> public class RandomMoney { public Rando ...
- 一个tomcat设置多个端口，多个端口对应多个应用
修改tomcat/conf目录里面server.xml文件 例如下面这样新增一个8090端口,设置下appBase目录,这样就可以用一个tomcat监听多个端口,每个端口都可以放应用了.我这样新增下面 ...
- tomcat部署项目后，war包是否可刪?war包存在必要性!
在tomcat中webapps目錄上傳war包后, 对war解压时候. war不能在tomcat运行时删除,否则会删除自动解压的工程. 你可以停止tomcat后删除war. 当你重新部署的时候,如果 ...