转自https://www.jianshu.com/p/89afba199d69
uniapp原生sdk插件开发(uniapp调用原生代码)
eliteTyc关注
12020.05.17 01:47:10字数 1,394阅读 25,832
先贴上原生sdk插件开发官网：https://nativesupport.dcloud.net.cn/NativePlugin/course/android
原生sdk开发，目前包含两种：
1.Module扩展开发，非UI型扩展，即uniapp调用原生代码的方法
2.Component扩展插件开发，UI型扩展，原生控件的扩展调用
现在开始，公共方法
第一步：下载uniSDK地址(https://nativesupport.dcloud.net.cn/AppDocs/download/android)
image.png
我这里选择稳定版本进行下载，下载后解压后目录内容如下，主要要使用的是箭头标注的项目
image.png
第二步：创建原生项目，已有原生项目可以跳过（注意需要配置的东西是否配置好）
image.png
注意：uni原生sdk插件目前暂不支持kotlin，所以这里选择java
第三步：创建为library的module,我这里取名elitetyc_plugin
image.png
第四步，拷贝aar包到lib目录下
aar包在sdk中UniPlugin-Hello-AS/app/libs目录下
image.png
第五步：配置module的build.gradle文件
apply plugin: 'com.android.library'android { compileSdkVersion 29 buildToolsVersion "29.0.3" defaultConfig { minSdkVersion 19 targetSdkVersion 29 versionCode 1 versionName "1.0" testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" consumerProguardFiles 'consumer-rules.pro' } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' } }}//导入aar需要的配置repositories { flatDir { dirs 'libs' }}dependencies { implementation 'androidx.appcompat:appcompat:1.1.0' testImplementation 'junit:junit:4.12' androidTestImplementation 'androidx.test.ext:junit:1.1.1' androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0' //必须添加的依赖 //noinspection GradleCompatible compileOnly 'com.android.support:recyclerview-v7:27.1.0' //noinspection GradleCompatible compileOnly 'com.android.support:support-v4:27.1.0' //noinspection GradleCompatible compileOnly 'com.android.support:appcompat-v7:27.1.0' compileOnly 'com.alibaba:fastjson:1.1.46.android' implementation fileTree(dir: '../app/libs', include: ['*.aar', '*.jar'], exclude: [])}
第六步，将插件module作为依赖添加到主项目中
默认新建的module没有依赖进主项目，需要在app的build.gradle中的依赖中加入以下代码(注意换成自己的插件模块名称)
implementation project(path: ':elitetyc_plugin')
最后加上app的build.gradle文件
apply plugin: 'com.android.application'android { compileSdkVersion 29 buildToolsVersion "29.0.3" defaultConfig { applicationId "com.elitetyc.uninativetest" minSdkVersion 19 targetSdkVersion 29 versionCode 1 versionName "1.0" testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' } } //使用uniapp时，需复制下面代码 /*代码开始*/ aaptOptions { additionalParameters '--auto-add-overlay' //noCompress 'foo', 'bar' ignoreAssetsPattern "!.svn:!.git:.*:!CVS:!thumbs.db:!picasa.ini:!*.scc:*~" } /*代码结束*/}//导入aar需要的配置repositories { flatDir { dirs 'libs' }}dependencies { implementation fileTree(dir: 'libs', include: ['*.jar','*.aar']) implementation 'androidx.appcompat:appcompat:1.1.0' implementation 'androidx.constraintlayout:constraintlayout:1.1.3' testImplementation 'junit:junit:4.12' androidTestImplementation 'androidx.test.ext:junit:1.1.1' androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0' /*uniapp所需库-----------------------开始*/ implementation 'com.android.support:recyclerview-v7:27.1.0' implementation 'com.facebook.fresco:fresco:1.13.0' implementation "com.facebook.fresco:animated-gif:1.13.0" /*uniapp所需库-----------------------结束*/ // 基座需要，必须添加 implementation 'com.github.bumptech.glide:glide:4.9.0' implementation 'com.alibaba:fastjson:1.1.46.android' implementation project(path: ':elitetyc_plugin')}
注释的地方都是重点，否则最后运行起来会白屏！！！
第七步：加入混淆module的proguard-rules.pro文件
#module扩展的混淆-keeppublicclass*extendscom.taobao.weex.common.WXModule{*;}#component扩展混淆-keeppublicclass*extendscom.taobao.weex.ui.component.WXComponent{*;}
到这里module扩展插件和component扩展插件的公共配置就好了，接下来，分开讲如何进行扩展
module扩展插件
在模块中新建一个类，module扩展需要继承WxModule如下
publicclassTestModulePluginextendsWXModule{privatefinalStringTAG="elitetyc===>>";@JSMethod(uiThread=true)publicvoidcalcNum(JSONObjectoptions,JSCallbackcallback){Log.e(TAG,"调用了call方法,两个数字相加");Integernum1=options.getInteger("num1");Integernum2=options.getInteger("num2");Integerres=num1+num2;JSONObjectjsonObject=newJSONObject();jsonObject.put("res",res);callback.invoke(jsonObject);}@JSMethod(uiThread=false)publicvoidsleepCalcNum(JSONObjectoptions,JSCallbackcallback){Log.e(TAG,"调用了sleepCalcNum方法,睡眠3秒，两个数字相加");try{Thread.sleep(3000);}catch(InterruptedExceptione){e.printStackTrace();}Integernum1=options.getInteger("num1");Integernum2=options.getInteger("num2");Integerres=num1+num2;JSONObjectjsonObject=newJSONObject();jsonObject.put("res",res);callback.invoke(jsonObject);}}
@JSMethod():表名这是一个插件方法，可以被uniapp调用，uiThread = true 或者false，表名这个方法是否执行在Ui线程，一般耗时操作在非UI线程，非耗时任务在UI线程，这里写了两个方法，第二个方法执行耗时任务(随眠3秒，在进行计算)
方法名：方法名很重要，在uniapp中调用时会用到这个方法名
参数:第一个参数:JSONObject options,这是uniapp调用时传过来的参数，可以通过k-v方式获取，第二个参数，回调函数对象，调用函数的invoke方法可以将结果返回。
注意：到这里module扩展的方法就算写好了，这里记下这个类的全类名com.elitetyc.elitetyc_plugin.TestModulePlugin，因为后面还需要注册，讲完component扩展后一起注册。
component扩展插件
新建一个类如下，component扩展需要继承，WXComponent，泛型为需要扩展的原生控件
publicclassTestComponentPluginextendsWXComponent<TextView>{publicTestComponentPlugin(WXSDKInstanceinstance,WXVContainerparent,BasicComponentDatabasicComponentData){super(instance,parent,basicComponentData);}/**
*构建component的view时会回调此函数
* @param context
* @return
*/@OverrideprotectedTextViewinitComponentHostView(@NonNullContextcontext){TextViewtextView=newTextView(context);textView.setTextColor(Color.RED);textView.setTextSize(30);returntextView;}/**
* 配置属性名
* @param telNumber
*/@WXComponentProp(name="tel")publicvoidsetTel(StringtelNumber){getHostView().setText("tyc联系电话: "+telNumber);}/**
* 清除联系电话
*/@JSMethodpublicvoidclearTel(){getHostView().setText("tyc联系电话: 电话已清除");}/**
* 原生调用uniapp中的方法
*/@JSMethodpublicvoidshowTel(){Stringstr=getHostView().getText().toString();//原生触发fireEvent 自定义事件onTelMap<String,Object>params=newHashMap<>();Map<String,Object>number=newHashMap<>();number.put("tel","我是android返回的:"+str);//目前uni限制 参数需要放入到"detail"中 否则会被清理params.put("detail",number);fireEvent("onTel",params);}}
从上到下
initComponentHostView：这个方法是在uniapp中使用这个扩展控件时会回调的方法，就是构建一个原生控件返回
@WXComponentProp(name = "tel")：如果需要定义一个属性，需要使用这个注解，name就是属性名，在uniapp中创建控件时可以使用这个属性传入值，就会调用这个注解所在的方法，例如:通过tel属性设置textview的内容
@JSMethod：可以通过uniapp进行调用的方法，类似module扩展中的方法，不同的是这个是通过实例化的控件来调用
通过fireEvent可以反过来调用uniapp中定义的方法：特别注意：需要将方法参数放在detail中，否则你死活也接收不到参数的，然后fireEvent的第一个参数是uniapp中组件实例化时传入的方法名，例如下面的@onTel，就应该传入@符号后的名称。
OK到这里component扩展插件的内容也算写好了，记下全类名com.elitetyc.elitetyc_plugin.TestComponentPlugin，后面注册会用得到。
注意：module扩展插件还是component扩展插件里面的方法必须都为public，因为底层通过反射进行调用
uniapp页面开发
image.png
修改index.vue内容如下
点击发行，生成离线打包资源
image.png
重点来了！！！！！！！！
在androidstudio原生项目的主项目下新建assert目录，再新建一个apps文件夹，将刚才离线资源包复制到里面(离线资源包在uniapp的unpackage/resources目录下)，然后再复制SDK中的UniPlugin-Hello-AS/app/src/main/assets目录下的data文件夹和dcloud_uniplugins.json文件复制到刚才新建的assert文件夹下，最后的目录如下图
image.png
然后重点又来了，需要修改data目录下的dcloud_control.xml文件，修改里面的uniID，id就是刚才打包的离线资源包的文件夹名字，我这里修改后如下
<hbuilderversion="1.9.9.80137"><apps><appappid="__UNI__EA09775"appver=""/></apps></hbuilder>
[图片上传失败...(image-c04a54-1589651166006)]
OK，这里的配置算是弄完了，接下来就是注册！！！注册！！！注册！！！
也就是dcloud_uniplugins.json这个文件，修改后的内容如下
{"nativePlugins":[{"plugins":[{"type":"module","name":"ElitetycModulePlugin","class":"com.elitetyc.elitetyc_plugin.TestModulePlugin"}]},{"plugins":[{"type":"component","name":"ElitetycText","class":"com.elitetyc.elitetyc_plugin.TestComponentPlugin"}]}]}
type:插件类型
name：插件名称，这里很重要，uniapp代码中uni.requireNativePlugin("ElitetycModulePlugin")相对应
class：这个就是我们写的原生代码全类名
到这里就大功告成了！！！，运行项目。
image.png
