uniapp原生插件开发-android端-component扩展

以你之姓@ 2021-09-19 08:06 1747阅读 0赞

### 目录 ###

1.  [uniapp原生插件开发-android端-component扩展][uniapp_-android_-component]
2.  uniapp原生插件开发-android端-module扩展
3.  uniapp原生插件开发-插件发布

本篇为 **uniapp原生插件开发-android端-component扩展**  
这里实现一个原生的MPAndroidChart的饼状图扩展  
效果如下

![11172442-e34e1932fef377c2.gif][]

Screenrecorder-2020-12-20-12-47-01-200.gif

### 开始 ###

1.  打开SDK中的demo项目UniPlugin-Hello-AS\`\`
    
      
    
    
    ![11172442-f5f40ad3166410d6.png][]
    
    image.png
2.  project的build.gradle:新增仓库

// 设置阿里云仓库，提高下载速度
    maven{ url 'http://maven.aliyun.com/nexus/content/groups/public/'}
    // MPAndroidChart库地址
    maven { url 'https://jitpack.io' }

![11172442-509bef431c9f0c71.png][]

image.png

`提醒：修改完这些你可能需要重新打开android studio，不知道是不是我的as版本太新了，修改了，然后一直停止不了之前的同步进程，重新打开as让他构建项目`

1.  正式开始，我们这里先根据官方文档提示，新建一个我们的插件模块，插件名称规范：**作者-插件名**  
    
    
    ![11172442-85a870349798ea30.png][]
    
    image.png

*  将该模块作为依赖添加到主项目中，弹出框选择刚才新建的模块apply
    
      
    
    
    ![11172442-03c5279d18bb9ba5.png][]
    
    image.png
 *  添加依赖：打开新模块的build.gradle,添加两处代码

//导入aar需要的配置
    repositories {
        flatDir {
            dirs 'libs'
        }
    }
    
    dependencies {
        compileOnly fileTree(dir: 'libs', include: ['*.jar'])
    
        compileOnly fileTree(dir: '../app/libs', include: ['uniapp-v8-release.aar'])
    
        compileOnly "com.android.support:recyclerview-v7:28.0.0"
        compileOnly "com.android.support:support-v4:28.0.0"
        compileOnly "com.android.support:appcompat-v7:28.0.0"
        implementation 'com.alibaba:fastjson:1.1.46.android'
        implementation 'com.facebook.fresco:fresco:1.13.0'
        // MpAndroidChart，引入库
        implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
    }

![11172442-4a4ecffb9827db57.png][]

image.png

1.  创建component插件，组件扩展必须继承自UniComponent，泛型为你要扩展的原生控件的类型

package com.elitetyc.elitetyc_mpandroidchart;
    
    import android.content.Context;
    import android.graphics.Color;
    
    import com.alibaba.fastjson.JSONArray;
    import com.alibaba.fastjson.JSONObject;
    import com.github.mikephil.charting.animation.Easing;
    import com.github.mikephil.charting.charts.PieChart;
    import com.github.mikephil.charting.components.Legend;
    import com.github.mikephil.charting.data.PieData;
    import com.github.mikephil.charting.data.PieDataSet;
    import com.github.mikephil.charting.data.PieEntry;
    import com.github.mikephil.charting.formatter.PercentFormatter;
    import com.github.mikephil.charting.utils.ColorTemplate;
    
    import java.util.ArrayList;
    
    import io.dcloud.feature.uniapp.UniSDKInstance;
    import io.dcloud.feature.uniapp.annotation.UniJSMethod;
    import io.dcloud.feature.uniapp.ui.action.AbsComponentData;
    import io.dcloud.feature.uniapp.ui.component.AbsVContainer;
    import io.dcloud.feature.uniapp.ui.component.UniComponent;
    import io.dcloud.feature.uniapp.ui.component.UniComponentProp;
    
    /**
     * Created by elitetyc on 2020/12/19.
     * Describe:
     */
    public  class TPieChart extends UniComponent<PieChart> {
    
    
        public TPieChart(UniSDKInstance instance, AbsVContainer parent, AbsComponentData componentData) {
            super(instance, parent, componentData);
        }
    
    
        /**
         * 使用该组件时会调用该方法返回数据
         * @param context
         * @return
         */
        @Override
        protected PieChart initComponentHostView(Context context) {
            PieChart  mPieChart= new PieChart(context);
            mPieChart.setUsePercentValues(true);
            mPieChart.getDescription().setEnabled(false);
            mPieChart.setExtraOffsets(5, 10, 5, 5);
    
            mPieChart.setDragDecelerationFrictionCoef(0.95f);
            //设置中间文字
            mPieChart.setCenterText("TPieChat");
    
            mPieChart.setDrawHoleEnabled(true);
            mPieChart.setHoleColor(Color.WHITE);
    
            mPieChart.setTransparentCircleColor(Color.WHITE);
            mPieChart.setTransparentCircleAlpha(110);
    
            mPieChart.setHoleRadius(58f);
            mPieChart.setTransparentCircleRadius(61f);
    
            mPieChart.setDrawCenterText(true);
    
            mPieChart.setRotationAngle(0);
            // 触摸旋转
            mPieChart.setRotationEnabled(true);
            mPieChart.setHighlightPerTapEnabled(true);
    
            //模拟数据
            ArrayList<PieEntry> entries = new ArrayList<PieEntry>();
            entries.add(new PieEntry(40, "优秀"));
            entries.add(new PieEntry(20, "满分"));
            entries.add(new PieEntry(30, "及格"));
            entries.add(new PieEntry(10, "不及格"));
            //设置数据
            loadData(entries,mPieChart,"三年一班");
            Legend l = mPieChart.getLegend();
            l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
            l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
            l.setOrientation(Legend.LegendOrientation.VERTICAL);
            l.setDrawInside(false);
            l.setXEntrySpace(7f);
            l.setYEntrySpace(0f);
            l.setYOffset(0f);
    
            // 输入标签样式
            mPieChart.setEntryLabelColor(Color.WHITE);
            mPieChart.setEntryLabelTextSize(12f);
            return mPieChart;
        }
    
        //设置数据
        private void loadData(ArrayList<PieEntry> entries, PieChart mPieChart,String label) {
            PieDataSet dataSet = new PieDataSet(entries, label);
            dataSet.setSliceSpace(3f);
            dataSet.setSelectionShift(5f);
    
            //数据和颜色
            ArrayList<Integer> colors = new ArrayList<Integer>();
            for (int c : ColorTemplate.VORDIPLOM_COLORS)
                colors.add(c);
            for (int c : ColorTemplate.JOYFUL_COLORS)
                colors.add(c);
            for (int c : ColorTemplate.COLORFUL_COLORS)
                colors.add(c);
            for (int c : ColorTemplate.LIBERTY_COLORS)
                colors.add(c);
            for (int c : ColorTemplate.PASTEL_COLORS)
                colors.add(c);
            colors.add(ColorTemplate.getHoloBlue());
            dataSet.setColors(colors);
            PieData data = new PieData(dataSet);
            data.setValueFormatter(new PercentFormatter());
            data.setValueTextSize(11f);
            data.setValueTextColor(Color.WHITE);
            mPieChart.setData(data);
            mPieChart.highlightValues(null);
            //刷新
            mPieChart.invalidate();
        }
    
    
        /**
         * 设置数据的方法
         * @param pieData
         */
        @UniComponentProp(name = "data")
        public void setData(JSONObject pieData) {
            String label = pieData.getString("label");
            JSONArray data = pieData.getJSONArray("data");
            ArrayList<PieEntry> entries = new ArrayList<PieEntry>();
            for (int i = 0; i < data.size(); i++) {
                JSONObject jsonObject = data.getJSONObject(i);
                entries.add(new PieEntry(jsonObject.getIntValue("value"),
                        jsonObject.getString("name")));
            }
            //设置数据
            loadData(entries, getHostView(),label);
        }
    
        /**
         * 设置中间显示的文字
         * @param data
         */
        @UniComponentProp(name = "centerText")
        public void setCenterText(String data) {
            getHostView().setCenterText(data);
            getHostView().invalidate();
        }
    
        /**
         * 设置标签的颜色
         * @param data
         */
        @UniComponentProp(name = "labelColor")
        public void setLabelColor(String data) {
            getHostView().setEntryLabelColor(Color.parseColor(data));
            getHostView().invalidate();
        }
    
        /**
         * 调用让饼图旋转
         */
        @UniJSMethod
        public void rotate() {
            getHostView().spin(1000, getHostView().getRotationAngle(), getHostView().getRotationAngle() + 360, Easing.EaseInCubic);
            getHostView().invalidate();
        }
    }

该组件的调用方式为：

**方法描述**  
`initComponentHostView`:使用该组件时，会自动调用该方法,返回一个你要扩展的原生组件  
`@UniComponentProp(name = "labelColor")`：给该组件添加一个属性,类似调用方式的`labelColor="#8A2BE2"`  
`@UniJSMethod`:声明一个该组件的方法,可以通过`this.refs.tPieChart.rotate()`，调用aging方法

1.  组件注册：这一部很重要，否则你的uniapp调用时根本找不到组件地址  
    `找到demo项目的app下面的assets目录`，修改dcloud\_uniplugins.json文件，注册自己的插件  
    
    
    ![11172442-d7cbb38569721811.png][]
    
    image.png

*  type:类型module还是component,这里是component
 *  name:插件名称，这个就是调用时使用的标签名
 *  class:反射时使用的类，就填写刚才扩展的类的全路径

1.  uniapp代码调用，使用HbuilderX打开SDK中得示例工程源码
    
      
    
    
    ![11172442-67da7fad8751dfe2.png][]
    
    image.png

*  获取appid:点击manifest.json，不获取打包的时候会提示当前appid不是你的
    
      
    
    
    ![11172442-133e2ff6e2fefe18.png][]
    
    image.png
 *  打开 simple下的ext-component扩展，修改代码如下
    
      
    
    
    ![11172442-c0789665067f66ce.png][]
    
    image.png

<template>
        <div>
            
            <tPieChart ref="tPieChart" :data="pieData" centerText="tyc饼状图" labelColor="#8A2BE2" style="width:300;height:300"  ></tPieChart>
            <myText ref="telText" tel="12305" style="width:200;height:100" @onTel="onTel" @click="rotatePie()"></myText>
        </div>
    </template>
    
    <script>  
        export default {  
            data() {  
                return {  
                    // 设置定义的饼状图数据
                    pieData:{
                        label:"人口年龄",
                            data:[
                                {
                                    value:20,
                                    name:"新生儿"
                                },
                                {
                                    value:30,
                                    name:"中年人"
                                },
                                {
                                    value:10,
                                    name:"中老年"
                                },
                                {
                                    value:40,
                                    name:"老年人"
                                }
                            ]
                        
                    }   
                }  
            },  
            onLoad() {  
            },  
            methods: {  
                onTel(e) {
                    console.log("onTel="+e.detail.tel);
                },
                myTextClick(e) {
                    this.$refs.telText.clearTel();
                },
                // 点击下面的文本扩展时会将饼状图旋转
                rotatePie(e) {
                    this.$refs.tPieChart.rotate();
                }
            }  
        }  
    </script>

1.  发布资源进行测试，点击发行，生成本地打包资源  
    
    
    ![11172442-eeb0cae5f17edab2.png][]
    
    image.png
    
      
    控制台查看生成状态  
    
    
    ![11172442-54e5ccdba73e7105.png][]
    
    image.png
    
      
    将生成的整个目录，`复制到androidstudio中app/assets/apps`  
    
    
    ![11172442-9cd6f10e137279b9.png][]
    
    image.png
2.  配置当前使用的是哪个app资源，因为当前apps下有多个uniapp资源，所以要告诉项目使用哪个资源，打开app/assets/data目录下的`dcloud_control.xml`,修改为刚才生成的资源的appid,设置与目录同名即可  
    
    
    ![11172442-a118a9877491ab2c.png][]
    
    image.png
3.  运行项目进行测试
    
      
    
    
    ![11172442-e34e1932fef377c2.gif][]
    
    Screenrecorder-2020-12-20-12-47-01-200.gif
    
      
    
    
    进入app后点击扩展component，进入刚才我们修改的页面，然后展示了饼状图，然后用手指按住饼状图进行旋转可以进行旋转(这是控件自带的),然后我点击了下面的文字，执行了自己的旋转方法。

#### 到这里component扩展就结束了，如果有帮助到你请点个赞吧，谢谢，下一篇为module扩展 ####

[uniapp_-android_-component]: https://www.jianshu.com/p/8cfbd24ae8d7
[11172442-e34e1932fef377c2.gif]: /images/20210825/482b170b5e0446e08a5ffdc4a7f241df.png
[11172442-f5f40ad3166410d6.png]: /images/20210825/698630a52ffa4b5692c8b1a09442879c.png
[11172442-509bef431c9f0c71.png]: /images/20210825/ef47c8c0439144f082c3b9dc2b75d66d.png
[11172442-85a870349798ea30.png]: /images/20210825/bc01ee1cf1e044f78537a579fa8059de.png
[11172442-03c5279d18bb9ba5.png]: /images/20210825/e57e39b4ebc9441da46129a6c7cfc7e2.png
[11172442-4a4ecffb9827db57.png]: /images/20210825/6101b2d86f174430802ab6636417955f.png
[11172442-d7cbb38569721811.png]: /images/20210825/667fea38af7840839dd52a8455c297c1.png
[11172442-67da7fad8751dfe2.png]: /images/20210825/19a6df85a3cd4f88914d7a56ea1b8079.png
[11172442-133e2ff6e2fefe18.png]: /images/20210825/6576817fe0784943b675b84fcb105031.png
[11172442-c0789665067f66ce.png]: /images/20210825/eb16c562161f4867a4c930953eb439cb.png
[11172442-eeb0cae5f17edab2.png]: /images/20210825/a248ebb9860c4a48bf75e28249c22f02.png
[11172442-54e5ccdba73e7105.png]: /images/20210825/d976f57d09af43138cc37b981cf1896e.png
[11172442-9cd6f10e137279b9.png]: /images/20210825/f9dd9ce736e54ebc9c43fade9422711b.png
[11172442-a118a9877491ab2c.png]: /images/20210825/179a9627cfca4d2487306908cd14d386.png