uni原生插件開發(fā)流程全一覽——Component擴(kuò)展

uni-app是啥尝抖，套用官方的話，它是一個(gè)使用 Vue.js 開發(fā)所有前端應(yīng)用的框架迅皇，開發(fā)者編寫一套代碼昧辽，可發(fā)布到iOS、Android登颓、H5搅荞、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應(yīng)用等多個(gè)平臺(tái)框咙。

當(dāng)你使用uni-app來對(duì)項(xiàng)目進(jìn)行開發(fā)時(shí)咕痛，免不了使用各種各樣的插件，官方的插件市場（https://ext.dcloud.net.cn）雖有上千款喇嘱，但是一個(gè)項(xiàng)目如果是高度自定義的話茉贡，那難免對(duì)插件的功能有著特定的需求，這時(shí)就需要自己開發(fā)原生插件來滿足需要了者铜。

官方早早注意到了這點(diǎn)腔丧，對(duì)原生插件開發(fā)的定義也很貼合實(shí)際：當(dāng)HBuilderX中提供的能力無法滿足App功能需求，需要通過使用Andorid/iOS原生開發(fā)實(shí)現(xiàn)時(shí)作烟，可使用App離線SDK開發(fā)原生插件來擴(kuò)展原生能力悔据。

但是不可否認(rèn)的是，官方給出的文檔還是過于跳脫簡潔俗壹。對(duì)老手而言科汗，上手似乎沒有什么難度，對(duì)新手就不怎么友好了绷雏。

所以重點(diǎn)就又來了头滔，本次演示uni原生插件安卓開發(fā)流程，以Component擴(kuò)展為例涎显，絕對(duì)是從頭到尾的“一條龍服務(wù)”坤检，當(dāng)然為了更好的理解開發(fā)思路，文章還是依照官方文檔來的期吓。

下面步入正題早歇。

第一步，開發(fā)環(huán)境的準(zhǔn)備

JAVA環(huán)境配置(JDK1.8)：

以windows10為例讨勤，cmd進(jìn)入自己電腦命令提示符箭跳，輸入java -version查看自己的jdk版本，官方文檔中提示jdk版本應(yīng)在1.7及以上潭千，最優(yōu)1.8谱姓，如果達(dá)不到標(biāo)準(zhǔn)，自行下載相關(guān)版本配置好環(huán)境變量即可刨晴。

jdk下載路徑：

https://www.oracle.com

https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html

AndroidStudio配置(version4.0)：

驗(yàn)證AndroidStudio是否配置成功屉来，具體流程可參照《HBuildeX安卓離線打包教程》相關(guān)圖文第一步路翻。若測試項(xiàng)目能夠顯示“Hello World!”并且無報(bào)錯(cuò)，代表項(xiàng)目成功跑起茄靠，AndroidStudio基本配置完成茂契。

AndroidStudio下載路徑：

https://developer.android.google.cn/studio/index.html

http://www.android-studio.org/

App離線SDK下載(SDK2.7.9)：

在DCloud官網(wǎng)下載好安卓離線SDK，解壓以待使用慨绳。

Android離線SDK下載路徑：

https://nativesupport.dcloud.net.cn/AppDocs/download/android

官方uni原生插件開發(fā)教程（android）網(wǎng)址:

https://nativesupport.dcloud.net.cn/NativePlugin/course/android

第二步账嚎，創(chuàng)建自定義項(xiàng)目與引入官方項(xiàng)目

打開AndroidStudio，在菜單欄選擇File>New>New Project儡蔓，創(chuàng)建自定義項(xiàng)目郭蕉。

因?yàn)榈谝徊酱鞟ndroidStudio已經(jīng)測試完成，能夠正常使用喂江，所以我們直接創(chuàng)建No Activity項(xiàng)目召锈，點(diǎn)擊Next。

填寫項(xiàng)目名获询、包名涨岁，以及Minimum API Level（有疑惑可參照《HBuilderX安卓離線打包》圖文第一步）

項(xiàng)目創(chuàng)建完畢，為了更好的使用吉嚣，我們把它轉(zhuǎn)到Project視圖梢薪。

接下來創(chuàng)建要開發(fā)的模塊，本文在Module和Component 擴(kuò)展中選擇Component 擴(kuò)展為例尝哆。

點(diǎn)擊File>New>New Module...

選擇Android Library秉撇，點(diǎn)擊Next

自定義Library名和包名（這里是com.test.testplugin）點(diǎn)擊Finish

創(chuàng)建完畢后如圖所示

接下來導(dǎo)入官方提供的uni插件原生項(xiàng)目，里面的東西我們待會(huì)兒要用到

File>New>Import Project...

項(xiàng)目在官方的離線SDK中秋泄，我是直接把它拷到AndroidStudio默認(rèn)存放路徑了琐馆，這樣方便導(dǎo)入。

如圖恒序，點(diǎn)擊OK

導(dǎo)入成功瘦麸，我們參照里面的uniplugin_component模塊

配置剛剛創(chuàng)建的testplugin的build.gradle(testplugin)信息

如圖，將dependencies下默認(rèn)生成的依賴注釋掉歧胁，添加uni-app所需庫依賴

compileOnly? 'com.android.support:recyclerview-v7:28.0.0'

compileOnly? 'com.android.support:support-v4:28.0.0'

compileOnly? 'com.android.support:appcompat-v7:28.0.0'

再添加后續(xù)用到的json解析庫

compileOnly 'com.alibaba:fastjson:1.1.46.android'

可能因?yàn)榘姹締栴}添加依賴庫時(shí)會(huì)報(bào)紅

鼠標(biāo)移到上面有如下提示：

版本28（適用于Android Pie及更低版本）是舊版支持庫的最后一個(gè)版本滋饲，因此我們建議您在使用Android Q并向前遷移時(shí)遷移到AndroidX庫。 IDE可以幫助您：重構(gòu)>遷移到AndroidX喊巍。

官方文檔中提到過現(xiàn)在還不支持AndroidX屠缭，所以還是要使用V4和V7包，解決辦法直接如上圖紅色方框圈中處使用快捷鍵（Alt+Shift+Enter）添加noinspection GradleCompatible注釋即可玄糟，也可手動(dòng)點(diǎn)擊紅色方框圈中左邊位置添加勿她。

接下來導(dǎo)入uniapp-release.aar插件袄秩，它是擴(kuò)展module主要依賴庫（此時(shí)也可以把離線打包用到的另外三個(gè)插件一起導(dǎo)入）

在app>libs目錄下導(dǎo)入插件阵翎，如圖

回到剛剛創(chuàng)建的testplugin的build.gradle(testplugin)中逢并，接下來進(jìn)行導(dǎo)入aar需要的配置操作

添加

repositories {? ?

? ? flatDir {

? ? ? ? ? ? dirs 'libs'?

? ? }

}

到dependencies{}上方，注意郭卫，不要把它放到android{}里了

在dependencies內(nèi)添加

compileOnly fileTree(dir: '../app/libs', include: ['uniapp-release.aar'])

上述配置全覽

點(diǎn)擊Sync Now或者Sync Project with Gradle Files進(jìn)行同步處理（同步失敗或過慢請(qǐng)參照uni-app離線打包圖文）

官方文檔提醒：

工程gradle配置的為gradle-4.6-all版本砍聊，使用的是新版本的依賴方式。如果您使用的是老版本的gradle贰军，可根據(jù)以下鏈接進(jìn)行修改依賴方式玻蝌。

https://blog.csdn.net/wangliblog/article/details/81366095

第三步，原生插件的開發(fā)

以擴(kuò)展Component為例词疼，參照官方UniPlugin-Hello-AS工程中的uniplugin_component模塊俯树，如圖創(chuàng)建類TestComponent

AndroidStudio4.0于本月28號(hào)更新，這變化太大我都沒轉(zhuǎn)過來彎贰盗，上官網(wǎng)找文檔發(fā)現(xiàn)最新文檔還是3.6版本的许饿，都還沒同步過來，暈死舵盈。

TestComponent需要繼承WXComponent類陋率，創(chuàng)建默認(rèn)帶參構(gòu)造方法

構(gòu)造方法里默認(rèn)調(diào)用父類有參構(gòu)造方法

weex注意事項(xiàng)：

week版本大于等于0.19.0和小于它操作是不同的，新版本中的WXDomObjectJava代碼被移除秽晚，詳情可見：

https://weex.apache.org/zh/guide/extend/extend-android.html#component-擴(kuò)展

既然以Component為例瓦糟，我們先來看看它的用途：

既然是內(nèi)嵌某個(gè)原生ui組件，那么下面以TextView為例對(duì)類TestComponent進(jìn)行操作：

如圖為WXComponent指定泛型TextView赴蝇，在initComponentHostView（）方法里定義View菩浙，同時(shí)返回類型也要改為TextView。

設(shè)置屬性方法,setText()設(shè)置文本句伶，setSize()設(shè)置字體型號(hào)芍耘，setColor()設(shè)置字體顏色

自定義組件方法clearText()清除TextView文本

并使用Component自定義發(fā)送方法fireEvent（）反饋信息

核心代碼完畢

接下來在本地注冊(cè)插件

在app>src>main目錄下創(chuàng)建assets文件夾

回車

在app>src>main>assets目錄下創(chuàng)建dcloud_uniplugins.json文件，我們也可以拷貝剛剛導(dǎo)入官方的項(xiàng)目中的json文件熄阻，對(duì)其稍作修改斋竞。

對(duì)dcloud_uniplugins.json中的內(nèi)容做出適當(dāng)修改

參照相關(guān)說明

接下來是對(duì)插件的注冊(cè)

因?yàn)楫?dāng)前只舉了Component擴(kuò)展的一個(gè)例子，所以要?jiǎng)h除掉多余元素秃殉，完成后如圖

注冊(cè)方法有兩種坝初，第二種參見官方文檔或者公眾號(hào)Module擴(kuò)展圖文，無特殊操作建議采用第一種注冊(cè)方式.

注冊(cè)完畢钾军，開始打包插件

在Gradle>testplugin>Tasks>other目錄下找到assembleRelease鳄袍，雙擊等待系統(tǒng)編譯出擴(kuò)展Component的aar文件

注意：官方文檔中是選擇Gradle--->插件Component--->Tasks--->build--->assembleRelease編譯Component的aar文件，在新版本的AndroidStudio中,assembleRelease和assembleDebug被轉(zhuǎn)移到other目錄下吏恭。

成功后在testplugin>build>outputs>aar目錄下就可以找到相關(guān)插件了

第四步拗小，HBuilderX導(dǎo)入和使用本地插件

如圖，創(chuàng)建uni-app默認(rèn)項(xiàng)目TestComponent

參照官方文檔中的目錄規(guī)范

將剛才打包的插件放到nativeplugins>插件文件夾名稱（我的是Test-Component）>android目錄下樱哼，沒有相關(guān)目錄就一步步創(chuàng)建哀九。

創(chuàng)建package.json——uni原生插件描述文件剿配，放到插件文件夾名稱目錄下，與android文件夾并列

package.json官方描述文檔：

https://nativesupport.dcloud.net.cn/NativePlugin/course/package

按照要求填寫相關(guān)信息

注意：插件標(biāo)識(shí)id必須在對(duì)應(yīng)android和ios節(jié)點(diǎn)下plugins中進(jìn)行注冊(cè)阅束，與name字段值一致呼胚。name下的class是注冊(cè)插件的類名，也要填對(duì)息裸。

這里因?yàn)橹挥衋ndroid插件蝇更，就把ios節(jié)點(diǎn)全部刪掉，在這里直接注釋的話是無效的呼盆。

還有要注意的一點(diǎn)：插件標(biāo)識(shí)id一定要與插件文件夾名稱一致年扩，不然在云打包時(shí)會(huì)提示插件不合法：該插件在nativePlugins目錄下不存在。

在manifest.json下配置App原生插件

勾選并確認(rèn)

parameters信息根據(jù)需求配置（我的屬于胡填）

接下來注意了：

雖然這里只是測試項(xiàng)目访圃，但為了更好的規(guī)范常遂，我們還是使用nvue來繼續(xù)進(jìn)行Component擴(kuò)展的測試

在項(xiàng)目pages目錄下創(chuàng)建自定義文件夾，創(chuàng)建完畢后在內(nèi)創(chuàng)建nvue文件用于測試

測試文件test.nvue創(chuàng)建完畢挽荠，我們先不急著改動(dòng)克胳，首先在項(xiàng)目下找到pages.json文件，在里面配置剛剛創(chuàng)建的文件信息圈匆，不然后面沒法正常使用

pages.json官方文檔：

https://uniapp.dcloud.io/collocation/pages

再對(duì)pages>index目錄下的index.vue文件做出一定的修改漠另，以滿足需求

如圖，點(diǎn)擊按鈕跳轉(zhuǎn)test.nvue頁面

接下來對(duì)test.nvue文件做出一定更改跃赚，以便后續(xù)測試開發(fā)的原生插件笆搓。

如圖，利用

<Test-Component/>標(biāo)簽來引用插件纬傲，ref與myTextClick()中this.$refs.testa.clearText()調(diào)用自定義方法相關(guān)聯(lián)满败，text、sixe叹括、color分別設(shè)置屬性值算墨，onEnd是通過 @事件名="方法名" 添加事件來使用fireEvent()

第五步，運(yùn)行項(xiàng)目的三種方式

通過在線打包制作自定義基座來運(yùn)行

在HBuilderX里選定項(xiàng)目

運(yùn)行(R)>運(yùn)行到手機(jī)或模擬器(N)>制作自定義調(diào)試基座(P)

配置App云端打包信息

在這里使用了自有證書汁雷，這是之前圖文中創(chuàng)建的净嘀，密碼123456

下面選中了打自定義調(diào)試基座（iOS的safari調(diào)試需要用蘋果開發(fā)證書打包），因?yàn)槭且獪y試侠讯，所以不要點(diǎn)到打正式包上了

云端打包

提交到云端服務(wù)器

打包完成

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

可以在項(xiàng)目unpackage下看到打包后的測試apk文件

啟動(dòng)模擬器挖藏，運(yùn)行

模擬器啟動(dòng)成功

進(jìn)入測試項(xiàng)目，點(diǎn)擊按鈕跳轉(zhuǎn)test.nvue界面

發(fā)現(xiàn)Text-Component插件成功被引用厢漩，點(diǎn)擊“點(diǎn)擊清理”按鈕進(jìn)行下一步測試

清理完成及結(jié)果反饋

測試成功

附加

如果Component擴(kuò)展模塊做出了更改膜眠，順著Gradle>testplugin>Tasks>other目錄

選擇assembleDebug或者assembleRelease雙擊等待系統(tǒng)編譯成aar文件

編譯完成后，在testplugin>build>outputs>aar中找到相關(guān)文件，復(fù)制粘貼到相關(guān)目錄下宵膨，替換之前的插件

再進(jìn)行云打包基座調(diào)試即可

利用HBuilderX來調(diào)試的好處在于能夠隨時(shí)對(duì)項(xiàng)目中的vue或者nvue文件做出適當(dāng)?shù)男薷募芑眩?shí)時(shí)在模擬器上進(jìn)行差量更新，這樣非常方便柄驻。

但當(dāng)插件內(nèi)容等發(fā)生變化時(shí)狐树，直接把相關(guān)文件粘貼在項(xiàng)目內(nèi)是無法同步更新的焙压，需要再次打包鸿脓，而云打包的次數(shù)又有限制，有時(shí)需要排隊(duì)等候涯曲，所以離線打包方法還是很有必要了解的野哭。下面再為大家介紹兩種運(yùn)行方式，都是通過離線打包的方式來運(yùn)行的幻件。

因?yàn)橥ㄟ^離線打包制作自定義基座來運(yùn)行和通過AndroidStudio來運(yùn)行條件基本一致拨黔，所以前期先把共同條件配置好（與Android離線打包高度相似）

配置運(yùn)行條件

①引入打包資源

進(jìn)入下載好后的安卓離線SDK文件夾蹋岩，在目錄

2.7.9\Android-SDK@2.7.9.80210_20200528\SDK\libs

下找到

lib.5plus.base-release.aar

android-gif-drawable-release@1.2.17.aar

miit_mdid_1.0.10.aar

uniapp-release.aar

四個(gè)文件搁拙，復(fù)制到自定義的新文件夾方便使用

在目錄

2.7.9\Android-SDK@2.7.9.80210_20200528\SDK\assets

下找到data文件夾，打開可以發(fā)現(xiàn)下圖幾個(gè)文件岭妖。

可以發(fā)現(xiàn)徽曲，較上上版本2.6.16少了dcloud1.dat和dcloud2.dat兩個(gè)文件

官方文檔中給出了說明：dcloud1.dat零截、dcloud2.dat為uni-app所需資源，2.7.0之后已不再需要秃臣，升級(jí)時(shí)需要?jiǎng)h除涧衙，可以減少apk大小。

返回上一級(jí)奥此，復(fù)制data文件夾如上一步操作弧哎，為了方便與四個(gè)文件放到一起。

如圖稚虎，在發(fā)行(P)選項(xiàng)>原生APP-本地打包（L）中選擇生成本地打包App資源（R）撤嫩。

顯示導(dǎo)出成功，順著路徑將自己項(xiàng)目id名的文件夾拷貝蠢终，放到上一步自定義的文件夾下非洲，方便使用。

這里我的項(xiàng)目id是__UNI__2B9747D蜕径，就把它放到如圖位置

打開AndroidStudio两踏，如下圖將

lib.5plus.base-release.aar

android-gif-drawable-release@1.2.17.aar

miit_mdid_1.0.10.aar

三個(gè)文件復(fù)制粘貼到libs目錄下

（第二步添加依賴時(shí)已經(jīng)導(dǎo)入uniapp-release.aar了）

如下圖在build.gradle(app)中添加引用資源

implementation fileTree(dir: 'libs', include: ['*.aar'])

implementation "com.android.support:support-v4:28.0.0"

implementation "com.android.support:appcompat-v7:28.0.0"

implementation 'com.android.support:recyclerview-v7:28.0.0'

implementation 'com.facebook.fresco:fresco:1.13.0'

implementation "com.facebook.fresco:animated-gif:1.13.0"

implementation 'com.github.bumptech.glide:glide:4.9.0'

implementation 'com.alibaba:fastjson:1.1.46.android'

自帶的依賴進(jìn)行注釋

添加

接下來在

android{

...

? ? ? ? }

內(nèi)添加

aaptOptions {

additionalParameters '--auto-add-overlay'?

ignoreAssetsPattern "!.svn:!.git:.*:!CVS:!thumbs.db:!picasa.ini:!*.scc:*~"

}

再回到build.gradle(app)頁面最上邊，配置app版本號(hào)兜喻。

compileSdkVersion為編譯版本梦染，buildToolsVersion為構(gòu)建工具版本，applicationId為創(chuàng)建時(shí)的包名，minSdkVersion為兼容最小的版本號(hào)帕识，targetSdkVersion為目標(biāo)版本泛粹，有興趣的可以百度一下三者之間的區(qū)別和聯(lián)系。

注意肮疗，官方文檔中標(biāo)注“App離線SDK minSdkVersion最低支持19晶姊，小于19在部分4.4以下機(jī)型上將無法正常使用∥被酰”

versionCode需要設(shè)定一個(gè)數(shù)值们衙，一般初始值為1，更新版本時(shí)versionCode的值需要做出更改碱呼，每次都要比前一個(gè)設(shè)置的值大蒙挑，否則無法正常安裝。

versionName一般填寫主版本號(hào)次版本號(hào)和修正號(hào)愚臀，如圖中的“1.0.0”為最初版本號(hào)忆蚀，其余的可以自行查閱。

然后同步處理

同步完成

把剛剛轉(zhuǎn)移到自定義文件夾下的data文件夾拷貝到app>src>main>assets目錄文件夾下姑裂。

繼續(xù)在剛剛創(chuàng)建的assets文件夾下創(chuàng)建apps文件夾馋袜，把剛剛進(jìn)行本地打包資源處理后的文件（我的是__UNI__2B9747D）拷貝到apps文件夾下。

②配置AndroidManifest.xml

在app>src>main下配置AndroidManifest.xml文件

將其修改為（就改一下標(biāo)簽舶斧，以便內(nèi)部添加內(nèi)容）

然后繼續(xù)下一步欣鳖，添加內(nèi)容到application節(jié)點(diǎn)（建議復(fù)制官方文檔里的，下面的復(fù)制粘貼后排版會(huì)比較亂）捧毛。

<activity? ? ?

android:name="io.dcloud.PandoraEntry"? ? ? android:configChanges="orientation|keyboardHidden|keyboard|navigation"? ? ?

android:label="@string/app_name"? ? ?

android:launchMode="singleTask"? ? ?

android:hardwareAccelerated="true"? ? ?

android:theme="@style/TranslucentTheme"? ? ?

android:screenOrientation="user"? ? ? android:windowSoftInputMode="adjustResize" >? ? ?

<intent-filter>? ? ? ? ?

<action android:name="android.intent.action.MAIN" />? ? ? ? ?

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>?

</activity>?

<activity? ? ?

android:name="io.dcloud.PandoraEntryActivity"? ? ?

android:launchMode="singleTask"? ? ?

android:configChanges="orientation|keyboardHidden|screenSize|mcc|mnc|fontScale|keyboard"? ? ?

android:hardwareAccelerated="true"? ? ?

android:permission="com.miui.securitycenter.permission.AppPermissionsEditor"? ? ?

android:screenOrientation="user"? ? ?

android:theme="@style/DCloudTheme"? ? ?

android:windowSoftInputMode="adjustResize">? ? ?

<intent-filter>? ? ? ? ?

<category android:name="android.intent.category.DEFAULT" />? ? ?

<category android:name="android.intent.category.BROWSABLE" />

<action android:name="android.intent.action.VIEW" />? ? ? ?

<data android:scheme="h56131bcf" />? ? ?

</intent-filter>?

</activity>

添加完成后如下圖

AndroidManifest.xml配置完畢

本次順序發(fā)生變化观堂，主要是放在①的位置會(huì)因?yàn)橐蕾囘€沒添加緣故報(bào)紅，不美觀呀忧，當(dāng)然順序不影響后續(xù)使用师痕，根據(jù)自己喜好來調(diào)整就成

③引入本地原生插件

在build.gradle(app)下添加

implementation project(':testplugin')

用來引入本地插件（我的插件名是testplugin，注意根據(jù)自己插件名改動(dòng)）

在dependencies{}上方添加

repositories {

flatDir {

dirs 'libs'

}

}

注意：跟第二步情況一樣而账，不要把它放在android{}內(nèi)

同步處理

④自定義基座的配置

在app目錄下胰坟，將assets下apps文件夾中的manifest.json文件和data文件夾中的dcloud_control.xml文件打開，確保manifest.json中的id和dcloud_control.xml中的appid一致（不一致會(huì)出現(xiàn)白屏等狀況）泞辐。

并設(shè)置根節(jié)點(diǎn)的debug和syncDebug為true

條件配置完畢

名稱配置

在app>src>main>res>values配置strings.xml文件笔横，打開xml文件，與剛剛引入本地打包資源的里的manifest.json文件比較咐吼，發(fā)現(xiàn)名字不一致吹缔，遂把strings.xml里的name改為“TestComponent”。

（注：manifest.json文件在

assets>apps>__UNI__2B9747D

>www目錄下）

通過離線打包制作自定義基座來運(yùn)行

開始打debug包锯茄，方法Ⅰ

如圖厢塘，在Gradle>app>Tasks>other目錄下找到assembleDebug或者assembleRelease茶没，雙擊等待系統(tǒng)編譯完成

編譯完成后，在app>build>outputs>apk文件夾下即可找到debug和release相關(guān)apk文件

開始打debug包晚碾，方法Ⅱ

如圖抓半，在菜單欄Build > Build Bundle(s)/APK (s)下選擇Build APK(s)，等待系統(tǒng)編譯

編譯完成格嘁，在app>build>outputs>apk>debug路徑下即可找到相關(guān)apk文件

如此笛求，debug打包完成

將app-debug.apk文件復(fù)制到項(xiàng)目unpackage>debug目錄下，如果里面存在android_debug.apk文件糕簿，就先刪除掉探入，再將app-debug.apk文件名稱改為android_debug即可（也可先更名，粘貼進(jìn)去直接復(fù)制替換掉）

運(yùn)行(R)>運(yùn)行手機(jī)或模擬器(N)>運(yùn)行相關(guān)設(shè)備冶伞，成功運(yùn)行

測試結(jié)果如下圖：

測試成功

通過AndroidStudio來運(yùn)行

切換到模擬器選項(xiàng)

點(diǎn)擊Run 'app'運(yùn)行

項(xiàng)目成功打開新症，測試結(jié)果如下：

實(shí)機(jī)測試

打包流程不再贅述步氏，有疑問可參考以前圖文响禽，包括在AndroidStudio內(nèi)進(jìn)行app圖標(biāo)設(shè)置等

測試成功

附：如果運(yùn)行時(shí)報(bào)device support x86 but apk only supports armeabi-v7a錯(cuò)誤，進(jìn)入到build.gradle(app)中荚醒，在

android{

defaultConfig {

//要導(dǎo)入地方

? ? }

}

內(nèi)導(dǎo)入

ndk {

abiFilters 'x86','armeabi-v7a'

}

即可（否則64位處理器手機(jī)無法加載so文件）

圖例

Android studio添加第三方庫和so：

https://blog.csdn.net/anhenzhufeng/article/details/78913341

總結(jié)

uni原生插件開發(fā)流程—Component擴(kuò)展演示就到這里啦芋类，本次演示相較Module演示來說稍有改變，在內(nèi)容上對(duì)一些細(xì)節(jié)加以補(bǔ)充界阁，在第五步配置運(yùn)行條件里對(duì)其中的順序做出了調(diào)整侯繁，因?yàn)椴捎昧薾vue，所以在pages.json里也做了配置泡躯，并對(duì)最后的實(shí)機(jī)演示安卓離線打包過程采取省略式處理贮竟。總體而言较剃，Component擴(kuò)展演示難度比Module擴(kuò)展稍高咕别。

本次演示以Component擴(kuò)展舉例，官方的Demo里還有uniplugin_richalert一個(gè)例子沒有舉写穴，等待后續(xù)補(bǔ)充惰拱。如果時(shí)間充足的話，視頻演示會(huì)在后續(xù)放出啊送。

最后

uni原生插件開發(fā)流程—Component擴(kuò)展演示就到這里啦偿短，教程已經(jīng)足夠完善，如果需要Demo或者演示視頻的話馋没，請(qǐng)轉(zhuǎn)到公眾號(hào)紫色云間（微信號(hào)：ziseyunjian）通過菜單欄HBuilderX專區(qū)直接選擇昔逗，有更多內(nèi)容哦。

整理不易篷朵，覺得可以的話歡迎關(guān)注或收藏勾怒，如果還有什么問題直接在下面回復(fù)即可，公眾號(hào)也行，要是我不會(huì)的話...還請(qǐng)當(dāng)做從來沒見過我o(╥﹏╥)o

拜拜~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末控硼，一起剝皮案震驚了整個(gè)濱河市泽论，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌卡乾，老刑警劉巖翼悴，帶你破解...
    沈念sama閱讀 211,123評(píng)論 6贊 490
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異幔妨，居然都是意外死亡鹦赎，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評(píng)論 2贊 384
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門误堡，熙熙樓的掌柜王于貴愁眉苦臉地迎上來古话，“玉大人，你說我怎么就攤上這事锁施∨悴龋” “怎么了？”我有些...
    開封第一講書人閱讀 156,723評(píng)論 0贊 345
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵悉抵，是天一觀的道長肩狂。 經(jīng)常有香客問我，道長姥饰，這世上最難降的妖魔是什么傻谁？ 我笑而不...
    開封第一講書人閱讀 56,357評(píng)論 1贊 283
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮列粪，結(jié)果婚禮上审磁，老公的妹妹穿的比我還像新娘。我一直安慰自己岂座，他們只是感情好态蒂，可當(dāng)我...
    茶點(diǎn)故事閱讀 65,412評(píng)論 5贊 384
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著掺逼，像睡著了一般吃媒。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上吕喘，一...
    開封第一講書人閱讀 49,760評(píng)論 1贊 289
  • 城市分裂傳說
    那天赘那，我揣著相機(jī)與錄音，去河邊找鬼氯质。 笑死募舟，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的闻察。 我是一名探鬼主播拱礁，決...
    沈念sama閱讀 38,904評(píng)論 3贊 405
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼琢锋，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了呢灶？” 一聲冷哼從身側(cè)響起吴超，我...
    開封第一講書人閱讀 37,672評(píng)論 0贊 266
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎鸯乃，沒想到半個(gè)月后鲸阻，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 44,118評(píng)論 1贊 303
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡缨睡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,456評(píng)論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年鸟悴，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片奖年。...
    茶點(diǎn)故事閱讀 38,599評(píng)論 1贊 340
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡细诸，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出陋守，到底是詐尸還是另有隱情震贵，我是刑警寧澤，帶...
    沈念sama閱讀 34,264評(píng)論 4贊 328
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布嗅义，位于F島的核電站屏歹，受9級(jí)特大地震影響隐砸，放射性物質(zhì)發(fā)生泄漏之碗。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,857評(píng)論 3贊 312
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一季希、第九天 我趴在偏房一處隱蔽的房頂上張望褪那。 院中可真熱鬧，春花似錦式塌、人聲如沸博敬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評(píng)論 0贊 21
  • 一樁弒父案峰尝，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽偏窝。三九已至，卻和暖如春武学，著一層夾襖步出監(jiān)牢的瞬間祭往，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評(píng)論 1贊 264
  • 情欲美人皮
    我被黑心中介騙來泰國打工火窒， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留硼补，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,286評(píng)論 2贊 360
  • 代替公主和親
    正文 我出身青樓熏矿，卻偏偏與公主長得像已骇，于是被迫代替她去往敵國和親离钝。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,465評(píng)論 2贊 348