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

2020-12-20 本文已影响0人 eliteTyc

开始

打开SDK中的demo项目UniPlugin-Hello-AS``

image.png
project的build.gradle:新增仓库

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

image.png

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

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

将该模块作为依赖添加到主项目中，弹出框选择刚才新建的模块apply

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'
}

image.png

创建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();
    }
}

该组件的调用方式为：

<tPieChart ref="tPieChart" :data="pieData" centerText="tyc饼状图" labelColor="#8A2BE2" 
style="width:300;height:300"  ></tPieChart>

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

组件注册：这一部很重要，否则你的uniapp调用时根本找不到组件地址
找到demo项目的app下面的assets目录，修改dcloud_uniplugins.json文件，注册自己的插件
image.png

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

uniapp代码调用，使用HbuilderX打开SDK中得示例工程源码

image.png

获取appid:点击manifest.json，不获取打包的时候会提示当前appid不是你的

image.png
打开 simple下的ext-component扩展，修改代码如下

image.png

<template>
    <div>
        <!-- 调用饼状图 标签名跟刚才注册的name 一致 -->
        <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>

发布资源进行测试，点击发行，生成本地打包资源

image.png
控制台查看生成状态
image.png
将生成的整个目录，复制到androidstudio中app/assets/apps
image.png
配置当前使用的是哪个app资源，因为当前apps下有多个uniapp资源，所以要告诉项目使用哪个资源，打开app/assets/data目录下的dcloud_control.xml,修改为刚才生成的资源的appid,设置与目录同名即可

image.png
运行项目进行测试

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

进入app后点击扩展component，进入刚才我们修改的页面，然后展示了饼状图，然后用手指按住饼状图进行旋转可以进行旋转(这是控件自带的),然后我点击了下面的文字，执行了自己的旋转方法。

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

目录

开始

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

猜你喜欢

热点阅读