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代码以及配置文件,封 ...
随机推荐
- npm 使用 taobao 的镜像后，无法 login & publish
使用 npm adduser,添加用户之后,没有异常消息,然后使用 npm publish 发布,却报错: 401 原来是 npm 使用 taobao 的镜像后,需要指定 --registry htt ...
- cglib根据数据动态生成对象
最近有个任务:根据查询SQL直接导出报表 实现关键是,怎么根据sql查询的数据动态生成对象列表,想到Cglib动态代理实现 废话少说,上代码: 定义动态生成Java Bean类: import jav ...
- Python写爬虫爬妹子
最近学完Python,写了几个爬虫练练手,网上的教程有很多,但是有的已经不能爬了,主要是网站经常改,可是爬虫还是有通用的思路的,即下载数据.解析数据.保存数据.下面一一来讲. 1.下载数据 首先打 ...
- Java核心技术第四章——3.对象构造
重载: 如果多个方法(包含构造方法)有相同的名字.不同的参数,便产生重载.编译器必须挑选出具体执行哪个方法,它通过用各个方法给出的参数类型与特定方法调用所使用的值类型进行匹配挑选出相对应的方法. 如果 ...
- python-图像处理之PIL库的使用
1.先看一段英文代码The Python Imaging Library (PIL) adds image processing capabilities to your Python interpr ...
- springboot的war和jar包
本篇和大家分享的是通过maven对springboot中打war包和jar包:war通常来说生成后直接放到tomcat的webapps下面就行,tomcat配置自动解压war,而jar一般通过命令行部 ...
- ng跳转映射，被阿里云的云盾拦截，提示备案问题分析
在一个云项目调试过程中,ng映射到云时,发现被云盾拦截,提示备案. 1.客户提供的二级域名已经在华为云备案,映射的主机部署在阿里云. 2.ng映射域名时,出现备案提醒,f12调试发现跳转时,被拦截了. ...
- Linux维护之nginx宕机，端口被占用
1.重启时错误如下 2.端口被占用,执行如下命令 [root@hwc]fuser -k /tcp 3.重启nginx服务 4.显示重启成功. 查看被占用的端口情况 netstat -tln | g ...
- 玩转SpringBoot之定时任务详解
序言 使用SpringBoot创建定时任务非常简单,目前主要有以下三种创建方式: 一.基于注解(@Scheduled) 二.基于接口(SchedulingConfigurer) 前者相信大家都很熟悉, ...
- 【转载】 Sqlserver中通过Select Into语句快速单表备份
在Sqlserver数据库中,备份数据的方式有很多种,可以使用整个数据库备份,也可使用导出包含数据和架构的脚本文件的方式来进行单表或多表数据的备份,其实还有一种Select Into的方式可以快速备份 ...