這個接著上一個文章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); }}
在com.credream.testmodule.TestComponent 包下面我們創建TestComponent這個類,然後
可以看到首先我們去,用android去寫出這個自定義的組件,然後我們再去
在app工程中,的dcloud_uniplugins.json文件中,然後我們添加上
{ "plugins": [ { "type": "component", "name": "credream-input", "class": "com.credream.testmodule.TestComponent" } ] }
添加上我們剛剛創建的組件.可以看到這裏我們給我們創建的組件,起了個名字叫
credream-input
然後我們就可以回到我們的hbuilder中,去在uniapp中使用我們的剛剛創建的,android自定義的組件了.
爲了看的更清楚效果,我們使用的時候,給樣式添加,個邊框,以及顔色
我們修改以後
<credream-input style="height: 60rpx; width: 400rpx;border-width: 2rpx;border-color: #007AFF;"></credream-input>
我們就可以去打包app本地資源了.
然後我們再繼續看,在我打包之前,我們再做個功能:
我們在我們的android,的組件中,我們添加一個方法,然後我們在uniapp中去調用這個方法,我們去看看怎麽做
比如我們添加:
@UniJSMethod public void setText(String text){ getHostView().setText(text); }
這個方法,然後我們添加了以後,我們看看,怎麽在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>
可以看到我們給credream-input,這個我們自己定義的組件,添加了一個ref這個,引用的名稱,叫做input
然後我們,添加了一個按鈕button,然後,這個按鈕點擊以後,去觸發 testSetText這個方法,
然後我們再去,寫一下這個方法
可以看到我們這裏的testSetText() 這個方法,做的很簡單,他就是要
把文字,賦值給我們自定義的那個輸入框的組件對吧.
通過this.$refs.input 獲得那個組件,然後調用上面我們自己寫的那個組建的setText這個方法,
然後傳入內容,比如 hello uni app就可以了.
好,然後寫完了以後,我們去打包app資源.
我們點擊等待打包出資源
可以看到打包完了以後,我們跟上次一樣,把打包後的資源,我們
copy到,我們的android對應的那個目錄中去:
首先我們先打開我們android的這個目錄
然後我們再打開,我們編譯出來的資源目錄
可以看到這個是資源目錄,我們把這個目錄,
覆蓋到原來的,android的對應的資源目錄去,可以先刪除,然後再覆蓋.
覆蓋以後,我們去執行試試
直接去調試執行:
可以看到我們,自定義的控件credream-input 在index.vue中寫了,但是
執行的時候沒有顯示出來...還是顯示 對應的版本不對...去檢查了一下,才知道...
2022年1月25日發布了,新版本3.3.10...我是之前下載的,下載的時候當時是最新版本.....這版本發布挺快..
沒辦法再去下載,最新版本的去吧:
https://nativesupport.dcloud.net.cn/AppDocs/download/android 從這裏下載最新版本
發布的真快....
下載以後,我們拿到新版SDK中的
示例工程,用androidstudio打開.
注意需要把這個工程先copy到一個沒有空格中文字符的目錄中去.
複制以後用androidstudio打開.
打開新的工程以後我們按照上一節,
去創建一個module,這裏一定要注意,new完了以後
這裏一定要選擇Android Library 這裏,然後再填入module name等,然後
點擊finish.
然後我們去創建一個TestModule這個類,然後我們
把上一節寫好的 代碼copy過來
在複制之前我們先把gradle要用到的引用copy過來,其實我們直接複制一個比如uniplugin_richalert的就可以了
上一節已經操作過了
把gradle弄好以後,再去
把代碼弄過來
上一節的代碼,我們帶過來吧,雖然我們這一節,說的是組件,但是模塊,我們也帶過來吧.
然後再去配置,appkey,以及簽名等
可以看到在 D:\uniappws\UniPlugin-Hello-AS\app\src\main\AndroidManifest.xml 的最後
我們要寫入appkey,appkey的申請看上一節吧.
然後再去
然後我們再去看dcloud_control.xml 這個文件,
我們把appid,添加上去
然後再去定義組件去
我們把TestComponent這個組件也添加上去.
組件添加以後,我們在app工程的,assets文件夾,下面的dcloud_uniplugins.json文件中
添加上,我們定義的模塊和組件.
然後我們再去 app的gradle文件中去,
把我們生成的簽名的用戶名密碼等給配置上去
用Hbuilder打開
然後先去把這個appId替換掉,用emeditor打開替換掉就可以了
找到之前的那個我們在uniapp,開發者後台創建的那個應用ID,填寫到這裏
然後我們再去打開
去打開,3.3.10版本的,hbuilder的程序,然後
寫上vue的代碼...
可以看到上面調用了,我們自己創建的組件TestComponent
然後再寫上被調用的方法.
完了以後,再去導出本地app資源
導出資源
然後把資源複制到新的版本3.3.10 中的
app下面的assets下面的apps文件夾下,然後
然後我們再看一下,這裏local.properties這文件中的,sdk,以及ndk
也需要配置一下
然後我們再去把生成的簽名,添加進來
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才行