phoneGap 基础学习（iOS）

config.xml 配置文件含义

<widget>

        <preferencename="MySetting"value="true"/>

        <plugins>
            <pluginname="MyPlugin"value="MyPluginClass"/>
        </plugins>
        <accessorigin="*"/>
    </widget>

 

事件：任意一个可以被phoneGap检测到的动作，phoneGap专门事件：backbutton（Android）、deviceready（检测）、menubutton（Android）、pause（app转入后台）、resume（暂停app转入前台）、searchbutton（Android）、online（链接Internet时触发）、offline（断开Internet时触发）;其中deviceready事件是检测phoneGap是否加载完全，只有加载完全才能完全使用phoneGap函数；因此，这个事件起到了检测的重要作用。在做任何事情之前先检测它。

事件注册：document.addEventListner("menubutton",onMenuButton,false);

　　function onMenuButton(){

　　//处理菜单按钮事件

}

获取设备信息

device.name 设备名称

device.phoneGap phoneGap版本

device.platform 设备类型

device.uuid 设备唯一编号

device.version 操作系统版本

网络检测

Connection对象

确定网络连接类型：connection.type

例如：function checkConnection(){

　　var myState=navigator.network.connection.type;

　　myState返回的是一种状态：　

　　var  states={};

　　states[Connection.UNKNOWN] = '未知连接';

　　states[Connection.ETHERNET] = '以太网连接';

　　states[Connection.WIFI]= 'WiFi连接';　

　　states[Connection.CELL_2G] = '2G连接';

　　states[Connection.CELL_3G] = '3G连接';　　

　　states[Connection.CELL_4G] = '4G连接';

　　states[Connection.NONE] = '无网络连接';

　　alert('Connection type:'+states[myState]);

}

使用通知

navigator.notification.alert(message,callback,[title],[button]);

message:对话框消息

callback:警告结束回调函数

(可选)title:标题

(可选)button：按钮名称

确认对话框

navigator.notification.confirm(消息，使用锁按下按钮的索引回调函数，标题，按钮标签)

使用鸣叫

navigator.notification.beep(2);鸣叫两次

使用振动

navigator.notification.vibrate(2000)；毫秒单位

实例：

<html>
    <head>
       <title>Hello World</title>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">
        function onLoad(){

            document.addEventListener("deviceready",onDeviceReady,false);
            
        }
            function onDeviceReady(){
            
            }
            function showAlert(){
                navigator.notification.alert('game over',alertCallBack,'game over','Done');
            }
            
            function alertCallBack(){
            
            }
            function onConfirm(button){
                alert('you slected button'+button);
            }
            
            function showConfirm(){
            
                navigator.notification.confirm('Game over',onConfirm,'Game over','Restart,Exit');
            }
            
            function playBeep(){
                navigator.notification.beep(2);
            }
            
            function vibrate(){
                navigator.notification.vibrate(2000);
            }
            
            </script>

    </head>
    <body onLoad="onLoad()">
              <p><a href="#" onclick="showAlert(); return false">showAlert</a></p>
        <p><a href="#" onclick="showConfirm(); return false">showConfirm</a></p>
        <p><a href="#" onclick="playBeep(); return false">playBeep</a></p>
        <p><a href="#" onclick="vibrate(); return false">vibrate</a></p>
    </body>
</html>
HTML Code

地理定位

Geolocation API  包含3种地理定位数据只读对象

　　Position、PositionError、Coordinates

position包含由地理定位API所创建的坐标信息，包含两个属性：

　　coords(地理定位集合：经度、纬度、海拔等)

　　timestamp(创建一个时间戳：以毫秒为单位)

例如：

　　var onSuccess= function(position){

　　alert('纬度：'+'position.coords.latitude')

　　<--!

　　longitude:经度

　　altitude:海拔

　　accuracy:精度

　　altitudeAccuracy:海拔精度

　　heading:朝向

　　speed:速度

　　以及：new Date(position.timestamp)：时间戳

　　-->

}

 function onError(error){

　　//返回错误信息

　　error.code  &&error.message

}

　　navigator.geolocation.getCurrentPosition(onSuccess,onError);

使用地理定位方法

　　getCurrentPosition

　　　　navgator.geolocation.getCurrentPosition(geolocationSuccess,[geolocationError],[geolocationOptions]);

实例：　　

<html>
    <head>
       <title>Hello World</title>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">
       

            document.addEventListener("deviceready",onDeviceReady,false);
            var watchID=null;
            function onDeviceReady(){
                //每隔3秒更新一次
                var options={frequency:3000};
                watchID = navigator.geolocation.watchPosition(onSuccess,onError,options);
            }
            //地理定位成功回调
           function onSuccess(position){
               var element=document.getElementById('geolocation');
               element.innerHTML='latitude:'+position.coords.latitude+'<br/>'+'longtude'+position.coords.longitude+'<br/>'+'<hr/>' +element.innerHTML;
                    }
            //onError回调函数接收一个positonError对象
          function onError(error){
                            alert('code:'+error.code +'\n'+'message'+error.message+'\n');
                    }
            function watchClear
            </script>

    </head>
    <body >
          <p id='geolocation'>wathching geolocation</p>
        <input id='button'>
    </body>
</html>
HTMLCode

 

posted @ 2013-07-09 15:28  MyAppZone7797  阅读(462)  评论(0)  编辑  收藏  举报