uniapp原生組件_用AndroidStudio開發原生uniapp組件

這個接著上一個文章004,來說,004節我們開發了,uniapp用的,原生模塊,然後我們再來看,來開發,原生的uniapp的組件.


我們接著上一節用的,我們下載的uniapp的離線打包用的那個uniapp的示例工程來說


這次我們不創建一個Module我們,來在我們原來創建的Module中,我們去創建一個組件去看看


package com.credream.testmodule;import android.content.Context;import android.widget.EditText;import androidx.annotation.NonNull;import io.dcloud.feature.uniapp.UniSDKInstance;import io.dcloud.feature.uniapp.ui.action.AbsComponentData;import io.dcloud.feature.uniapp.ui.component.AbsVContainer;import io.dcloud.feature.uniapp.ui.component.UniComponent;public class TestComponent extends UniComponent<EditText> { public TestComponent(UniSDKInstance instance, AbsVContainer parent, AbsComponentData componentData) { super(instance, parent, componentData); } @Override protected EditText initComponentHostView(@NonNull Context context){ return new EditText(context); }}


uniapp原生組件_用AndroidStudio開發原生uniapp組件


在com.credream.testmodule.TestComponent 包下面我們創建TestComponent這個類,然後


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


可以看到首先我們去,用android去寫出這個自定義的組件,然後我們再去


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


在app工程中,的dcloud_uniplugins.json文件中,然後我們添加上


{ "plugins": [ { "type": "component", "name": "credream-input", "class": "com.credream.testmodule.TestComponent" } ] }


uniapp原生組件_用AndroidStudio開發原生uniapp組件


添加上我們剛剛創建的組件.可以看到這裏我們給我們創建的組件,起了個名字叫


credream-input


然後我們就可以回到我們的hbuilder中,去在uniapp中使用我們的剛剛創建的,android自定義的組件了.


爲了看的更清楚效果,我們使用的時候,給樣式添加,個邊框,以及顔色


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件



我們修改以後


<credream-input style="height: 60rpx; width: 400rpx;border-width: 2rpx;border-color: #007AFF;"></credream-input>


uniapp原生組件_用AndroidStudio開發原生uniapp組件


我們就可以去打包app本地資源了.


然後我們再繼續看,在我打包之前,我們再做個功能:
我們在我們的android,的組件中,我們添加一個方法,然後我們在uniapp中去調用這個方法,我們去看看怎麽做


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


比如我們添加:


@UniJSMethod public void setText(String text){ getHostView().setText(text); }


uniapp原生組件_用AndroidStudio開發原生uniapp組件


這個方法,然後我們添加了以後,我們看看,怎麽在uniapp中去使用


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


我們到hbuilder中去看看,我們


寫上這兩行代碼就可以了:


<credream-input ref="input" style="height: 60rpx; width: 400rpx;border-width: 2rpx;border-color: #007AFF;"></credream-input> <button type="default" @click="testSetText">setText</button>


uniapp原生組件_用AndroidStudio開發原生uniapp組件


可以看到我們給credream-input,這個我們自己定義的組件,添加了一個ref這個,引用的名稱,叫做input


然後我們,添加了一個按鈕button,然後,這個按鈕點擊以後,去觸發 testSetText這個方法,


然後我們再去,寫一下這個方法


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


可以看到我們這裏的testSetText() 這個方法,做的很簡單,他就是要


把文字,賦值給我們自定義的那個輸入框的組件對吧.


通過this.$refs.input 獲得那個組件,然後調用上面我們自己寫的那個組建的setText這個方法,


然後傳入內容,比如 hello uni app就可以了.


好,然後寫完了以後,我們去打包app資源.


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


我們點擊等待打包出資源


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


可以看到打包完了以後,我們跟上次一樣,把打包後的資源,我們


copy到,我們的android對應的那個目錄中去:


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


首先我們先打開我們android的這個目錄


然後我們再打開,我們編譯出來的資源目錄


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


可以看到這個是資源目錄,我們把這個目錄,


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


覆蓋到原來的,android的對應的資源目錄去,可以先刪除,然後再覆蓋.


覆蓋以後,我們去執行試試


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


直接去調試執行:


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


可以看到我們,自定義的控件credream-input 在index.vue中寫了,但是


執行的時候沒有顯示出來...還是顯示 對應的版本不對...去檢查了一下,才知道...


2022年1月25日發布了,新版本3.3.10...我是之前下載的,下載的時候當時是最新版本.....這版本發布挺快..


沒辦法再去下載,最新版本的去吧:


https://nativesupport.dcloud.net.cn/AppDocs/download/android 從這裏下載最新版本


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


發布的真快....


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


下載以後,我們拿到新版SDK中的


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


示例工程,用androidstudio打開.


注意需要把這個工程先copy到一個沒有空格中文字符的目錄中去.


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


複制以後用androidstudio打開.


打開新的工程以後我們按照上一節,


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


去創建一個module,這裏一定要注意,new完了以後


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


這裏一定要選擇Android Library 這裏,然後再填入module name等,然後


點擊finish.


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


然後我們去創建一個TestModule這個類,然後我們


把上一節寫好的 代碼copy過來


在複制之前我們先把gradle要用到的引用copy過來,其實我們直接複制一個比如uniplugin_richalert的就可以了


上一節已經操作過了


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


把gradle弄好以後,再去


把代碼弄過來


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


上一節的代碼,我們帶過來吧,雖然我們這一節,說的是組件,但是模塊,我們也帶過來吧.


然後再去配置,appkey,以及簽名等


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


可以看到在 D:\uniappws\UniPlugin-Hello-AS\app\src\main\AndroidManifest.xml 的最後


我們要寫入appkey,appkey的申請看上一節吧.


然後再去


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


然後我們再去看dcloud_control.xml 這個文件,


我們把appid,添加上去


然後再去定義組件去


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


我們把TestComponent這個組件也添加上去.


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


組件添加以後,我們在app工程的,assets文件夾,下面的dcloud_uniplugins.json文件中


添加上,我們定義的模塊和組件.


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


然後我們再去 app的gradle文件中去,


把我們生成的簽名的用戶名密碼等給配置上去


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


用Hbuilder打開


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


然後先去把這個appId替換掉,用emeditor打開替換掉就可以了


找到之前的那個我們在uniapp,開發者後台創建的那個應用ID,填寫到這裏


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


然後我們再去打開


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


去打開,3.3.10版本的,hbuilder的程序,然後


寫上vue的代碼...


可以看到上面調用了,我們自己創建的組件TestComponent


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


然後再寫上被調用的方法.


完了以後,再去導出本地app資源


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


導出資源


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


然後把資源複制到新的版本3.3.10 中的


app下面的assets下面的apps文件夾下,然後


uniapp原生組件_用AndroidStudio開發原生uniapp組件
uniapp原生組件_用AndroidStudio開發原生uniapp組件


然後我們再看一下,這裏local.properties這文件中的,sdk,以及ndk


也需要配置一下


uniapp原生組件_用AndroidStudio開發原生uniapp組件


然後我們再去把生成的簽名,添加進來


test.plugin


然後執行調試



調試之前我們要注意這裏的:


<hbuilder debug = "true" syncDebug="true"> 加上這個 調試的時候,就會打印錯誤日志了.xxxxxxxxxxbr <hbuilder debug = "true" syncDebug="true"> 加上這個 調試的時候,就會打印錯誤日志了.


可以看到調試的時候報錯,說當前運行的基座不包含原生插件credream_testmodule


我們去看看怎麽回事,如果報這個錯...要注意:


去到這個 app的gradle文件中去看看


//添加自己定義的模塊和插件implementation project(":credream_testmodule")xxxxxxxxxxbr //添加自己定義的模塊和插件brimplementation project(":credream_testmodule")br


這個一定要加上.


然後去調試...這裏一定要注意,調試的時候,如果以前有安裝的程序,一定要先卸載了,然後再調試安裝,要不然,新修改的內容


不會顯示出來.


卸載了也不行...要注意這裏,一定要把.vue 改成.nvue 後綴要改了...


因爲nvue的渲染是用原生引擎渲染的,所以一定要改成nvue才行.


要不然還是顯示不出來效果



可以看到把index.vue這個後綴,改成.nvue 以後我們再去編譯


編譯以後,放到android的對應的assets文件夾下的apps文件夾下,然後我們再去跑起來去看看



可以看到這次就可以了,我們自己,做的模塊,以及組件現在都可以用了,


關鍵就是開發的時候,要用nvue,如果你的頁面中,沒有調用到自己定義的組件或者


模塊的話,那麽其實也可以,直接 不用nvue也行,但是如果你調用到了原生的,組件或者模塊的話


那麽一定要用nvue才行