先貼上原生sdk插件開(kāi)發(fā)官網(wǎng)：https://nativesupport.dcloud.net.cn/NativePlugin/course/android
原生sdk開(kāi)發(fā)，目前包含兩種：
1.Module擴(kuò)展開(kāi)發(fā)嚷那，非UI型擴(kuò)展赫蛇，即uniapp調(diào)用原生代碼的方法
2.Component擴(kuò)展插件開(kāi)發(fā)荠耽，UI型擴(kuò)展寻定，原生控件的擴(kuò)展調(diào)用
現(xiàn)在開(kāi)始呛牲，公共方法
第一步：下載uniSDK地址(https://nativesupport.dcloud.net.cn/AppDocs/download/android)
我這里選擇穩(wěn)定版本進(jìn)行下載备绽，下載后解壓后目錄內(nèi)容如下议泵，主要要使用的是箭頭標(biāo)注的項(xiàng)目
第二步：創(chuàng)建原生項(xiàng)目占贫，已有原生項(xiàng)目可以跳過(guò)（注意需要配置的東西是否配置好）
注意：uni原生sdk插件目前暫不支持kotlin，所以這里選擇java
第三步：創(chuàng)建為library的module,我這里取名elitetyc_plugin
第四步先口，拷貝aar包到lib目錄下
aar包在sdk中UniPlugin-Hello-AS/app/libs目錄下
第五步：配置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'
}
}
}
//導(dǎo)入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作為依賴添加到主項(xiàng)目中
默認(rèn)新建的module沒(méi)有依賴進(jìn)主項(xiàng)目，需要在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時(shí)碉京，需復(fù)制下面代碼
/*代碼開(kāi)始*/
aaptOptions {
additionalParameters '--auto-add-overlay'
//noCompress 'foo', 'bar'
ignoreAssetsPattern "!.svn:!.git:.*:!CVS:!thumbs.db:!picasa.ini:!*.scc:*~"
}
/*代碼結(jié)束*/
}
//導(dǎo)入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所需庫(kù)-----------------------開(kāi)始*/
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所需庫(kù)-----------------------結(jié)束*/
// 基座需要厢汹，必須添加
implementation 'com.github.bumptech.glide:glide:4.9.0'
implementation 'com.alibaba:fastjson:1.1.46.android'
implementation project(path: ':elitetyc_plugin')
}
注釋的地方都是重點(diǎn)，否則最后運(yùn)行起來(lái)會(huì)白屏Ｐ持妗Ｌ淘帷！
第七步：加入混淆module的proguard-rules.pro文件
#module擴(kuò)展的混淆
-keep public class * extends com.taobao.weex.common.WXModule{*;}
#component擴(kuò)展混淆
-keep public class * extends com.taobao.weex.ui.component.WXComponent{*;}
到這里module擴(kuò)展插件和component擴(kuò)展插件的公共配置就好了凡蜻，接下來(lái)搭综，分開(kāi)講如何進(jìn)行擴(kuò)展
module擴(kuò)展插件
在模塊中新建一個(gè)類，module擴(kuò)展需要繼承WxModule如下
public class TestModulePlugin extends WXModule {
private final String TAG = "elitetyc===>>";
@JSMethod(uiThread = true)
public void calcNum(JSONObject options, JSCallback callback){
Log.e(TAG,"調(diào)用了call方法,兩個(gè)數(shù)字相加");
Integer num1 = options.getInteger("num1");
Integer num2 = options.getInteger("num2");
Integer res = num1+num2;
JSONObject jsonObject = new JSONObject();
jsonObject.put("res",res);
callback.invoke(jsonObject);
}
@JSMethod(uiThread = false)
public void sleepCalcNum(JSONObject options, JSCallback callback){
Log.e(TAG,"調(diào)用了sleepCalcNum方法,睡眠3秒划栓，兩個(gè)數(shù)字相加");
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
Integer num1 = options.getInteger("num1");
Integer num2 = options.getInteger("num2");
Integer res = num1+num2;
JSONObject jsonObject = new JSONObject();
jsonObject.put("res",res);
callback.invoke(jsonObject);
}
}
@JSMethod():表名這是一個(gè)插件方法兑巾，可以被uniapp調(diào)用，uiThread = true 或者false忠荞，表名這個(gè)方法是否執(zhí)行在Ui線程蒋歌，一般耗時(shí)操作在非UI線程，非耗時(shí)任務(wù)在UI線程委煤，這里寫(xiě)了兩個(gè)方法堂油，第二個(gè)方法執(zhí)行耗時(shí)任務(wù)(隨眠3秒，在進(jìn)行計(jì)算)
方法名：方法名很重要素标，在uniapp中調(diào)用時(shí)會(huì)用到這個(gè)方法名
參數(shù):第一個(gè)參數(shù):JSONObject options,這是uniapp調(diào)用時(shí)傳過(guò)來(lái)的參數(shù)称诗，可以通過(guò)k-v方式獲取，第二個(gè)參數(shù)头遭，回調(diào)函數(shù)對(duì)象寓免，調(diào)用函數(shù)的invoke方法可以將結(jié)果返回。
注意：到這里module擴(kuò)展的方法就算寫(xiě)好了计维，這里記下這個(gè)類的全類名com.elitetyc.elitetyc_plugin.TestModulePlugin袜香，因?yàn)楹竺孢€需要注冊(cè)，講完component擴(kuò)展后一起注冊(cè)鲫惶。
component擴(kuò)展插件
新建一個(gè)類如下蜈首，component擴(kuò)展需要繼承，WXComponent欠母，泛型為需要擴(kuò)展的原生控件
public class TestComponentPlugin extends WXComponent<TextView> {
public TestComponentPlugin(WXSDKInstance instance, WXVContainer parent, BasicComponentData basicComponentData) {
super(instance, parent, basicComponentData);
}
/**
*構(gòu)建component的view時(shí)會(huì)回調(diào)此函數(shù)
* @param context
* @return
*/
@Override
protected TextView initComponentHostView(@NonNull Context context) {
TextView textView = new TextView(context);
textView.setTextColor(Color.RED);
textView.setTextSize(30);
return textView;
}
/**
* 配置屬性名
* @param telNumber
*/
@WXComponentProp(name = "tel")
public void setTel(String telNumber) {
getHostView().setText("tyc聯(lián)系電話: " + telNumber);
}
/**
* 清除聯(lián)系電話
*/
@JSMethod
public void clearTel() {
getHostView().setText("tyc聯(lián)系電話: 電話已清除");
}
/**
* 原生調(diào)用uniapp中的方法
*/
@JSMethod
public void showTel(){
String str = getHostView().getText().toString();
//原生觸發(fā)fireEvent 自定義事件onTel
Map<String, Object> params = new HashMap<>();
Map<String, Object> number = new HashMap<>();
number.put("tel", "我是android返回的:"+str);
//目前uni限制 參數(shù)需要放入到"detail"中 否則會(huì)被清理
params.put("detail", number);
fireEvent("onTel", params);
}
}
從上到下
initComponentHostView：這個(gè)方法是在uniapp中使用這個(gè)擴(kuò)展控件時(shí)會(huì)回調(diào)的方法欢策，就是構(gòu)建一個(gè)原生控件返回
@WXComponentProp(name = "tel")：如果需要定義一個(gè)屬性，需要使用這個(gè)注解赏淌，name就是屬性名踩寇，在uniapp中創(chuàng)建控件時(shí)可以使用這個(gè)屬性傳入值，就會(huì)調(diào)用這個(gè)注解所在的方法六水，例如:通過(guò)tel屬性設(shè)置textview的內(nèi)容
<ElitetycText tel="1814037xxxx" style="width:200;height:100"></ElitetycText>
@JSMethod：可以通過(guò)uniapp進(jìn)行調(diào)用的方法俺孙，類似module擴(kuò)展中的方法，不同的是這個(gè)是通過(guò)實(shí)例化的控件來(lái)調(diào)用
通過(guò)fireEvent可以反過(guò)來(lái)調(diào)用uniapp中定義的方法：特別注意：需要將方法參數(shù)放在detail中掷贾，否則你死活也接收不到參數(shù)的睛榄，然后fireEvent的第一個(gè)參數(shù)是uniapp中組件實(shí)例化時(shí)傳入的方法名，例如下面的@onTel想帅，就應(yīng)該傳入@符號(hào)后的名稱场靴。
<ElitetycText tel="1814037xxxx" style="width:200;height:100" @onTel="onTel()"></ElitetycText>
OK到這里component擴(kuò)展插件的內(nèi)容也算寫(xiě)好了，記下全類名com.elitetyc.elitetyc_plugin.TestComponentPlugin港准，后面注冊(cè)會(huì)用得到憎乙。
注意：module擴(kuò)展插件還是component擴(kuò)展插件里面的方法必須都為public，因?yàn)榈讓油ㄟ^(guò)反射進(jìn)行調(diào)用
uniapp頁(yè)面開(kāi)發(fā)
修改index.vue內(nèi)容如下
<template>
<div>
<div>{{res}}</div>
<button type="primary" @click="uniCalcNum()">計(jì)算10+100=多少?</button>
<button type="primary" @click="uniSleepCalcNum()">睡眠計(jì)算20+100=多少?</button>
<ElitetycText ref="telText" tel="1814037xxxx" style="width:200;height:100" @onTel="onTel" ></ElitetycText>
<button type="primary" @click="nativeCallUni()">調(diào)用原生叉趣，通過(guò)原生調(diào)用uniapp中的方法</button>
<button type="primary" @click="clearText()">清除textview電話</button>
</div>
</template>
<script>
var testModule = uni.requireNativePlugin("ElitetycModulePlugin")
var _self
export default {
data() {
return {
title: 'Hello',
res:"計(jì)算的值是:???"
}
},
onLoad() {
_self = this
},
methods: {
uniCalcNum(){
// 注意調(diào)用的方法名和原生中定義的方法名一致泞边，
//參數(shù)中獲的為num1和num2，所以這里也傳入這兩個(gè)值
testModule.calcNum({
num1:10,
num2:100
},(res)=>{
_self.res = res.res
uni.showToast({
title:"計(jì)算的結(jié)果是"+res.res
})
})
},
uniSleepCalcNum(){
testModule.sleepCalcNum({
num1:20,
num2:100
},(res)=>{
_self.res = res.res
uni.showToast({
title:"計(jì)算的結(jié)果是"+res.res
})
})
},
nativeCallUni(){
this.$refs.telText.showTel()
},
clearText(){
this.$refs.telText.clearTel()
},
// 原生調(diào)用的方法
onTel(e) {
uni.showToast({
title:e.detail.tel,
icon:"none"
})
},
}
}
</script>
<style>
</style>
點(diǎn)擊發(fā)行疗杉，生成離線打包資源
重點(diǎn)來(lái)了Ｕ笱琛！Ｑ叹摺Ｉ沂病！３Ｎ宋纭！
在androidstudio原生項(xiàng)目的主項(xiàng)目下新建assert目錄冀痕，再新建一個(gè)apps文件夾荔睹，將剛才離線資源包復(fù)制到里面(離線資源包在uniapp的unpackage/resources目錄下)狸演，然后再?gòu)?fù)制SDK中的UniPlugin-Hello-AS/app/src/main/assets目錄下的data文件夾和dcloud_uniplugins.json文件復(fù)制到剛才新建的assert文件夾下，最后的目錄如下圖
然后重點(diǎn)又來(lái)了僻他，需要修改data目錄下的dcloud_control.xml文件宵距，修改里面的uniID，id就是剛才打包的離線資源包的文件夾名字吨拗，我這里修改后如下
<hbuilder version="1.9.9.80137">
<apps>
<app appid="__UNI__EA09775" appver=""/>
</apps>
</hbuilder>
[圖片上傳失敗...(image-c04a54-1589651166006)]
OK满哪，這里的配置算是弄完了，接下來(lái)就是注冊(cè)Ｈ芭瘛Ｉ谘肌！注冊(cè)＝考恕Ｏ窦Α！注冊(cè)Ｏ矿７匚Α！
也就是dcloud_uniplugins.json這個(gè)文件蕊蝗，修改后的內(nèi)容如下
{
"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")相對(duì)應(yīng)
class：這個(gè)就是我們寫(xiě)的原生代碼全類名
到這里就大功告成了Ｅ钇荨？溟埂！子漩，運(yùn)行項(xiàng)目豫喧。
源代碼地址https://gitee.com/elitetyc/UniappPluginTest
