環(huán)境準備
- app開發(fā)環(huán)境配置
- 使用webstorm編寫前端代碼,當然你也可以使用其他ide
- 使用android studio編寫android代碼和插件調試,第一次安裝可能會有些坑,,參考如下:
Android Studio安裝教程
Android Studio安裝配置教程
安裝android studio請備份一下你的android sdk tools下的templates文件夾,因為安裝android studio有可能會被刪除.導致如下圖打包異常
參考
- 如果遇到android開發(fā)問題請積極百度,android開發(fā)已經很成熟了,一定能解決問題
項目準備
- 準備一個cordova項目,用于安裝插件.可以是任何cordova項目不一定是ionic項目
- 為了方便調試和運行快速,建議創(chuàng)建一個新項目.可以參考這里創(chuàng)建一個ionic新項目
- 保證此項目可以正常打包,用于說明開發(fā)環(huán)境沒有問題
為了演示我剛剛新建了一個ionic項目
ionic start ionic_test tabs --cordova
全局安裝plugman
- plugman用于創(chuàng)建插件,安裝過程如下圖
cnpm i -g plugman
- 可以通過
plugman -h查看plugman提供的命令及參數(shù).
創(chuàng)建插件
- 如下圖我在D盤根目錄創(chuàng)建了一個插件并添加了android平臺,也生成了package.json文件. 插件名:
nativeLocation,插件id:com.kit.cordova.nativeLocation,版本:0.0.1
package.json是插件描述文件,如果插件只是自己用可以不用生成
plugman create --name nativeLocation --plugin_id com.kit.cordova.nativeLocation --plugin_version 0.0.1
cd nativeLocation\
plugman createpackagejson ./
plugman platform add --platform_name android
plugman platform add --platform_name ios
安裝插件
- 安裝插件到準備好的cordova項目中
cordova plugin add D:\nativeLocation
-
插件結構如下圖
調用插件
-
查看
nativeLocation.js可以看到這個js文件exports了一個coolMethod函數(shù),這個函數(shù)有3個參數(shù).第一個參數(shù)類型不限作為數(shù)組的第一項傳入到插件中,第二個和第三個分別是成功和失敗回調函數(shù)
-
查看
plugin.xml可以看到這個nativeLocation.js對應的cordova調用方法是放到cordova.plugins.nativeLocation命名空間下
調用代碼如下,注意
coolMethod()是三個參數(shù)
declare var cordova;
click(){
cordova.plugins.nativeLocation.coolMethod(777, res => {
// 你也可以把res輸出在頁面上 this.data = res; {{data|json}}
console.log(res);
}, err => {
console.log(err);
})
}
- 調試插件,需要在真機調試
cordova platform rm android
cordova platform add android
cordova run android
ionic項目修改了src目錄下的代碼需要先
ionic serve或者ionic build或者使用ionic cordova run android運行項目.為了使修改后代碼放到www目錄下
-
如下圖點擊按鈕,插件成功輸出我們的傳入的參數(shù).說明插件已經成功安裝
以上就是創(chuàng)建并安裝一個最簡單的cordova插件的過程
使用Android Studio打開項目
-
如下圖用Android Studio選擇
你的app項目>platforms>android目錄
如果你是第一次用Android Studio打開項目,可能會像下圖1界面卡很長時間(超過一分鐘),它正在下載gradle,gradle比較大(67M)下載比較慢
你可以在進程殺掉Android Studio,然后手動去這里下載,下載哪個版本?看圖2.打開你的
dists目錄,一一點擊每個gradle-*目錄,看哪個目錄gradle*.jar為空(圖3)就下載哪個版本,并把下載的jar放進去(圖4)然后在用Android Studio打開項目.注意項目是
你的app項目>platforms>android目錄
-
Android Studio打開界面.有時候需要刷新一下如下圖
-
用usb連接手機和電腦.點擊調試按鈕選擇連接的手機,在真機上運行
-
運行到真機上后,點擊app頁面上的按鈕可以在Studio控制臺上看到日志信息.這里的控制臺就是輸出android app運行的日志.app插件bug,閃退等常見問題均可以在這里看到錯誤日志
插件優(yōu)化
-
找到插件文件.發(fā)現(xiàn)包名太長,Java類名以小寫開頭.我們先直接在Studio上修改.(以后的
plugman可能會對創(chuàng)建的插件有優(yōu)化 )
-
修改后類名大寫,刪除一層包名.
-
如下圖點擊gradle clear
-
選擇android,繼續(xù)點擊調試按鈕在真機上運行確保修改沒問題
修改插件
-
回到webstorm,如下圖刪除插件目錄中的
nativeLocation.java文件.把Studio上的NativeLocation.java復制進來
-
修改
plugin.xml.如下圖1和圖2分別為修改前后.修改內容看圖2標注
圖1
圖2 -
ionic新建的項目id默認是
io.ionic.starter.如下圖修改成自己的id保證唯一,我這里修改為com.kit.ionicTest
修改完成在真機運行調試.用cordova命令打包運行,不是用Studio運行
cordova platform rm android
cordova platform add android
cordova run android
- 注意執(zhí)行
cordova platform rm android會刪除你的app項目>platforms>android目錄.所以最好備份一下.如下圖
本次簡單修改可以不備份.以后在Studio上開發(fā)了許多代碼就需要備份
總結
- 插件開發(fā)步驟
1用
plugman創(chuàng)建插件原型并把插件安裝到cordova項目中
2.用cordova生成android項目.cordova platform add android
3用Android Studio編輯android項目.(可以實現(xiàn)任何功能,需要懂Java開發(fā)語言 )
4把在Android Studio上開發(fā)的功能的代碼等資源文件拷貝到插件中
5在插件的plugin.xml文件中"描述“android”資源文件放在android項目中的什么位置
iOS開發(fā)步驟和android類似.本人不懂iOS開發(fā)語言,對xcode也不熟悉,所以...
