IONIC插件的使用

IONIC插件的調用

ionic作爲前端代碼，正常情況下是沒有辦法調用原生控件的，它的實現原理就android代碼來說是把應用當成瀏覽器，提供一個webview用來顯示前端的界面，而相機，藍牙等功能是無法直接使用的。當然無法直接使用就代表着有另外的方法可以曲線救國。這裏就要介紹cordova插件來解決這個問題。簡單來說，cordova插件的作用是，爲前端代碼提供入口用以調用原生的代碼，相當於轉換器的作用。其中ionic本身已經提供了大量的cordova插件，可以在官網中直接輸入你想要的功能的關鍵詞進行查找比如照相機功能你可以輸入“camera”，當然你也可以定製化你的插件，這個實現也不難，具體可以在cordova官網中學習，這個不是本次的主要內容，所以就不詳細展開了。

1.導入插件

導入官網插件直接按照官網例子就可以。
導入自定義的插件，使用命令：ionic cordova plugin add 插件位置

2.插件使用

如果報 Runtime Error Cannot find module “ionic-native” IONIC 2 的錯誤
參考: http://www.zyyapp.com/post/315.html

在項目目錄下輸入命令: cnpm install ionic-native –save

調用自定義的插件, 其實很簡單 , 網上到處都是一樣的但都不能用

ionic3導入插件還需要package.json這個文件, 不然會報錯, 導入語句也變成了 ionic cordova plugin add 插件位置, package.json 就是一個配置文件, 裏面是該插件的一些配置信息

這裏提供一份基礎的配置文件僅供參考，其實可以去github上面進行查找，看看他人寫的插件，會學到很多。

{
  "name": "phonegap-plugin-compress_images",
  "version": "1.0.0",
  "description": "Compress Image Return Save Image Path",
  "keywords": [
    "cordova",
    "phonegap",
    "ecosystem:cordova",
    "cordova-android",
    "cordova-ios",
    "android",
    "ios",
    "ionic",
    "camera",
    "cam",
    "camera-preview",
    "preview"
  ],
  "author": {
    "name": "Francis",
    "url": "solidfoundationwebdev.com"
  },
  "license": "Apache 2.0",
  "dependencies": {
    "cordova": "*"
  },
  "devDependencies": {}
}