uni-app 原生插件 适用于安卓+IOS 圆环进度

v10086个人承接vue、uniapp、Python、java、nodejs项目，有案例，联系QQ：599194993，可接受外地工作，可付费提供技术支持。添加QQ时务必备注来意以及添加渠道，渠道可以写：uniapp

在uni-app中开发原生插件以实现圆环进度条功能，涉及到原生代码（Java/Kotlin用于Android，Swift/Objective-C用于iOS）与uni-app的交互。以下是一个简化的示例，展示如何为Android和iOS分别实现圆环进度条插件，并在uni-app中调用。

Android部分

1. 创建插件

   创建一个新的Android原生模块，比如MyCircleProgressView。

// MyCircleProgressView.java
package com.example.myplugin;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

public class MyCircleProgressView extends View {
    private Paint paint;
    private float progress = 0;

    public MyCircleProgressView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(50);
        paint.setAntiAlias(true);
    }

    public void setProgress(float progress) {
        this.progress = progress;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float radius = Math.min(getWidth(), getHeight()) / 2 - 50;
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, radius, paint);

        paint.setStrokeCap(Paint.Cap.ROUND);
        float sweepAngle = progress * 360;
        canvas.drawArc(getWidth() / 2 - radius, getHeight() / 2 - radius,
                getWidth() / 2 + radius, getHeight() / 2 + radius, -90, sweepAngle, false, paint);
    }
}

1. 与uni-app交互

   通过JSBridge与uni-app通信，设置进度值。

iOS部分

1. 创建插件

   使用Swift创建一个自定义UIView，比如CircleProgressView。

// CircleProgressView.swift
import UIKit

class CircleProgressView: UIView {
    var progress: CGFloat = 0 {
        didSet {
            setNeedsDisplay()
        }
    }

    override func draw(_ rect: CGRect) {
        let centerX = bounds.midX
        let centerY = bounds.midY
        let radius: CGFloat = min(bounds.width, bounds.height) / 2 - 25

        let trackLayer = CAShapeLayer()
        trackLayer.path = UIBezierPath(arcCenter: CGPoint(x: centerX, y: centerY),
                                        radius: radius,
                                        startAngle: -CGFloat.pi / 2,
                                        endAngle: 2 * CGFloat.pi - CGFloat.pi / 2,
                                        clockwise: true).cgPath
        trackLayer.strokeColor = UIColor.lightGray.cgColor
        trackLayer.lineWidth = 50
        trackLayer.fillColor = UIColor.clear.cgColor
        layer.addSublayer(trackLayer)

        let progressLayer = CAShapeLayer()
        progressLayer.path = UIBezierPath(arcCenter: CGPoint(x: centerX, y: centerY),
                                          radius: radius,
                                          startAngle: -CGFloat.pi / 2,
                                          endAngle: CGFloat(progress * 2 * CGFloat.pi - CGFloat.pi / 2),
                                          clockwise: true).cgPath
        progressLayer.strokeColor = UIColor.blue.cgColor
        progressLayer.lineWidth = 50
        progressLayer.fillColor = UIColor.clear.cgColor
        progressLayer.strokeEnd = progress
        layer.addSublayer(progressLayer)
    }
}

uni-app调用

在uni-app中，通过plus.android.importClass或plus.ios.importClass导入相应的原生类，并调用其方法。注意，这里仅展示了概念性代码，实际开发中需要处理更多细节，如插件注册、权限申请等。