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才行