work hard work smart

专注于Java后端开发。 不断总结，举一反三。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Phonegap 事件机制

Posted on 2017-03-28 19:56  work hard work smart  阅读(230)  评论(0)  编辑  收藏  举报

PhoneGap事件包含另个部分，一个是传统网页触发的事件，比如DOM加载，超链接，form表单提交事件等。

另一个是PhoneGap独有的事件。如

deviceready：只在设备在本地环境和页面完全加载后触发。

backbutton： 重载系统的Back按纽

pasue： pasue事件

resume ： resume事件

searchbutton： 当用户在Android系统上点击"搜索”时触发。

online：连接的网络时触发

offline： 没有网络时触发

menubutton ：重新定义菜单行为

batterycritical ： 电量达到临界值时触发

batterlow： 电量非常低时触发

Demo如下

1.首先创建PhoneGap Project

2.引入JQuery Mobile

3. 编辑HTML和JS代码

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8" />
    <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" />
    <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> -->

    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script  type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
    <title>Hello World</title>
    <script type="text/javascript" charset="utf-8">

        var count = 0;
        document.addEventListener('deviceready', onDeviceReady, false);

        function onDeviceReady(){
            document.addEventListener("backbutton", onBackButton, false);
            document.addEventListener("pause", onPause, false);
            document.addEventListener("resume", onResume, false);
            document.addEventListener("online", isOnline, false);
            document.addEventListener("offline", isOffline, false);
            document.addEventListener("menubutton", onMenuButton, false);
            console.log("console device ready");
            alert("device Ready");
        }

         function onBackButton(){
            count++;
            console.log("Trigger back button event " + count + " time");
            $.mobile.changePage("#page3",'pop',false,true);
        }

        function onPause(){
            console.log("myphonegap onPause function");
        }

         function onResume(){
            console.log("myphonegap onResume function");
        }

        function isOnline(){
            console.log("myphonegap isOnline function");
        }

         function isOffline(){
            console.log("myphonegap isOffline function");
        }

        function onMenuButton(){
            console.log("myphonegap onMenuButton function");
              $.mobile.changePage("#page3",'pop',false,true);
        }

    </script>
</head>

<body>
    <div id="page1" data-role="page" data-add-back-btn="true">
        <header data-role="header"><h1>Hello world</h1></header>
        <div data-role="content" class="content">
            <p>第一页</p>
            <p><a href="#page2">跳转到第二页</a> </p>
        </div>
        <footer data-role="footer"><h1>Footer</h1></footer>
    </div>
    <div id="page2" data-role="page" data-add-back-btn="true">
        <header data-role="header"><h1>Hello world</h1></header>
        <div data-role="content" class="content">
            <p>第二页</p>
            <p><a href="#page3">跳转到第三页</a> </p>
        </div>
        <footer data-role="footer"><h1>Footer</h1></footer>
    </div>
    <div id="page3" data-role="page" data-add-back-btn="true">
        <header data-role="header"><h1>Hello world</h1></header>
        <div data-role="content" class="content">
            <p>第三页</p>
            <p><a href="#page1">返回第一页</a> </p>
        </div>
        <footer data-role="footer"><h1>Footer</h1></footer>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
</body>

</html>

　　以下Code为注册事件监听

  document.addEventListener('deviceready', onDeviceReady, false);

        function onDeviceReady(){
            document.addEventListener("backbutton", onBackButton, false);
            document.addEventListener("pause", onPause, false);
            document.addEventListener("resume", onResume, false);
            document.addEventListener("online", isOnline, false);
            document.addEventListener("offline", isOffline, false);
            document.addEventListener("menubutton", onMenuButton, false);
            console.log("console device ready");
            alert("device Ready");
        }

　　之后在Android Studio生成apk安装的Androd设备上。将会显示对应的Log。