一、簡(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)備:
客戶和開(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)方法:
配置好以上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)
導(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)目中的插件名
定義好以上這些我們需要在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?自定義基座配置
自定義調(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)行自定義基座)
在修改好manifest配置后,在HBuilder/HBuilderX中點(diǎn)擊菜單欄“運(yùn)行”->“運(yùn)行到手機(jī)或模擬器”->“制作自定義基座”生成自定義基座安裝包:
打包成功后需要在以下位置確保開(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界面.