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

╰+哭是因爲堅強的太久メ 2021-09-19 07:58 2378阅读 0赞

先贴上原生sdk插件开发官网：[https://nativesupport.dcloud.net.cn/NativePlugin/course/android][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][https_nativesupport.dcloud.net.cn_AppDocs_download_android])**

![11172442-ccd39eafa131ce5b.png][]

image.png

我这里选择稳定版本进行下载，下载后解压后目录内容如下，主要要使用的是箭头标注的项目

![11172442-3042f1cc8681904b.png][]

image.png

**第二步：创建原生项目，已有原生项目可以跳过（注意需要配置的东西是否配置好）**

![11172442-0733d6b607188cd6.png][]

image.png

**注意：uni原生sdk插件目前暂不支持kotlin，所以这里选择java**

**第三步：创建为library的module**,我这里取名elitetyc\_plugin

![11172442-1965ec6f3553098c.png][]

image.png

**第四步，拷贝aar包到lib目录下**

aar包在sdk中UniPlugin-Hello-AS/app/libs目录下

![11172442-1090771577f07a43.png][]

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的内容

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

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

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

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

## uniapp页面开发 ##

![11172442-a906dfdd9b8aa6cd.png][]

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>

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

![11172442-e9ad87ce6eb1ad11.png][]

image.png

## 重点来了！！！！！！！！ ##

在androidstudio原生项目的主项目下新建assert目录，再新建一个apps文件夹，将刚才离线资源包复制到里面(离线资源包在uniapp的unpackage/resources目录下)，然后再复制SDK中的UniPlugin-Hello-AS/app/src/main/assets目录下的data文件夹和dcloud\_uniplugins.json文件复制到刚才新建的assert文件夹下，最后的目录如下图

![11172442-3f95a8fad3e3f0ee.png][]

image.png

## 然后重点又来了，需要修改data目录下的dcloud\_control.xml文件，修改里面的uniID，id就是刚才打包的离线资源包的文件夹名字，我这里修改后如下 ##

\[图片上传失败...(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：这个就是我们写的原生代码全类名

# 到这里就大功告成了！！！，运行项目。 #

![11172442-09de08f9ea2c3641.png][]

image.png

源代码地址[https://gitee.com/elitetyc/UniappPluginTest][https_gitee.com_elitetyc_UniappPluginTest]

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

[https_nativesupport.dcloud.net.cn_NativePlugin_course_android]: https://links.jianshu.com/go?to=https%3A%2F%2Fnativesupport.dcloud.net.cn%2FNativePlugin%2Fcourse%2Fandroid
[https_nativesupport.dcloud.net.cn_AppDocs_download_android]: https://links.jianshu.com/go?to=https%3A%2F%2Fnativesupport.dcloud.net.cn%2FAppDocs%2Fdownload%2Fandroid
[11172442-ccd39eafa131ce5b.png]: /images/20210825/09294da62f994adea6e3456651ffbd06.png
[11172442-3042f1cc8681904b.png]: /images/20210825/3a460bf5fea84e77804af424db869bef.png
[11172442-0733d6b607188cd6.png]: /images/20210825/0e7156ea899e48089e4614cc752a4a01.png
[11172442-1965ec6f3553098c.png]: /images/20210825/65798b496ce242f8ae55677d0b370f05.png
[11172442-1090771577f07a43.png]: /images/20210825/6eb90b8b717840d2b9d72615347ff639.png
[11172442-a906dfdd9b8aa6cd.png]: /images/20210825/ff2d57d484344ae990294cb5669f2bcf.png
[11172442-e9ad87ce6eb1ad11.png]: /images/20210825/dc074ef114914d35b201daf7d963bfd2.png
[11172442-3f95a8fad3e3f0ee.png]: /images/20210825/41405cff74cd4c029ccef16287f8f3ce.png
[11172442-09de08f9ea2c3641.png]: /images/20210825/9329acb4d5d446c59de95780a5f087e7.png
[https_gitee.com_elitetyc_UniappPluginTest]: https://links.jianshu.com/go?to=https%3A%2F%2Fgitee.com%2Felitetyc%2FUniappPluginTest