这个接着上一个文章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才行