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