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. 【系列教程1】Gradle入门系列二:第一个Java项目

    这篇教程的主要内容是讲解如何用Gradle编译和打包一个简单的Java项目. 该Java项目只有一个需求:我们的构建脚本必须创建一个可执行的Jar文件,换句话说,我们必须能够使用命令java -jar ...

  2. Cordova入门系列(一)创建项目 转发 https://www.cnblogs.com/lishuxue/p/6008678.html

    版权声明:本文为博主原创文章,转载请注明出处 Cordova是什么? 初学Cordova的人,虽然了解一点点,知道Cordova是用来将html, css, js变成app的,但并不知道到底是怎么用的 ...

  3. Cordova入门系列(三)Cordova插件调用 转发 https://www.cnblogs.com/lishuxue/p/6018416.html

    Cordova入门系列(三)Cordova插件调用   版权声明:本文为博主原创文章,转载请注明出处 上一章我们介绍了cordova android项目是如何运行的,这一章我们介绍cordova的核心 ...

  4. Cordova入门系列(二)分析第一个helloworld项目

    版权声明:本文为博主原创文章,转载请注明出处 上一章我们介绍了如何创建一个cordova android项目,这章我们介绍一下创建的那个helloworld项目的代码,分析其运行. MainActiv ...

  5. C# 互操作性入门系列(二):使用平台调用调用Win32 函数

    好文章搬用工模式启动ing ..... { 文章中已经包含了原文链接 就不再次粘贴了 言明 改文章是一个系列,但只收录了2篇,原因是 够用了 } --------------------------- ...

  6. [转]C# 互操作性入门系列(二):使用平台调用调用Win32 函数

    传送门 C#互操作系列文章: C# 互操作性入门系列(一):C#中互操作性介绍 C# 互操作性入门系列(二):使用平台调用调用Win32 函数 C# 互操作性入门系列(三):平台调用中的数据封送处理 ...

  7. Maven入门系列(二)--设置中央仓库的方法

    原文地址:http://www.codeweblog.com/maven入门系列-二-设置中央仓库的方法/ Maven仓库放在我的文档里好吗?当然不好,重装一次电脑,意味着一切jar都要重新下载和发布 ...

  8. mybatis入门系列二之输入与输出参数

    mybatis入门系列二之详解输入与输出参数   基础知识   mybatis规定mapp.xml中每一个SQL语句形式上只能有一个@parameterType和一个@resultType 1. 返回 ...

  9. Cordova入门系列(四)自定义Cordova插件--showToast

    前三篇Cordova入门系列,简单讲解了Cordova,以及如何调用Cordova插件,今天我们讲解一下如何自己做一个插件. 自定义插件,就是自己写一些安卓java代码,然后和js代码以及配置文件,封 ...

随机推荐

  1. 云时代的.NET

    编程语言从最初的0101机器码到汇编语言再到面向对象的编程,不断的发展,整个发展趋势呈现高内聚.低耦合.可重用.可理解的特点.最早编程是用机器码,人的大脑不像电脑,无法处理0101:后来汇编语言还是太 ...

  2. 【死磕 Spring】—– IOC 之解析Bean:解析 import 标签

    原文出自:http://cmsblogs.com 在博客[死磕Spring]----- IOC 之 注册 BeanDefinition中分析到,Spring 中有两种解析 Bean 的方式.如果根节点 ...

  3. WelcomeActivity【欢迎界面】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 简单记录下欢迎界面的布局以及倒计时和跳过功能. 效果图 代码分析 1.修改APP整个主题为无标题栏样式:styles.xml文件 & ...

  4. Jvm垃圾回收器(终结篇)

    知识回顾: 第一篇<Jvm垃圾回收器(基础篇)>主要讲述了判断对象的生死?两种基础判断对象生死的算法.引用计数法.可达性分析算法,方法区的回收.在第二篇<Jvm垃圾回收器(算法篇)& ...

  5. Springboot 系列(四)Spring Boot 日志框架

    注意:本 Spring Boot 系列文章基于 Spring Boot 版本 v2.1.1.RELEASE 进行学习分析,版本不同可能会有细微差别. 前言 Spring 框架选择使用了 JCL 作为默 ...

  6. Hexo优化 | 创建sitemap站点地图并向Google提交

    前言 站点地图是一种文件,您可以通过该文件列出您网站上的网页,从而将您网站内容的组织架构告知Google和其他搜索引擎.Sitemap 可方便管理员通知搜索引擎他们网站上有哪些可供抓取的网页.搜索引擎 ...

  7. 分享基于 websocket 网页端聊天室

    博客地址:https://ainyi.com/67 有一个月没有写博客了,也是因为年前需求多.回家过春节的原因,现在返回北京的第二天,想想,应该也要分享技术专题的博客了!! 主题 基于 websock ...

  8. 基于vue.js的简单用户管理

    功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...

  9. 一个.Net网站的成长历程

    引言: 时光匆匆,如白驹过隙,又一次来到了这个节点,回首逝去的日子,有收获也有遗憾... 年底的日子总是那么悠闲,趁着这些悠闲的时光,整理一下自己平时在工作中的收获. 之所以取这个标题呢一来是为了让自 ...

  10. Hibernate框架_搭建第一个Hibernate框架

    一.eclipse搭建 A.创建动态web项目 New-->Dynamic web project(web project) B.导入jar包 1.数据库驱动包 2.hibernate开发必须j ...