基于網(wǎng)頁的移動應用的問題在于我們可以通過瀏覽器在iOS和Android上運行十气,用戶不能將它們安裝在設備本地,應用不能訪問本地API春霍,如:聯(lián)系人砸西,藍牙等等。這就是為什么我們使用Cordova結合Ionic址儒,Cordova允許我們將應用打包為一個本地封裝芹枷,這樣允許我你們提交到應用商店,同時也可以通過插件來使用本地API莲趣。用來Cordova之后鸳慈,HTML5移動應用可以做到本地應用能做的一切。
剛才也說到了喧伞,想要使用本地功能的話我們就要用到插件走芋。Cordova提供了大量的默認插件包括:
- 設備 Device
- 網(wǎng)絡信息 Network Information
- 相機 Camera
- 地理信息 Geolocation
- 文件 File
- 應用內瀏覽器 In App Browser
- 多媒體 Media
- 啟動畫面 Splash Screen
同時,基本上所有的功能都有社區(qū)開發(fā)的開源插件潘鲫,以下是一些比較流行的:
插件所做的基本上就是創(chuàng)建一個接口給JavaScript觸發(fā)本地功能的調用翁逞。所以,如果你需要用到一個不存在的Cordova插件的時候(基本上不會遇到這樣的情況)溉仑,你可以自己去寫(當然也需要寫本地代碼)挖函。
重要:大部分插件只在真實設備上才可以使用,如果你想通過ionice serve去測試Cordova插件的時候可以能會出現(xiàn)錯誤浊竟。
在Ionic 2中使用Cordova插件
Ionic 2中實現(xiàn)本地功能有兩種方法怨喘。可以通過安裝Cordova插件直接使用:
ionic plugin add plugin-name
然后訪問插件提供的本地功能逐沙,通痴芩迹可以通過全局對象去訪問:
window.plugins.somePlugin.someMethod();
不需要導入洼畅,不需要需求(required)吩案,不需要在特定地方調用或者不需要其他任何東西 —— 一旦你通過命令行安裝好了插件之后你可以在任何地方訪問。并不是所有的插件都可以這樣去訪問帝簇,但是大部分都是這么用的徘郭。這不是Ionic 2特有的,任何Cordova項目(唯一的不同是使用cordova plugin add丧肴,而不是ionic plugin add)都可以這樣去使用残揉。當使用正常Cordova語法的時候,在Ionic 1芋浮,Ionic 2抱环,Sencha Touch, jQuery Mobile或者其他使用Cordova的網(wǎng)頁里面使用插件并沒有不同。
記住如果你這樣去使用Cordova插件的話镇草,你的應用可能由于TypeScript警告而編譯不了眶痰。這是因為TypeScript不知道他是什么,可能你需要去安裝他對應的typings梯啤。如果想強行通過編譯的話竖伯,你可以簡單的加上:
declare var variableCausingProblems;
在類定義的裝飾器上面添加你用到的插件。
另一種方法因宇,你可以用Ionic Native來使用Cordova插件七婴,這是Ionic 2特有的。如果你對Ionic 1的ngCordova很熟悉察滑,這基本就是Ionic 2里面的同一個東西打厘。如果你不熟悉ngCordova的話,Ionic Native基本上就是通過Promise和Observables讓Cordova插件更好的與Angular 2工作杭棵。
Ionic Native在Ionic 2應用中是默認安裝的婚惫。所以你需要做的就是像平常那樣安裝你需要用到的插件,像這樣:
ionic plugin add cordova-plugin-geolocation
接下來魂爪,你需要在要用到這個插件的類里面通過Ionic Native導入此插件:
import { Geolocation } from 'ionic-native';
然后你就可以在代碼里面使用了:
Geolocation.getCurrentPosition().then((resp) => {
console.log("Latitude: ", resp.coords.latitude);
console.log("Longitude: ", resp.coords.longitude);
});
注意先舷,上面代碼返回了一個promise,我們通過.then()設置了一個操作器(handler)滓侍,如果我們使用標準的Cordova語法的話蒋川,那么是用不了這個的 -- Cordova的標準語法是使用回調函數(shù),會比較亂撩笆。
同時需要中哦你大概ianjizhud是不是所有的Cordova插件都能通過Ionic Native使用捺球。所有可用的組件以及如何使用,請查看Ionic Native 文檔夕冲。如果你想用的組件中Ionic Native里面沒有的話氮兵,那么你只能回頭使用標準Cordova語法了(或者你可以自己動手添加到Ionic Native)。
雖然不是強制要求歹鱼,你可以在任何地方使用Ionic Native泣栈。他可能使你的代碼更整潔,更是個Angular 2生態(tài)系統(tǒng)(typings自動處理這些弥姻,所以TypeScript不會抱怨)南片。用老式的Cordova不會死人,所以也不要覺得他太糟糕庭敦。