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项目的更多相关文章
- 【系列教程1】Gradle入门系列二：第一个Java项目
这篇教程的主要内容是讲解如何用Gradle编译和打包一个简单的Java项目. 该Java项目只有一个需求:我们的构建脚本必须创建一个可执行的Jar文件,换句话说,我们必须能够使用命令java -jar ...
- Cordova入门系列（二）分析第一个helloworld项目 转发 https://www.cnblogs.com/lishuxue/p/6015420.html
Cordova入门系列(二)分析第一个helloworld项目 版权声明:本文为博主原创文章,转载请注明出处 上一章我们介绍了如何创建一个cordova android项目,这章我们介绍一下创建的 ...
- Cordova入门系列（三）Cordova插件调用 转发 https://www.cnblogs.com/lishuxue/p/6018416.html
Cordova入门系列(三)Cordova插件调用 版权声明:本文为博主原创文章,转载请注明出处 上一章我们介绍了cordova android项目是如何运行的,这一章我们介绍cordova的核心 ...
- 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代码以及配置文件,封 ...
- C语言高速入门系列(二)
C语言高速入门系列(二) -----转载请注明出处coder-pig 本节引言: 在前面一节中我们对C语言进行了初步的了解,学会了使用IDE进行代码的编写,编译执行! 在这一节中我们会对C语言的基本的 ...
随机推荐
- springboot+springcloud集成jar
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- JavaWeb中使用JSON
前言: 最近也是期末了,有好多好多文档和实验报告要交,所以都没啥时间写文,这段时间清闲了,来补一下之前学习时遗漏的一些知识树,话说就没人吐槽这个JSON图标好丑吗? 什么是JSON JSON 指的是 ...
- Linux常用监控命令简介 - top
top -hv | -bcisS -d delay -n iterations -p pid [, pid ...] 指令介绍-b : 批次模式运行.-c : 显示执行任务的命令行.-d : 设定延迟 ...
- Runloop详解
RunLoop是iOS和OSX开发中非常基础的一个概念,这篇文章将从源码以及应用入手,介绍RunLoop的概念以及底层实现原理.本人看了一下RunLoop的英语源码,以及借鉴部分优秀博客,感谢!读完这 ...
- DSAPI 添加删除程序到Windows启动
使用DSAPI.dll中文件类里现成的功能,将使你可以快速高效地实现将程序加入Windows启动项或从启动项中删除. 简单也是非常地简单,但由于是比较独立的功能,所以单独发表为整个篇幅. DSAPI ...
- Docker 更新镜像
docker镜像如下: 今天在运行的容器内使用 apt-get update 命令进行更新时,发下很多404错误. Err http://archive.ubuntu.com wily-updates ...
- Elasticsearch单机双节点集群部署实战
一.安装第一个ElasticSearch(主节点) 1.创建es用户,启动es不能使用root用户 useradd es passwd es12 root用户进入/home/es目录下 2.获取Ela ...
- 4 Redis 配置文件介绍
2016-12-22 14:28:39 该系列文章链接NoSQL 数据库简介Redis的安装及及一些杂项基础知识Redis 的常用五大数据类型(key,string,hash,list,set,zse ...
- Vue UI：Vue开发者必不可少的工具
译者按: Vue开发工具越来越好用了! 原文: Vue UI: A First Look 译者: Fundebug 本文采用意译,版权归原作者所有 随着最新的稳定版本Vue CLI 3即将发布,是时候 ...
- 03-HTML的body标签（文本标签）学习
<html> <head> <title>HTML的body标签-文本标签学习</title> <meta charset="utf ...