uniapp原生sdk插件开发(uniapp调用原生代码)

先贴上原生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扩展的混淆
-keep public class * extends com.taobao.weex.common.WXModule{*;}
#component扩展混淆
-keep public class * extends com.taobao.weex.ui.component.WXComponent{*;}

到这里module扩展插件和component扩展插件的公共配置就好了，接下来，分开讲如何进行扩展

module扩展插件

在模块中新建一个类，module扩展需要继承WxModule如下

public class TestModulePlugin extends WXModule {

    private final  String TAG = "elitetyc===>>";

    @JSMethod(uiThread = true)
    public void calcNum(JSONObject options, JSCallback callback){
        Log.e(TAG,"调用了call方法,两个数字相加");
        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,"调用了sleepCalcNum方法,睡眠3秒，两个数字相加");
        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():表名这是一个插件方法，可以被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，泛型为需要扩展的原生控件

public class TestComponentPlugin extends WXComponent<TextView> {

    public TestComponentPlugin(WXSDKInstance instance, WXVContainer parent, BasicComponentData basicComponentData) {
        super(instance, parent, basicComponentData);
    }


    /**
     *构建component的view时会回调此函数
     * @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联系电话: " + telNumber);
    }


    /**
     * 清除联系电话
     */
    @JSMethod
    public void clearTel() {
        getHostView().setText("tyc联系电话: 电话已清除");
    }


    /**
     * 原生调用uniapp中的方法
     */
    @JSMethod 
    public void showTel(){
        String str = getHostView().getText().toString();
//原生触发fireEvent 自定义事件onTel
        Map<String, Object> params = new HashMap<>();
        Map<String, Object> number = new HashMap<>();
        number.put("tel", "我是android返回的:"+str);
//目前uni限制 参数需要放入到"detail"中 否则会被清理
        params.put("detail", number);
        fireEvent("onTel", params);
    }
}

从上到下

initComponentHostView：这个方法是在uniapp中使用这个扩展控件时会回调的方法，就是构建一个原生控件返回

@WXComponentProp(name = "tel")：如果需要定义一个属性，需要使用这个注解，name就是属性名，在uniapp中创建控件时可以使用这个属性传入值，就会调用这个注解所在的方法，例如:通过tel属性设置textview的内容

<ElitetycText tel="1814037xxxx" style="width:200;height:100"></ElitetycText>

@JSMethod：可以通过uniapp进行调用的方法，类似module扩展中的方法，不同的是这个是通过实例化的控件来调用

通过fireEvent可以反过来调用uniapp中定义的方法：特别注意：需要将方法参数放在detail中，否则你死活也接收不到参数的，然后fireEvent的第一个参数是uniapp中组件实例化时传入的方法名，例如下面的@onTel，就应该传入@符号后的名称。

<ElitetycText tel="1814037xxxx" style="width:200;height:100" @onTel="onTel()"></ElitetycText>

OK到这里component扩展插件的内容也算写好了，记下全类名com.elitetyc.elitetyc_plugin.TestComponentPlugin，后面注册会用得到。

注意：module扩展插件还是component扩展插件里面的方法必须都为public，因为底层通过反射进行调用

uniapp页面开发

image.png

修改index.vue内容如下

<template>
    <div>
        <div>{{res}}</div>
        <button type="primary" @click="uniCalcNum()">计算10+100=多少?</button>
        <button type="primary" @click="uniSleepCalcNum()">睡眠计算20+100=多少?</button>
        <ElitetycText ref="telText" tel="1814037xxxx" style="width:200;height:100" @onTel="onTel" ></ElitetycText>
        <button type="primary" @click="nativeCallUni()">调用原生，通过原生调用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:"计算的值是:???"
            }
        },
        onLoad() {
            _self = this
        },
        methods: {
        
            uniCalcNum(){
                // 注意调用的方法名和原生中定义的方法名一致，
                //参数中获的为num1和num2，所以这里也传入这两个值
                testModule.calcNum({
                    num1:10,
                    num2:100
                },(res)=>{
                    _self.res = res.res
                    uni.showToast({
                        title:"计算的结果是"+res.res
                    })
                })
                
            },
            uniSleepCalcNum(){
                testModule.sleepCalcNum({
                    num1:20,
                    num2:100
                },(res)=>{
                    _self.res = res.res
                    uni.showToast({
                        title:"计算的结果是"+res.res
                    })
                })
            },
            
            
            nativeCallUni(){
                this.$refs.telText.showTel()
            },
            clearText(){
                this.$refs.telText.clearTel()
            },
            // 原生调用的方法
            onTel(e) {
                uni.showToast({
                    title:e.detail.tel,
                    icon:"none"
                })
            },
    
        }
    }
</script>

<style>

</style>

点击发行，生成离线打包资源

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就是刚才打包的离线资源包的文件夹名字，我这里修改后如下

<hbuilder version="1.9.9.80137">
<apps>
    <app appid="__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

源代码地址https://gitee.com/elitetyc/UniappPluginTest

如果有帮助到您，麻烦给个赞，谢谢

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,126评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,254评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,445评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,185评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,178评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,970评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,276评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,927评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,400评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,646评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,213评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2赞 345