第五讲 PhoneGap加速计api获取加速计x轴y轴z轴信息实现摇一摇、重力感应

学习要点:

1. PhoneGap 加速计 Accelerometer 对象介绍

2. 获取加速度信息

3. 定期获取加速度信息

4. 摇一摇

5. 重力感应

一、PhoneGap 加速计 Accelerometer 对象介绍

主要方法

accelerometer.getCurrentAcceleration 获取当前设备在 x,y,z 轴上的加速度信息

accelerometer.watchAcceleration 定期获取设备的加速度信息

accelerometer.clearWatch 停止定期获取设备的加速度信息
参数 accelerometerSuccess 获取加速度信息成功的回调函数

accelerometerError 获取加速度信息失败的回调函数

accelerometerOptions 一般为 json 对象,frequency 是它目前的唯一参数,以毫秒数表示,用来指定定期获取 加速度信息频率

二、获取加速度信息 

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Acceleration 例子</title>  
<script type="text/javascript" charset="utf-8" src="cordova.js"></script> 
<script type="text/javascript" charset="utf-8"> 

    // 等待 PhoneGap 加载 
document.addEventListener("deviceready", onDeviceReady, false);  
    // 加载完成 
    function onDeviceReady() { 
         navigator.accelerometer.getCurrentAcceleration(onSuccess, onError); 
    }  
    // 获取加速度信息成功后的回调函数     
    // 接收包含当前加速度信息的 Acceleration 对象 
    function onSuccess(acceleration) {         
        alert('X 轴方向的加速度: ' + acceleration.x + '\n' +               'Y 轴方向的加速度: ' + acceleration.y + '\n' +               'Z 轴方向的加速度: ' + acceleration.z + '\n' +               '时间戳: '      + acceleration.timestamp + '\n'); 
    }  
    // 获取加速度信息失败后的回调函数 
    function onError() {         
        alert('出错了!'); 
    }  
</script> 
</head> 
<body> 
<h1>例子</h1> 
<p>获取当前的加速度信息</p> 
</body> 
</html>

 三. 定期获取加速度信息 

<!DOCTYPE html>
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Acceleration 例子</title>  
<script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript" charset="utf-8"> 
    // 当前 watchAcceleration 的引用 ID 
    var watchID = null;  
    // 等待 PhoneGap 加载
    document.addEventListener("deviceready", onDeviceReady, false);  
    // 加载完成     
    function onDeviceReady() { 
          startWatch();     
    }  
    // 开始监测    
    function startWatch() {  
            // 每隔三秒更新一次信息
            var options = { frequency: 3000 };  
            watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);    
     }  
    // 停止监测    
   function stopWatch() {        
            if (watchID) { 
                  navigator.accelerometer.clearWatch(watchID); watchID = null;         
            }     
    }  
    // 获取加速度信息成功后的回调函数     
   // 接收包含当前加速度信息的 Acceleration 对象    
   function onSuccess(acceleration) { 
          var element = document.getElementById('accelerometer'); 
          element.innerHTML = 'X 轴方向的加速度: ' + acceleration.x + '<br />' +                             'Y 轴方向的加速度: ' + acceleration.y + '<br />' +                             'Z 轴方向的加速度: ' + acceleration.z + '<br />' +                              '时间戳: '      + acceleration.timestamp + '<br />';    
     }  
    // 获取加速度信息失败后的回调函数     
    function onError() { 
          alert('onError!');     
    } 
</script> 
</head> 
<body> 
<div id="accelerometer">监测加速度信息中...</div>
 <button onclick="stopWatch();">停止监测加速度信息</button> 
</body> 
</html>

 四. 摇一摇 

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Acceleration 例子</title> 
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script> 
<script type="text/javascript" charset="utf-8">  
var watchID = null;  
document.addEventListener("deviceready", onDeviceReady, false);  
 varoldValue = { 
     x: null, 
     y: null, 
     z: null 
 }  
    function onDeviceReady() { 
       startWatch(); 
    }   
    function startWatch() { 
       var options = { frequency: 300 };  
       watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options); 
    }  
    function stopWatch() { 
        if (watchID) { 
           navigator.accelerometer.clearWatch(watchID); 
           watchID = null; 
        } 
    }  
    // 获取加速度信息成功后的回调函数 
    function onSuccess(newValue) { 
        var changes = {}, 
        bound = 3; 
        if (oldValue.x !== null) { 
           changes.x = Math.abs(oldValue.x, newValue.x); 
           changes.y = Math.abs(oldValue.y, newValue.y); 
           changes.z = Math.abs(oldValue.z, newValue.z); 
        } 
        if (changes.x> bound &&changes.y> bound &&changes.z> bound) {   
            alert('检测到手机晃动'); 
        } 
        oldValue = { 
           x: newValue.x, 
           y: newValue.y, 
           z: newValue.z 
        } 
        var element = document.getElementById('accelerometer'); 
        element.innerHTML = 'Acceleration X: ' + newValue.x + '<br />' + 
                            'Acceleration Y: ' + newValue.y + '<br />' + 
                            'Acceleration Z: ' + newValue.z + '<br />' +  
                            'Timestamp: '      + newValue.timestamp + '<br />'; 
    }  
    // 获取加速度信息失败后的回调函数 
    function onError() { 
       alert('onError!'); 
    }  
</script> 
</head> 
<body> 
<div id="accelerometer">监测加速度信息中...</div> 
<button onclick="stopWatch();">停止监测加速度信息</button> 
</body> 
</html>

 五. 重力感应 

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Acceleration 例子</title> 
<style type="text/css">  
#ball {     position: absolute;     z-index: 0;     left: 20px;     top: 100px;     background: #f00; } 
</style> 
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script> 
<script type="text/javascript" charset="utf-8">  
varwatchID = null;  
document.addEventListener("deviceready", onDeviceReady, false);  
function drawCircle(x,y) {  
   varctx = document.getElementById("ball").getContext('2d');  
   varrd = 10;  ctx.beginPath();      
   ctx.arc(x, y, rd, 0, Math.PI * 2, false);  
   ctx.closePath();  
   ctx.fillStyle = "yellow";  
   ctx.fill();  
}    
function clear() {  
   varctx = document.getElementById("ball").getContext('2d');  
   ctx.clearRect(0,0,200,200);  
}  
function onDeviceReady() {  
   drawCircle(10,10); startWatch(); 
}   
function startWatch() { 
   var options = { frequency: 40 };  
   watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);     
}  
function stopWatch() {         
   if (watchID) { 
      navigator.accelerometer.clearWatch(watchID); watchID = null;         
   }     
}  
varoldX = 10, oldY = 10;     
// 获取加速度信息成功后的回调函数     
function onSuccess(newValue) {      
   if(10<=oldX<180&&10<=oldY<180){    
       clear();    
       drawCircle(oldX,oldY);   
   }   
   oldX -= newValue.x;   
   oldY += newValue.y; 
   var element = document.getElementById('accelerometer'); 
   element.innerHTML = 'X: ' + oldX + '<br />' +                             'Y: ' + oldY + '<br />';     
}  
// 获取加速度信息失败后的回调函数     
function onError() { 
   alert('onError!');     
}  
</script> 
</head> 
<body> 
   <div id="accelerometer">开启重力感应...</div> 
   <button onclick="stopWatch();">停止重力感应</button> 
   <canvas id="ball" width="200" height="200"></canvas> 
</body> 
</html>

 

第四讲 PhoneGap 白名单安全机制 navigator.app 加载外部页面返回

学习要点:

1. Phonegap 白名单安全机制

2. Navigator.app 对象加载外部页面 返回上级页面

一、 Phonegap 白名单安全机制

Phonegap应用的页面大多存在于本地,但有时需要加载外部的Web页面到应用内置的浏览器 视图中已完成特定的应用功能,出于安全性考虑,PhoneGap 设立了白名单安全机制,通过它来 控制能够加载到内置浏览器视图的内容来源.

Android 不通过白名单安全机制的话调用外部浏览器

IOS 不通过白名单安全的话会直接拒绝.

Android 配置 res/xml/config.xml IOS 配置 以及 Wp7/wp8 查看文档 http://www.phonegap100.com/doc/guide_whitelist_index.md.html#Domain%20Whitelist%20Gu ide

二、Navigator.app 主要对象阐述

navigator.app.loadUrl() 加载 web 页面的应用程序中或者系统默认的浏览器中

navigator.app.cancelLoadUrl() 在 web 页面成功加载之前取消加载

navigator.app.backHistory() 返回上一次浏览页面

navigator.app.clearHistory() 清空浏览历史

navigator.app.clearCache() 清空程序的资源文件缓存

navigator.app.exitApp() 退出应用程序

navigator.splashscreen.show();

navigator.splashscreen.hide();

navigator.app.loadUrl

cancelLoadUrl  取消加载 url

function loadUrl(){   
              navigator.app.loadUrl("http://m.meilishuo.com/",{wait:2000, loadingDialog:"Wait,Loading App", loadUrlTimeoutValue: 60000}); 

 }

第三讲 PhoneGap 设备信息、网络连接和通知 api

学习要点:

1. 设备信息

2. 网络连接

3. phonegap 通知

一、 设备信息

device.name 设备名称

device.cordova PhoneGap 版本

device.platform 设备平台

device.uuid uuid 编码

device.version 平台版本

<script type="text/javascript"> 
              $(document).ready(function(){    
                        document.addEventListener("deviceready", myDeviceReadyListener, false);  
              });    
              function myDeviceReadyListener(){   
                        $("#deviceName .ui-btn-text").text("设备名称" + device.name);  
                        $("#deviceCordova .ui-btn-text").text("PhoneGap 版本" + device.cordova);  
                        $("#devicePlatform .ui-btn-text").text("设备平台" + device.platform);  
                        $("#deviceUUID .ui-btn-text").text("uuid 编码" + device.uuid);   
                        $("#deviceVersion .ui-btn-text").text("平台版本" + device.version); 
                 }   
 </script> 
</head> 
<body>  
             <div data-role="page">   
                      <div data-role="header">    
                            <h1>PhoneGap 实战</h1>   
                      </div>   
                     <div data-role="content">    
                              <a href="#" data-role="button" id="deviceName"></a>    
                              <a href="#" data-role="button" id="deviceCordova"></a>    
                              <a href="#" data-role="button" id="devicePlatform"></a> 
                              <a href="#" data-role="button" id="deviceUUID"></a>    
                              <a href="#" data-role="button" id="deviceVersion"></a>   
                    </div>  
                    <div data-role="footer">   
                             <h4>&nbsp;</h4>   
                   </div>  
       </div> 
</body>

二、网络连接

Phonegap 网络连接通过 navigator.network.connection.type 来获取,一般有一下几种状态

1. Connection.UNKNOWN    未知连接

2. Connection.ETHERNET     以太网

3. Connection.WIFI         WiFi

4. Connection.CELL_2G    2G网络

5. Connection.CELL_3G     3G网络

6. Connection.CELL_4G     4G 网络

7. Connection.NONE       无网络连接

<!DOCTYPE html> 
<html> 
<head> 
<title>Device Properties Example</title> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<script type="text/javascript" charset="utf-8" src="cordova.js"></script> 
<script type="text/javascript" charset="utf-8">  
       document.addEventListener("deviceready", onDeviceReady, false);  
       function onDeviceReady() {         
              // 监听网络的变化         
             window.addEventListener("online", onOnline, false);         
             window.addEventListener("offline", onOffline, false);         
             // 检查网络连接         
             checkNetworkConnection();    
        }  
       function checkNetworkConnection() {         
             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('网络连接类型: ' + states[navigator.network.connection.type]);     
       }  
       function onOnline() {         alert('您现在在线');     }  
       function onOffline() {         alert('您现在离线');     } 
</script>
</head> 
<body> 
        <p>检查网络类型的例子</p> <input type="button" value="检查网络" onClick="checkNetworkConnection()" /> 
</body>
</html>

三. 通知

notification.alert 提示对话框

notification.confirm 确认对话框

notification.prompt 该 notification.prompt 方法显示一个对话框,比本地浏览器的提 示功能更强大。

notification.beep 发出嘟嘟的声音

notification.vibrate 震动

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>PhoneGap-Notification</title> 
<link rel="stylesheet" href="../jquery.mobile-1.1.1/jquery.mobile-1.1.1.css" /> 
<script src="../jquery.mobile-1.1.1/jquery.js"></script> 
<script src="../jquery.mobile-1.1.1/jquery.mobile-1.1.1.js"></script> 
<script type="text/javascript" charset="utf-8" src="../cordova-1.9.0.js"></script> 
<script type="text/javascript"> 
 $(document).ready(function(){ 
        document.addEventListener("deviceready", myDeviceReadyListener, false);  
 }); 

 function myDeviceReadyListener(){ 
         $("#NoAlert").click(function(){    navigator.notification.alert("这是一个提醒",function(){     console.log("确认了!");           },"标题","确认"); 

  }); 

  $("#NoConfirm").click(function(){    navigator.notification.confirm("请问你吃饭了吗?",function(info){              console.log("你选择了" + info);    },"请确认","吃了,没吃"); 
  }); 

  $("#NoBeep").click(function(){ 
            navigator.notification.beep(3); 
  }); 

  $("#NoVibrate").click(function(){ 
         navigator.notification.vibrate(3000); 
  }); 
 }  
</script> 
</head> 
<body> 
 <div data-role="page"> 
           <div data-role="header">    
                   <h1>PhoneGap 实战</h1> 
           </div> 
           <div data-role="content">    
                   <a href="#" data-role="button" id="NoAlert">弹出提示框</a>    
                   <a href="#" data-role="button" id="NoConfirm">弹出确认框</a>    
                   <a href="#" data-role="button" id="NoBeep">提示音</a>    
                   <a href="#" data-role="button" id="NoVibrate">震动</a> 
          </div> 
          <div data-role="footer"> 
                  <h4>&nbsp;</h4> 
          </div> 
 </div> 
</body> 
</html>

第二讲 PhoneGap API 之事件处理

学习要点:

1. deviceready 事件
2. pause 事件
3. resume 事件
4. online 事件
5. offline 事件
6. backbutton 事件
7. menubutton 事件
8. batterycritical 事件
9. batterylow 事件
10. batterystatus 事件

一、 deviceready 事件

在使用 PhoneGap 开发应用时,deviceready 事件是非常常用的。这一事件在设备的本地 环境和页面完全加载完成之后才触发 注意:此事件一般晚于 jquery 的 ready 事件,jquery 的 ready 事件是在 DOM 完全加载 完成后触发,deviceready 则是设备的本地环境和页面完全加载完成之后才触发 。

PhoneGap 包含两个基础,native 和 JavaScript,当 native 加载的时候,自定义的一些图片 会被调用,而 JavaScript 需要在 DOM 加载后就会被加载。这是可能造成 JavaScript 在图片加 载前就已经被调用了。使用deviceready事件可以很好的解决这类问题,他可以保证PhoneGap是在完全加载完成后,才会被触发。

二、 pause 事件

当 PhoneGap 应用被置为后台时触发

三、 resume 事件

当 PhoneGap 应用重新从后台置为前台时触发

四、 online 事件

当 PhoneGap 应用连接因特网时触发

五、 offline 事件

当 PhoneGap 应用断开因特网时触发 六、 backbutton 事件

当单击退回按钮时触发 七、 menubutton 事件

当单击菜单按钮时触发

八、 batterycritical 事件

当 PhoneGap 应用监控到电池达到警告时触发(20%)batterycritical 的处理程序将会调用一个对象,该对象包含以下两个属性:

 level:电池剩余电量的百分比,取值范围是 0-100。(数字类型)

 isPlugged:boolean 型的值,表示设备是否接通电源。

九、 batterylow 事件

在电量非常低的情况下触发(5%) batterylow 的处理程序将会调用一个对象,该对象包含以下两个属性:

 level:电池剩余电量的百分比,取值范围是 0-100。(数字类型)

 isPlugged:boolean 型的值,表示设备是否接通电源。

十、 batterystatus 事件

PhoneGap 应用监控到电池状态有改变时触发(每当电量变化 1%的时候触发一次) batterystatus 的处理程序将会调用一个对象,该对象包含以下两个属性:

level:电池剩余电量的百分比,取值范围是 0-100。(数字类型)

isPlugged:boolean 型的值,表示设备是否接通电源。

一个完整的示例: 

<script type="text/javascript">  
   $(document).ready(function(){    
         document.addEventListener("deviceready", myDeviceReadyListener, false);   
   });    
   function myDeviceReadyListener(){   
         console.log("设备加载完毕!");  
         $("#deviceStatus .ui-btn-text").text("设备加载完毕!"); //注册其他事件   
         document.addEventListener("pause", myPauseListener, false);   
         document.addEventListener("resume", myResumeListener, false);      
         document.addEventListener("online", myOnlineListener, false);   
         document.addEventListener("offline", myOfflineListener, false);      
         document.addEventListener("backbutton", myBackbuttonListener, false);   
         document.addEventListener("menubutton", myMenubuttonListener, false);         
         window.addEventListener("batterystatus", myBatterystatusListener, false);   
         window.addEventListener("batterylow", myBatterylowListener, false);   
         window.addEventListener("batterycritical", myBatterycriticalListener, false);  
   }     
   function myBatterystatusListener(info){   
         console.log("电量值" + info.level);   
         $("#batterystatus .ui-btn-text").text("电量值" + info.level);  
   }    
   function myBatterylowListener(info){   
         console.log("电量低,请及时充电,电量值" + info.level); 
   }    
   function myBatterycriticalListener(info){   
         console.log("电量过低,请及时充电,电量值" + info.level);  
   }    
   function myPauseListener(){   
         console.log("应用被置为后台");   
         $("#deviceCurrentStatus .ui-btn-text").text("应用为后台");  
   }    
   function myResumeListener(){   
         console.log("应用被置为前台");   
         $("#deviceCurrentStatus .ui-btn-text").text("应用为前台");  
   }    
   function myOnlineListener(){   
         console.log("网络连接在线");   
         $("#deviceConectionStatus .ui-btn-text").text("网络连接在线");  
   }    
   function myOfflineListener(){   
         console.log("网络连接离线");   
         $("#deviceConectionStatus .ui-btn-text").text("网络连接离线");  
   }    
   var backTouchCount = 0;  
   var menuTouchCount = 0;    
   function myBackbuttonListener(){   
         console.log("返回按钮被按了");   
         backTouchCount++;   
         $("#backButtonTouch .ui-btn-text").text("返回按钮被按"+ backTouchCount +"次");  
   }    
   function myMenubuttonListener(){   
         console.log("菜单按钮被按了");   
         menuTouchCount++;   
         $("#menuButtonTouch .ui-btn-text").text("菜单按钮被按"+ menuTouchCount +"次"); 
   } 
</script> 
</head> 
<body> 
      <div data-role="page">   
           <div data-role="header">    
                <h1>PhoneGap 实战</h1>   
           </div>   
           <div data-role="content">    
                <a href="#" data-role="button" id="deviceStatus">设备加载中....</a>    
                <a href="#" data-role="button" id="deviceCurrentStatus">应用为前台</a>    
                <a href="#" data-role="button" id="deviceConectionStatus">连接加载中....</a>    
                <a href="#" data-role="button" id="backButtonTouch">返回按钮被按 0 次</a>    
                <a href="#" data-role="button" id="menuButtonTouch">菜单按钮被按 0 次</a>    
                <a href="#" data-role="button" id="batterystatus">电量获取中...</a>   
           </div>  
           <div data-role="footer">    
                <h4>&nbsp;</h4>   
           </div>  
    </div> 
</body> 
</html>

 

实现网络图片生成本地图片

将网络图片生成本地图片,以及需要满足以下几个条件:

1.  必须登录网站

2.  必须需要有referer

一看到这两个条件,就知道需要用CURL模块来实现此功能,其一需要保持登录之后的cookie值,其二需要添加referer.

根据这两点来实现功能:

1. 先实现存放本地图片的目录路径

/*判断目录是否存在,如果存在,不创建,不存在就创建新目录*/
function make_dir($dir, $index = true) {
	$res = true;
	if(!is_dir($dir)) {
		$res = mkdir($dir, 0777);
		$index && @touch($dir.'/index.html');
	}
	return $res;
}

 2.  获取网路图片数据

require_once 'class/transport.php';
$transport = new transport();
$request = $transport->request($picurl, "", 'GET');

这里我采用了ECSHOP自带的transport类,然后需要此类中use_curl方法,来实现cookie值得保存,以及referer的设置

 /* 基本设置 */
$cookie_path = getcwd()."/cookie.txt";
curl_setopt($curl_session, CURLOPT_FORBID_REUSE, true); // 处理完后,关闭连接,释放资源
curl_setopt($curl_session, CURLOPT_HEADER, true);//结果中包含头部信息
curl_setopt($curl_session, CURLOPT_RETURNTRANSFER, true);//把结果返回,而非直接输出
curl_setopt($curl_session, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_0);//采用1.0版的HTTP协议
curl_setopt($curl_session,CURLOPT_REFERER,'referer网址');
curl_setopt($curl_session, CURLOPT_COOKIEFILE, $cookie_path);
curl_setopt($curl_session, CURLOPT_COOKIEJAR, $cookie_path);

说明: 有的网站对于图片有个判断功能,如果referer为自己网站就可以查看图片,而不是的话就提示没有权限打开(403)。

3. 将网络图片数据写入指定目录下

$fp2=@fopen($targetFile,'a');
fwrite($fp2,$request['body']);
fclose($fp2);

 4. 整体方法如下

/*网络图片生成本地图片,返回本地图片地址*/
function savePic($picurl){

	$targetFolder = '/uploads/images';

	$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;

	$targetFile = rtrim($targetPath,'/') . '/';

	if($picurl==''){return '';}

	$ext=strrchr($picurl,'.');

	if($ext!='.gif' && $ext!='.jpg' && $ext!='.png' && $ext!='.jpeg'){return "";}

	$fileFolder = date("Ymd");

	if(make_dir($targetFile.'/'.$fileFolder)){
		$filename = $fileFolder.'/'.date("Ymdhis") . $ext;
	}else{
		$filename = date("Ymdhis") . $ext;
	}
	$targetFile .= $filename;
	$transport = new transport();
	$request = $transport->request($picurl, "", 'GET');
	//文件大小
	$fp2=@fopen($targetFile,'a');
	fwrite($fp2,$request['body']);
	fclose($fp2);
	return $filename;
}

 5. 效果图

20140817051618

第一讲 xcode安装 (苹果环境 )phonegap安装, iTunes打包phonegap应用为可安装的ipa文件(下-下)

学习要点:  

1. Xcode 安装

2. Phonegap 安装

3. iTunes 转换文件为可安装的 ipa 文件

一. Xcode 安装和Phonegap 安装

第一步,下载 xcode,下载 phonegap(前者直接到 app 里面找下也可以,很方便) 

下载 xcode:https://developer.apple.com/xcode/
下载 phonegap:http://phonegap.com/download/#

下载 xcode 之后安装下,phonegap 先不用急,下面我们慢慢来

第二步:找到下载的 phonegap 的 zip 文件,解压,然后找到 iso 文件夹 

注意:不同版本之间的 ios 文件夹在的位置可能有点小小差异,不过没关系,只要找到 这个文件夹就可以了(截图为2.7版本)

20140815011929

 

第三步:打开 ios->bin->create 文件(文件名可能会有些差异,不过找到带 create 的就可以了,以下用 create 代指该文件)

20140815012123

 

 第四步:执行这个 create 文件,并且复制改文件地址 

20140815012247

 

第五步:在桌面创建一个文件夹 xiaosi1(在什么位置创建文件夹和创建文件夹名字都是 OK 的,但是要注意,如果你创建文件夹位置不同,那么下面执行的命令也要对应改参数) 

20140815012334

 

第六步:打开终端: 

20140815012441

 

第七步:执行终端命令: 

第一小步: 把 上 面 在 create 复制的 create 地 址 粘 贴 在 终 端 里 面

20140815012553

 

第二小步:在这一段代码后面加上你要创建的文件地址,包名,项目名字,然后回车执行 

20140815012656

Ps:因为我们上面创建的文件夹在桌面上,所以地址为~/Desktop/xiaosi1 如果 我们把 xiaosi1创建 在 finder 的文档之中的话,地址就为~/Documents/xiasoi1,创建在其他地方也是 一样类推。

现在我们的文件就创建好了,让我们打开 xcode 看下~~(红圈出来的部分就是我们可以正 常写页面的位置了)

20140815012848

 

模拟器:(默认打开 index 页面)

三. iTunes 转换文件为可安装的 ipa 文件 

找生成文件的俩中方法:

1. 搜索对应的应用名称

2. 通过文件找

1. 找到生成的文件 当前用户的 资源库->Developer->Xcode->DerivedData(第二个目 录)->(找到创建的目录 oafirst)->Build->Products->Release-iphoneos(第二个)-> Oafirst

2. 直接拷贝出这个文件 是没有用的

3. 通过 iTunes 过滤

4. 模拟器安装或者只能安装在越狱的 ios 设备上

5. 拖到 iTunes 然后在拖动出来

6. 在 windows 上用 iTunes 打开 如果 iTunes 能打开表示我们的 iphone 也能安装

2014年8月编程语言排行榜:Swift跌出Top 20

苹果公司今年新推出的编程语言Swift,在发布初期就被各大媒体争相报道,在历经一番炒作之后,现在恢复了平静。在TIOBE7月排行榜中,Swift进入了Top 20,仅发布一月有余就有如此骄人的成绩,实在是令许多开发者瞠目结舌;而从最新的数据可以看出,Swift这个月的份额有所下滑,跌出了前20,排名第23位。

另外值得一提的是,Visual Basic这门可视化的Basic编程语言,在前几个月的Top20的榜单中笔者并未见其踪影,而这个月竟窜至11位,不可小觑!这个数据主要是根据Visual Basic 6版本统计而来。

当时微软推出Visual Basic 1.0后引起了很大轰动,许多专家把VB当做软件开发史上一个具有划时代意义的事件。这个可视化的编程语言深受开发者们的喜爱,利用它可以轻松创建应用。需要注意的是,大家要将Basic、Visual Basic区分开。从排行榜上可以看出Basic排名第五位;Visual Basic排名11位,Visual Basic .NET(VB.NET首进TOP 10)排名12位。

编程语言排行榜TOP 20榜单:

53e9bc64577fe

 

前10名编程语言长期走势图:

53e9bc98105bd

 

以下是21-50编程语言排名:

53e9bcf4405e0

 

53e9bcfd8938f

 

后50名编程语言如下:

(Visual) FoxPro, 4th Dimension/4D, Alice, APL, Arc, ATLAS, Awk, Bash, Bourne shell, cg, CL (OS/400), Clean, Clojure, Common Lisp, Dylan, Emacs Lisp, Factor, Forth, Fortress, Icon, Inform, Informix-4GL, Io, Ioke, J, JavaFX Script, JScript.NET, Korn shell, Ladder Logic, M4, Magic, Max/MSP, Modula-2, Modula-3, Monkey, Moto, NATURAL, Object Rexx, PILOT, Programming Without Coding Technology, Pure Data, Q, RPG (OS/400), S, Smalltalk, SPARK, SPSS, Standard ML, VBScript, X10

必须声明,这个榜单本身采集的是英文世界的数据,虽然在反映趋势上有一些参考意义,但与中国的实际情况不完全符合,而且,这张采样本身也有相当大的局限性。

【说明】

TIOBE编程语言社区排行榜是编程语言流行趋势的一个指标,每月更新,这份排行榜排名基于互联网上有经验的程序员、课程和第三方厂商的数量。排名使用著名的搜索引擎(诸如Google、MSN、Yahoo!、Wikipedia、YouTube以及Baidu等)进行计算。请注意这个排行榜只是反映某个编程语言的热门程度,并不能说明一门编程语言好不好,或者一门语言所编写的代码数量多少。

第一讲(下) PhoneGap目录结构介绍, eclipse html 插件的下载

学习要点:

1. PhoneGap 目录结构介绍

2. Eclipse html 编辑器插件下载安装

3. Phonegap 启动背景设置

4. Eclipse  android 环境连接手机调试

一、 Phonegap 目录结构介绍

Src 该目录包含了所有用户要创建的 Java 源文件

gen 为开发工具自动创建

assets 目录 用于方一些资源文件 css js html res 目录该目录包含了所有的资源文件 图表 图片 字符串 布局 它包含 drawable layout 和 valuse 目录

drawable 包含了所有的图片文件 layout 主要用于定义活动视图 UI 的布局 values 该资源文件主要和本地化有关 包含了 XML 文件存储的键值对

res/xml/config.xml 此文件刚开始没有 在其他地方拷贝过来的 也是配置文件

AndroidManifest.xml 这个文件是 Android 配置文件,列出了应用程序所提供的功能

(1)drawable-hdpi 里面存放高分辨率的图片,如 WVGA (480×800),FWVGA (480×854)

(2)drawable-mdpi 里面存放中等分辨率的图片,如 HVGA (320×480)

(3)drawable-ldpi 里面存放低分辨率的图片,如 QVGA (240×320)

二、 Eclipse html 编辑器插件下载安装 eclipse 中 html 编辑器插件的下载和安装

http://bbs.phonegap100.com/forum.php?mod=viewthread&tid=33

eclipse html 插件的下载和安装 需求:需要在 eclipse 里面编辑 html 和 jsp,语法高亮和语法提示,自动补全等。

1. 下载 GEF(依赖包):

http://www.eclipse.org/downloads/download.php?file=/tools/gef/downloads/drops/3.7.2/R201 201171043/GEF-ALL-3.7.2. zip

然后解压到 eclipse 安装目录替换 features 和 plugins 文件夹

20140814041958

 

2.下载 HTMLEditor

http://amateras.sourceforge.jp/cgi-bin/fswiki_en/wiki.cgi?page=EclipseHTMLEditor

只有一个 tk.eclipse.plugin.htmleditor_2.1.0.jar 文件 直接复制到 eclipse\plugins 里面

3.新建 html 文件

File->New->Other->Amateras->html

4.字体大小配置 

20140814042222

 

菜单栏里面点 Window->Preference->General->Appearance->Colors and Fonts,再在右边的框里 选 Java->Java Editor Text Font(overrides default:Text Font),然后再点右边的 Edit 按钮,编辑好了 点确定,再 OK 就行啦。。

三.phonegap 启动背景设置 

splash.PNG 拷贝到 res/drawable-mdpi/

super.setIntegerProperty(“loadUrlTimeoutValue”, 60000); 设置超时

android应用如果 6 秒还没有反映则认为是超时

super.onCreate(savedInstanceState);      
super.setIntegerProperty("splashscreen", R.drawable.splash_sn); 
super.setIntegerProperty("loadUrlTimeoutValue", 60000); // 3s后splash关闭 
super.loadUrl("file:///android_asset/www/index.html", 3000);

 四.Eclipse  连接真实机器调试, 如何让 android 程序 运行在手机上调试 

1.手机开启调试模式

2.安装 adb.exe 准备工作:

确信 \android-sdk-windows\tools\ 下有 adb.exe AdbWinApi.dll AdbWinUsbApi.dll 三 个 文 件 , 如 果 没 有 从 \android-sdk-windows\platform-tools\ 下面拷贝到 tools 下
windows 的话 进入\sdk\tools 目录 如下图执行安装

20140814042759

 

3.adb devices 命令产看设备是否显示如下图 

20140814042915

android 在使用 adb 命令时有时会发现设备的状态是 offline,解决方式如下:以下 方法请确保你的设备处于调试模式下。

方法一:执行 #adb kill-server #adb start-server #adb devices 看看设备是否还是处于 offline 状态,如果是,请尝试方法二

方法二: 重新启动设备,开机后,执行: #adb devices 如果设备还是 offline 请看方法三

方法三: 重启你的计算机吧。

如果正常显示: 运行您的程序 选择手机设备即可,如下图,看看您的手机上有没有运行您调试的 才程序

 

20140814043059

 

【下面列出了 Adb 常用命令操作命令】

1. 查看设备 adb devices 这个命令是查看当前连接的设备, 连接到计算机的 android 设备或者模拟器将会列 出显示

2.安装软件 adb install adb install <apk 文件路径> :这个命令将指定的 apk 文件安装到设备上

3. 卸载软件 adb uninstall <软件名> adb uninstall -k <软件名> 如果加 -k 参数,为卸载软件但是保留配置和缓存文件.

4. 进入设备或模拟器的 shell: adb shell 通过上面的命令,就可以进入设备或模拟器的 shell 环境中,在这个 Linux Shell 中, 你可以执行各种 Linux 的命令,另外如果只想执行一条 shell 命令,可以采用以下的方式: adb shell [command] 如:adb shell dmesg 会打印出内核的调试信息。

5. 发布端口 可以设置任意的端口号,做为主机向模拟器或设备的请求端口。如: adb forward tcp:5555 tcp:8000

6. 从电脑上发送文件到设备 adb push <本地路径> <远程路径> 用 push 命令可以把本机电脑上的文件或者文件夹复制到设备(手机)

7. 从设备上下载文件到电脑 adb pull <远程路径> <本地路径> 用 pull 命令可以把设备(手机)上的文件或者文件夹复制到本机电脑

8、查看 bug 报告 adb bugreport

9、记录无线通讯日志 一般来说,无线通讯的日志非常多,在运行时没必要去记录,但我们还是可以通过 命令,设置记录: adb shell logcat -b radio

10、获取设备的 ID 和序列号 adb get-product adb get-serialno adb shell sqlite3

第一讲快速搭建 PhoneGap 开发环境

说明: 此教程来自于PhoneGap 中文网主讲教师:张龙(树根) ,email: htzhanglong@foxmail.com ,官网: www.phonegap100.com. 极力推荐.

logo

学习要点:

1. JDK 下载以及安装
2. JDK 环境变量配置
3. Eclipse + ADTplugin+Android SDK 集成环境
ADT Bundle for Windows 安装

一、 JDK 下载以及安装

http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

二、 JDK 环境变量配置

进行 java 开发,首先要安装 jdk,安装了 jdk 后还要进行环境变量配置:
1、 下载 jdk(http://java.sun.com/javase/downloads/index.jsp)
2、 安装 jdk   3、 配置环境变量:右击“我的电脑”–>”高级”–>”环境变量”

1) 在系统变量里新建 JAVA_HOME 变量,变量值为:C:\Program Files\Java\jdk1.7.0_17(根 据自己的安装路径填写) 

2) 新建 classpath 变量,变量值为:.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar

3) 在 path 变量(已存在不用新建)添加变量值:%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin (注意变量值之间用“;”隔开) %SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;%SYSTEMROOT%\Sy stem32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Microsoft SQL Server\100\Tools\Binn\;C:\Program Files\Microsoft SQL Server\100\Tools\Binn\;C:\Program Files\Microsoft SQL Server\100\DTS\Binn\;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;C:\Program Files\TortoiseSVN\bin 

4、“开始”–>“运行”–>输入“javac”–>”Enter”,如果能正常打印用法说明配置成功!

补充环境变量的解析:  
JAVA_HOME:jdk 的安装路径  
classpath:java 加载类路径,只有类在 classpath 中 java 命令才能识别,在路径前加了个”.”表 示当前路径。  
path:系统在任何路径下都可以识别 java,javac 命令。

三、 Eclipse + ADT plugin+Android SDK 集成环境 ADT Bundle for Windows 安装

http://developer.android.com/sdk/index.html

html页面使用IE9文档模式(浏览器模式和文档模式)

对于调试html页面的兼容性而言,特别苦逼,每个浏览器都需要一一去调试,特别是360安全浏览器(兼容模式),有的时候IE,火狐,谷歌…浏览器都正常,而偏偏360安全浏览器(兼容模式)不正常,要纠结很久,才能正常的把兼容性调试完。

为了能够快速解决兼容性的问题,我还是选择浏览器模式和文档模式的修改。

20140806024235

 

在较新的IE浏览器中(如IE8, IE9, IE10),为了解决兼容性的问题,引入了浏览器模式和文档模式两个概念,浏览网页时可以通过按F12键看到这两种模式。

浏览器模式的主要作用是为兼容较早版本的IE,它会控制浏览器发出的UserAgent,表示以哪个版本的浏览器发出请求,以此来允许为某个特定IE版本设计的代码正确执行(举例来说:有些代码真是判断ie版本的,还有css里也有判断ie版本的)。

文档模式的主要作用是影响浏览器显示网页HTML的方式,在接到返回的HTML文件后,决定以哪个IE版本的文档模式解析该页面(举例来说:JS脚本就是依赖文档模式,IE9的js变化就需要IE9文档模式来支持)。

–来源于网络

如何把html页面使用IE9文档模式?

在Head->Title下添加<META http-equiv="X-UA-Compatible" content="IE=9" > </META>,这样可确保HTML页面工作在IE9标准文档模式下。