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