phonegap+cordova+ionic調用原生API

標籤：

　　上一篇部落格講了phonegap+cordova+ionic的環境搭建，今天再來分享一篇cordova調用原生API的文章。從技術角度上來講，這並不是很難，只是有些細節要是沒有注意，或者某些步驟不知道的，那麼在坑裡一時半會很難爬出來。所以這兩篇部落格旨在協助小夥伴們節省更多的時間去做其他有意義的事情。

1、建立工程

　　建立工程和添加平台支援的操作已經在上一篇部落格中講到了， 這裡不再贅述。

　　

　　

2、Bower的使用

　　首先確認是否安裝了bower，如果沒有安裝，開啟cmd命名，輸入npm install -g bower。

　　開啟cmd命令，輸入bower install ngCordova，如果出現以下資訊，則表示本機沒有安裝git，因為bower管理的包的源碼都託管在github網站上。

 　　

　　Git的安裝，可以直接在搜尋引擎中輸入 git for windows 64,下載一個git安裝檔案，點擊安裝，並把git.exe添加到環境變數中；也可以直接下載github的用戶端工具，gitshell。具體安裝方式可以在網上自行搜尋。

　　在這裡，順便講一下bower安裝js庫、刪除js庫，查看安裝js庫的方式（以下三個步驟不是必須的，只是作為小插曲講解）：

　　輸入bower install jquery命令，安裝jquery庫檔案，如果出現以下資訊，表示安裝成功：

　　

　　輸入bower list 查看安裝的js庫檔案：

　　

　　輸入bower uninstall jquery,可以刪除剛剛安裝的js庫檔案：

　　

　　再輸入bower list命令，我們會發現，安裝的jquery已經不在目錄中了：

　　

3、安裝ngCordova

　　切換到工程目錄下，輸入 bower install ngCordova,會出現以下資訊：（圖中還有部分資訊省略掉了，只了頭部和尾部資訊）。

　　

　　想要詳細瞭解，可參考：http://www.haomou.net/2015/01/05/2015_ionic_ngCordova/

4、添加網路攝影機外掛程式

　　切換到工程目錄下，輸入cordova plugin add cordova-plugin-camera命令，出現以下資訊，表示安裝成功：

 　　

　　更多外掛程式資訊：http://ngcordova.com/docs/plugins/camera/

5、修改項目

　　所有準備工作完成以後，用編輯器開啟建立的項目工程（我這裡用的是webStorm），

　　第一步：在index.html中手動引入ng-cordova.js檔案。

 　　

　　第二步：在controllers中添加ngCordova依賴。

 　　

　　第三步：在詳情頁面添加一個按鈕，用來觸發調用網路攝影機操作。

 　　

　　第四步：在詳情頁對應的controller中添加getCamera方法。

　　

　　第五步：在cmd中，進入工程目錄，輸入ionic run android命令，在手機上運行。

6、

 

phonegap+cordova+ionic調用原生API