首页 > 代码库 > Cordova入门系列（二）分析第一个helloworld项目

Cordova入门系列（二）分析第一个helloworld项目

2024-08-18 07:13:20   221人阅读

版权声明：本文为博主原创文章，未经博主允许不得转载

 

 

　　上一章我们介绍了如何创建一个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="http://www.mamicode.com/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="http://www.mamicode.com/cordova.js"></script>

　　<script type="text/javascript" src="http://www.mamicode.com/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项目


联系
我们