Android端Uni-App混合開(kāi)發(fā)插件

一、簡(jiǎn)介

前言,注意首先如果單純的js與原生混合開(kāi)發(fā)并不建議使用uni插件開(kāi)發(fā),開(kāi)發(fā)周期將近1個(gè)半月其中大量時(shí)間都是用在采坑上,而且官方的坑不會(huì)100%在社區(qū)給你解決,途徑只有自己研究,截止目前更新后續(xù)插件還會(huì)遇到奇葩的問(wèn)題,目前也是無(wú)法解決,原因①調(diào)試過(guò)程無(wú)法獲取很多的報(bào)錯(cuò)信息,比如一個(gè)按鈕點(diǎn)擊無(wú)反應(yīng)任何報(bào)錯(cuò)提示沒(méi)有全靠猜,②文檔問(wèn)題,我開(kāi)發(fā)過(guò)程前期靠文檔開(kāi)發(fā),結(jié)果后來(lái)問(wèn)官方,結(jié)果說(shuō)我使用的方式不再維護(hù)更新,然后推翻從來(lái),我當(dāng)時(shí)笑了,而且就算你找到文檔,也不會(huì)百分比看懂(用過(guò)的都懂),其他原因就不一一說(shuō)了,這里建議如果單純的js與原生混合開(kāi)發(fā),建議使用其他框架進(jìn)行混合開(kāi)發(fā),作為原生開(kāi)發(fā)者個(gè)人感覺(jué)使用Uni開(kāi)發(fā)完一整套app(很多功能也不支持),不比原生容易很多,還是建議開(kāi)發(fā)者自己斟酌,好廢話就這么多了。

此文檔用于記錄和說(shuō)明Uni插件開(kāi)發(fā)過(guò)程, 以及后期其他開(kāi)發(fā)包開(kāi)發(fā)須知和一些注意事項(xiàng)。

重點(diǎn)~,開(kāi)發(fā)完成之后,后期維護(hù)一定要仔細(xì)檢查全部文件是否都更新完成(*HbuilderX在你出現(xiàn)錯(cuò)誤的時(shí)候不會(huì)給你很多提示),所以需要仔細(xì)檢查更新的插件文件。

二、開(kāi)發(fā)準(zhǔn)備

2.1 工具準(zhǔn)備:

① android studio (以下簡(jiǎn)稱AS) ② HBuilderX

2.2 資料準(zhǔn)備:

①Dcloud插件開(kāi)發(fā)demo;

客戶和開(kāi)發(fā)者需要用到HBuilderX 進(jìn)行混合開(kāi)發(fā)app,此demo為最終客戶使用的項(xiàng)目demo.

②android studio插件項(xiàng)目demo:

此demo更偏向于原生開(kāi)發(fā)者,使用HBuilderX 打包js等項(xiàng)目資源,在AS中引用.(注*推薦使用已經(jīng)開(kāi)發(fā)好的demo進(jìn)行改造)

③ Dcloud部分官方文檔(可適當(dāng)參考文檔):

uni-app官方文檔:uni-app原生插件(native plugin)開(kāi)發(fā)指南

Uni-app android端插件開(kāi)發(fā)文檔: uni-app android 插件開(kāi)發(fā)文檔

2.3 AS項(xiàng)目架構(gòu):

授權(quán)以及核心文件可忽略



2.4 HBuilderX 項(xiàng)目架構(gòu):



三、開(kāi)發(fā)步驟

3.1 調(diào)試AS項(xiàng)目

3.1.1 在AS導(dǎo)入as的demo(例如:導(dǎo)入U(xiǎn)niVinProject)

如圖方式導(dǎo)入你準(zhǔn)備好的AS項(xiàng)目的demo,這里推薦使用已經(jīng)完成的項(xiàng)目demo進(jìn)行導(dǎo)入后續(xù)在進(jìn)行修改.







導(dǎo)入已有項(xiàng)目之后目錄如下:


熟悉了大概的目錄結(jié)構(gòu),首先UNI_3B45678這個(gè)H5界面文件如何生成后續(xù)再HBuliderX項(xiàng)目中會(huì)提到.


然后看下assets中的授權(quán)文件和核心文件

? 授權(quán)文件:開(kāi)發(fā)包中的授權(quán)文件即可放在圖中文件夾下

核心文件: 為深度學(xué)習(xí)核心文件,也就是非深度學(xué)習(xí)文件可以忽略不添加這3個(gè)文件

Androidmainfest.xml: 此文件導(dǎo)入之后不需要大幅度更改唯一更改如下圖

根據(jù)開(kāi)發(fā)包的權(quán)限設(shè)置對(duì)應(yīng)增加或者修改權(quán)限配置


3.1.2 在項(xiàng)目中導(dǎo)入開(kāi)發(fā)核心庫(kù)module(VinLibrary)?(*注此庫(kù)為公司項(xiàng)目需要,開(kāi)發(fā)者可以忽略)



3.1.3 手動(dòng)生成橋接module(uniplugin_vin)




命名好你自定義橋接庫(kù)的名字如:uniplugin_vin




uniplugin_vin創(chuàng)建好后在java目錄下創(chuàng)建好例如univinmodule的橋接類(lèi)文件



uniplugin_vin中的 build文件配置如下



然后需要看下橋接類(lèi)文件的配置UniVinModule.java文件的配置:

首先以視頻流識(shí)別為例子,注意此方法在h5端調(diào)用所以方法頭部用@JSMethod(uiThread = ture) ?注釋



配置如下方法用來(lái)接收識(shí)別結(jié)果并將結(jié)果回調(diào)給h5界面:



此外還需要配置下權(quán)限回調(diào)方法:



3.1.4 配置AS項(xiàng)目

配置好以上2個(gè)module之后我們來(lái)看下主項(xiàng)目的配置:



看下build.gradle的配置: 紅框中需要配置之前創(chuàng)建好的橋接庫(kù)



以上AS項(xiàng)目配置完畢, 下面開(kāi)始配置HBuilderX項(xiàng)目的資源,也就是H5端的界面以及如何調(diào)用我們的核心庫(kù)


3.2 調(diào)試HBuilderX 項(xiàng)目

3.2.1 在HBuilderX 中引入之前準(zhǔn)備的HBuilderX的demo:


選擇準(zhǔn)備好的demo


導(dǎo)入項(xiàng)目之后的結(jié)構(gòu)



3.2.2 配置H5調(diào)用界面

導(dǎo)入之后找到如下圖文件: 此文件為H5界面的文件 也就是調(diào)用我們剛剛在AS項(xiàng)目中配置的橋接類(lèi)的使用者,但是我們現(xiàn)在需要把這個(gè)H5界面生成APP資源在我們剛剛的AS項(xiàng)目中進(jìn)行調(diào)試和應(yīng)用.


找到文件后打開(kāi)配置我們需要調(diào)用的代碼:

定義點(diǎn)擊按鈕


以視頻流識(shí)別為例, 添加調(diào)用視頻流識(shí)別的方法


注意:上圖中的插件名稱對(duì)應(yīng)下圖Hbuilderx項(xiàng)目中的插件名


3.2.3 配置插件配置文件

定義好以上這些我們需要在HBuilderX項(xiàng)目中配置文件中進(jìn)行相關(guān)配置:

找到項(xiàng)目中的插件目錄下的配置文件(因?yàn)閷?dǎo)入的項(xiàng)目是已經(jīng)完成的插件所以會(huì)自帶,如果是新建的項(xiàng)目,則需要自己創(chuàng)建此插件VinPluginModule)


打開(kāi)文件package.json:

?class要和你的as項(xiàng)目中橋接類(lèi)包路徑一致,在上面例子中調(diào)用視頻流會(huì)用到android 下的name 來(lái)調(diào)用橋接類(lèi)



3.2.4 生成app資源用于AS項(xiàng)目調(diào)試

在HBuilderX 中打包好項(xiàng)目資源文件


將打包好的資源文件放入AS項(xiàng)目中的assets/apps下文件


找到data中的dcloud_control.xml文件



確定配置的id為之前生成的app資源名稱一致



3.2.5 運(yùn)行調(diào)試AS項(xiàng)目



3.3 生成插件文件

3.3.1 打包AS項(xiàng)目中橋接module以及核心識(shí)別庫(kù)的module

測(cè)試通過(guò)可打包好插件包相關(guān)文件

使用此程序生成橋接module的arr打包文件


核心庫(kù)module同樣打包成arr文件


生成之后在對(duì)應(yīng)的module下的build-outputs-arr文件下:


3.3.2 插件文件結(jié)構(gòu)

①打包好需要的module,生成的arr文件集成到HbuilderX項(xiàng)目中

②以及l(fā)ibs文件和assets下的資源文件


③插件配置文件


3.3.3 確認(rèn)插件配置文件

由于前面步驟以及配置過(guò)這里,需要確認(rèn)插件配置文件是否配置正確

* 配置插件名稱和id要和你的插件文件名一一對(duì)應(yīng)

* plugins下的name以及class配置需要特別注意,此處name 用于你再H5頁(yè)面調(diào)用時(shí)的名稱,class則代表橋接類(lèi)的包名路徑(也就是在as項(xiàng)目中可以看到的橋接類(lèi)的包名路徑)是一一對(duì)應(yīng)的


下面還有分別有abis 中cpu類(lèi)型設(shè)置, permissions 權(quán)限配置等



3.4 uni-app原生插件本地配置

將原生插件配置到uni-app項(xiàng)目的“nativeplugins”下,還需要在manifest.json文件的“App原生插件配置”項(xiàng)下點(diǎn)擊“選擇本地插件”,在列表中選擇需要打包生效的插件:


3.5?自定義基座配置

3.5.1 什么是自定義基座?

自定義調(diào)試基座是使用開(kāi)發(fā)者申請(qǐng)的第三方SDK配置生成的基座應(yīng)用,用于HBuilder/HBuilderX開(kāi)發(fā)應(yīng)用時(shí)實(shí)時(shí)在真機(jī)/模擬器上查看運(yùn)行效果。(注:iOS僅支持真機(jī)運(yùn)行自定義基座,不能使用xcode模擬器運(yùn)行自定義基座)

3.5.2 制作自定義基座

在修改好manifest配置后,在HBuilder/HBuilderX中點(diǎn)擊菜單欄“運(yùn)行”->“運(yùn)行到手機(jī)或模擬器”->“制作自定義基座”生成自定義基座安裝包:


3.5.3 使用自定義基座

打包成功后需要在以下位置確保開(kāi)啟自定義調(diào)試基座功能:


然后就可以像運(yùn)行到HBuilder標(biāo)準(zhǔn)運(yùn)行基座那樣,運(yùn)行你的工程到手機(jī)/Android模擬器上,查看控制臺(tái)日志信息。


注意:自定義調(diào)試基座是測(cè)試版,不可直接商用(使用自定義調(diào)試基座覆蓋安裝apk不會(huì)更新應(yīng)用資源,并且有toast警告)。正式發(fā)版時(shí)需要按正常打包方式重新打包。


配置好可以在HBuliderX中進(jìn)行使用和測(cè)試了


四、注意事項(xiàng)

1.新增混合開(kāi)發(fā)插件包: 使用現(xiàn)有的demo 進(jìn)行改造生成新的插件包,否則有可能出現(xiàn)找不到某些文件等問(wèn)題.

五、常見(jiàn)問(wèn)題

1. 點(diǎn)擊識(shí)別無(wú)法調(diào)用核心部分,沒(méi)有反應(yīng)

此問(wèn)題為導(dǎo)入依賴核心庫(kù)不成功或者為橋接類(lèi)中調(diào)用配置錯(cuò)誤導(dǎo)致,請(qǐng)仔細(xì)檢查現(xiàn)有demo中方式進(jìn)行配置,也可能由于官方的坑導(dǎo)致無(wú)法調(diào)用成功,目前沒(méi)有任何解決方案,官方社區(qū)更是沒(méi)法指望。


2. 參照官方文檔集成問(wèn)題

官方文檔新舊文檔魚(yú)龍混雜,導(dǎo)致很難找到正確文檔集成開(kāi)發(fā),所以新增開(kāi)發(fā)包盡量在已有成熟的開(kāi)發(fā)包基礎(chǔ)上進(jìn)行改造新增即可,可避免一些問(wèn)題.


3. 調(diào)用提示找不到由aseets下保存到安卓?jī)?nèi)部存儲(chǔ)的文件

此原因?yàn)閡ni混合開(kāi)發(fā)項(xiàng)目中無(wú)法讀取到內(nèi)部存儲(chǔ)下的文件,具體原因未知,開(kāi)發(fā)如遇到此問(wèn)題,一般為自己創(chuàng)建的混合開(kāi)發(fā)項(xiàng)目會(huì)出現(xiàn)這類(lèi)問(wèn)題,所以推薦在現(xiàn)有插件包改造新增.


4.找不到調(diào)用的識(shí)別庫(kù)activity

? 如圖,正常的這種導(dǎo)入原生資源是沒(méi)問(wèn)題的,如果參照官方文檔這部分官方要求用compile 方式導(dǎo)入資源會(huì)導(dǎo)致,我們?cè)跇蚪宇?lèi)中無(wú)法調(diào)用我們的核心activity界面.


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
禁止轉(zhuǎn)載,如需轉(zhuǎn)載請(qǐng)通過(guò)簡(jiǎn)信或評(píng)論聯(lián)系作者。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,030評(píng)論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,310評(píng)論 3 415
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 175,951評(píng)論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 62,796評(píng)論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,566評(píng)論 6 407
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 55,055評(píng)論 1 322
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,142評(píng)論 3 440
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 42,303評(píng)論 0 288
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,799評(píng)論 1 333
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,683評(píng)論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,899評(píng)論 1 369
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,409評(píng)論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,135評(píng)論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 34,520評(píng)論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 35,757評(píng)論 1 282
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,528評(píng)論 3 390
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,844評(píng)論 2 372

推薦閱讀更多精彩內(nèi)容