安裝Cordova Plugin

前篇「Cordova 安裝與開發流程」講述Cordova開發環境的準備及基本的使用教學，而本篇則是要說明如何在Cordova專案加入Plugin，讓你的專案具有使用相機、GPS、麥克風等諸多行動裝置硬體設備之能力。

以下就以裝載Camera的Plugin為例，在Cordova專案中裝載該插件：

取得與安裝Plugin

1. 連線至Cordova官方提供的Plugin Search頁面 (https://cordova.apache.org/plugins/)，輸入你想查找的關鍵字即可。我們在此輸入「camera」，馬上可以看到對應的Plugin已顯示。

   

   Codrova Plugins 搜尋頁面

   
   

   
   

   
   

   
   

   

   cordova-plugin-camera

   
   

   
   

   
   

2. 使用指令 cordova plugin add cordova-plugin-camera，將會把camera插件下載並裝到Project/platforms目錄下的所有平台。

安裝原理簡述

執行plugin add 指令後，系統已在背後悄悄的完成許多異動，例如：

1. 將Plugin檔案下載至Project/plugins目錄。
2. 將已下載的「cordova-plugin-camera」安裝至各平台，這邊以Android為例，即為Project\platforms\android\assets\www\plugins 目錄。
3. 依安裝的plugin 更新 Project\platforms\android\assets\www 目錄下的「cordova_plugins.js」。
4. Project\platforms\android中的「AndroidManifest.xml」權限異動。
5. android\src 目錄，新增「org.apache.cordova.camera」Package與所屬java檔。

雖然這些異動有跡可尋，但仍不建議自行修正，照著正規的方法來處理比較妥當。

檢視現有的 Plugin

使用指令 cordova plugin ls 即可。

移除 Plugin

使用指令 cordova plugin rm [plugin_name]，例如要移除 Camera Plugin，則下 cordova plugin rm cordova-plugin-camera。若你忘了Plugin的全名，可由前面的 ls 命令找到。

延伸閱讀

Apache Cordova Documentation - Camera, https://cordova.apache.org/docs/en/3.3.0/cordova/camera/camera.html

Java Script 跨域請求

平日寫App慣了，在App呼叫遠端PHP程式存取資料庫是件相當自然的事。但近期有個Case是以Web方式開發，透過AJAX存取另一Server上的PHP時卻罷工了，追查一下發現是跨域請求造成的問題，在這邊筆記一下。

還原現場

• 有一個存放於遠端Server的PHP程式，它會讀取資料庫並傳回結果，使用的資料格式為JSON。

query.php

<?php
 //存取資料庫，略！
 $arr = array(
  "id" => "a01",
  "name" => "elephant"
 );    
 echo json_encode($arr);
?>

• 本機有一JavaScript，以jQuery提供的ajax function呼叫遠端PHP取回JSON字串。

search.js

$.ajax({
 method: "POST",
 url: "http://遠端Server IP/query.php",
 dataType: "json"
}).done(function(data) {
 alert(data.name);
}).fail(function() {
 alert("fail");
});

• 執行看看，將跳出fail的alert。

錯誤訊息

目前主流的瀏覽器皆內建了開發人員工具，這邊以Firefox為例，執行前述提到的query.js，將看到如下的錯誤訊息：

相當親民的訊息，直接告訴你這是跨域請求的問題，缺少了Access-Control-Allow-Origin檔頭。

解決跨域資源請求之問題

在此以這篇文章「js跨域访问，No ‘Access-Control-Allow-Origin‘ header is present on」提供的方法來解。文內亦有提到跨域存取之細節，有興趣可以讀讀看。欲解決此問題，必須在前述的PHP程式加入「header("Access-Control-Allow-Origin: *");」。

<?php
 header("Access-Control-Allow-Origin: *");
 //存取資料庫，略！
 $arr = array(
  "id" => "a01",
  "name" => "elephant"
 );
 echo json_encode($arr);
?>