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. 在asp.net core2.1中添加中间件以扩展Swashbuckle.AspNetCore3.0支持简单的文档访问权限控制

    Swashbuckle.AspNetCore3.0 介绍 一个使用 ASP.NET Core 构建的 API 的 Swagger 工具.直接从您的路由,控制器和模型生成漂亮的 API 文档,包括用于探 ...

  2. Linux下查看文件内容的命令和工具

    1.catcat命令主要用来查看文件内容,创建文件,合并文件,追加文件等. 1.1.查看文件 格式:cat 文件名称 说明:这条命令会把文件内容全部输出到显示屏上. cat -n 文件名称:查看文件内 ...

  3. PHP全栈学习笔记3

    trim()函数,用于去除字符串首尾空格和特殊字符 返回的是去掉的空格和特殊字符后的字符串 string trim(string str [,string charlist]); str 要操作的字符 ...

  4. 腾讯短信服务精简版（PHP )

    短信视乎已经被慢慢淡出平常的交流工具队列,但始终抹不去它的存在,短信验证码视乎从未被取代,此外在重要的信息通知的地位也是不可取的的.所以了解短信的使用是开发中很有必要的一环. 腾讯云的短信服务提供有1 ...

  5. Kubernetes 笔记 10 Job 机器人加工厂

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. Hi,大家好, ...

  6. SpringBoot-MongoDB 索引冲突分析及解决

    一.背景 spring-data-mongo 实现了基于 MongoDB 的 ORM-Mapping 能力, 通过一些简单的注解.Query封装以及工具类,就可以通过对象操作来实现集合.文档的增删改查 ...

  7. 并发系列（2）之 ThreadLocal 详解

    本文将主要结合源码讲述 ThreadLocal 的使用场景和内部结构,以及 ThreadLocalMap 的内部结构:另外在阅读文本之前只好先了解一下引用和 HashMap 的相关知识,可以参考 Re ...

  8. VIM新手福利，配置向

    今天搜索VIM配置的时候,搜到一个神器 https://github.com/amix/vimrc The Ultimate vimrc Over the last 10 years, I have ...

  9. 通过 JSONP 实现跨域请求

    优质参考资料:https://www.cnblogs.com/chiangchou/p/jsonp.html https://blog.csdn.net/hansexploration/article ...

  10. Django之模板系统

    变量的使用: def test(request): num=1 s='hello' li=[1,2,['a','b']] dic={'name':'w','age':1} se={1,2,3} tup ...