HarmonyOS 应用开发-ArkUI事件机制

最新推荐文章于 2024-09-08 10:00:00 发布
最新推荐文章于 2024-09-08 10:00:00 发布
阅读量1.4k 收藏 11
点赞数 23
分类专栏： OpenHarmony HarmonyOS 移动开发 文章标签： harmonyos 华为 鸿蒙开发 ui arkUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maniuT/article/details/137512485
版权
移动开发 同时被 3 个专栏收录
955 篇文章 12 订阅
订阅专栏
HarmonyOS
871 篇文章 15 订阅
订阅专栏
OpenHarmony
694 篇文章 17 订阅
订阅专栏

ArkUI提供了事件机制，这些事件提供了不同的信息用于处理程序交互逻辑，ArKUI事件按照功能来讲，可以分为以下几种：

  • 点击事件
  • 触摸事件
  • 挂载卸载事件
  • 拖拽事件
  • 按键事件
  • 焦点事件
  • 鼠标事件
  • 组件区域变化事件
  • 组件可见区域变化事件
  • 组件快捷键事件

按照事件触发后是否向父节点传递，事件可以分为：

  • 冒泡事件：是当一个组件上的事件被触发后，该事件向父节点传递。
  • 非冒泡事件：是当一个组件上的事件被触发后，该事件不会向父节点传递。

示例讲解

下面以组件区域变化事件为例，结合代码进行分析。

组件区域变化事件介绍

当UI组件大小、位置发生变化时触发该事件，应用可以通过该事件箭头UI组件的大小位置变化，该事件属于非冒泡事件。

示例代码

// xxx.ets
@Entry
@Component
struct AreaExample {
  @State value: string = 'Text'
  @State sizeValue: string = ''

  build() {
    Column() {
      Text(this.value)
        .backgroundColor(Color.Green).margin(30).fontSize(20)
        .onClick(() => {
          this.value = this.value + 'Text'
        })
        .onAreaChange((oldValue: Area, newValue: Area) => {
          console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
          this.sizeValue = JSON.stringify(newValue)
        })
      Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 })
    }
    .width('100%').height('100%').margin({ top: 30 })
  }
}

示例效果：

每次点击Text框，Text组件区域大小都发生变化，每次将位置信息打印到控制台。

在上述示例代码中，Text组件通过绑定onAreaChange实现了对组件区域变化事件的监听，onAreaChange事件的入参位一个回调函数，该回调函数在Text组件区域发生变化时进行调用。

代码实现原理分析

1. 编译后生成的JS代码

"use strict";
class AreaExample extends ViewPU {
    constructor(parent, params, __localStorage, elmtId = -1) {
        super(parent, __localStorage, elmtId);
        this.__value = new ObservedPropertySimplePU('Text', this, "value");
        this.__sizeValue = new ObservedPropertySimplePU('', this, "sizeValue");
        this.setInitiallyProvidedValue(params);
    }
    setInitiallyProvidedValue(params) {
        if (params.value !== undefined) {
            this.value = params.value;
        }
        if (params.sizeValue !== undefined) {
            this.sizeValue = params.sizeValue;
        }
    }
    updateStateVars(params) {
    }
    purgeVariableDependenciesOnElmtId(rmElmtId) {
        this.__value.purgeDependencyOnElmtId(rmElmtId);
        this.__sizeValue.purgeDependencyOnElmtId(rmElmtId);
    }
    aboutToBeDeleted() {
        this.__value.aboutToBeDeleted();
        this.__sizeValue.aboutToBeDeleted();
        SubscriberManager.Get().delete(this.id__());
        this.aboutToBeDeletedInternal();
    }
    get value() {
        return this.__value.get();
    }
    set value(newValue) {
        this.__value.set(newValue);
    }
    get sizeValue() {
        return this.__sizeValue.get();
    }
    set sizeValue(newValue) {
        this.__sizeValue.set(newValue);
    }
    initialRender() {
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Column.create();
            Column.width('100%');
            Column.height('100%');
            Column.margin({ top: 30 });
            if (!isInitialRender) {
                Column.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Text.create(this.value);
            Text.backgroundColor(Color.Green);
            Text.margin(30);
            Text.fontSize(20);
            Text.onClick(() => {
                this.value = this.value + 'Text';
            });
            Text.onAreaChange((oldValue, newValue) => {
                console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`);
                this.sizeValue = JSON.stringify(newValue);
            });
            if (!isInitialRender) {
                Text.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        Text.pop();
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Text.create('new area is: \n' + this.sizeValue);
            Text.margin({ right: 30, left: 30 });
            if (!isInitialRender) {
                Text.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        Text.pop();
        Column.pop();
    }
    rerender() {
        this.updateDirtyElements();
    }
}
ViewStackProcessor.StartGetAccessRecordingFor(ViewStackProcessor.AllocateNewElmetIdForNextComponent());
loadDocument(new AreaExample(undefined, {}));
ViewStackProcessor.StopGetAccessRecording();
//# sourceMappingURL=Index.js.map

代码分为两部分，一部分为定义了AreaExample的类，第二部分是js的入口执行程序，详细内容参考ArkUI框架学习。我们这里重点关注Text.onAreaChange方法。

2. JS与C++代码的绑定关系

Text组件对应到ace_engine后端引擎中的JSText类:


class JSText : public JSContainerBase {
public:
    static void JSBind(BindingTarget globalObj);
    static void Create(const JSCallbackInfo& info);
    static void SetWidth(const JSCallbackInfo& info);
    static void SetHeight(const JSCallbackInfo& info);
    static void SetFont(const JSCallbackInfo& info);
    static void GetFontInfo(const JSCallbackInfo& info, Font& font);
    static void SetFontSize(const JSCallbackInfo& info);
    static void SetFontWeight(const std::string& value);
    static void SetTextColor(const JSCallbackInfo& info);
    static void SetTextShadow(const JSCallbackInfo& info);
    static void SetTextOverflow(const JSCallbackInfo& info);
    static void SetMaxLines(const JSCallbackInfo& info);
    static void SetTextIndent(const JSCallbackInfo& info);
    static void SetFontStyle(int32_t value);
    static void SetAlign(const JSCallbackInfo& info);
    static void SetTextAlign(int32_t value);
    static void SetLineHeight(const JSCallbackInfo& info);
    static void SetFontFamily(const JSCallbackInfo& info);
    static void SetMinFontSize(const JSCallbackInfo& info);
    static void SetMaxFontSize(const JSCallbackInfo& info);
    static void SetLetterSpacing(const JSCallbackInfo& info);
    static void SetTextCase(int32_t value);
    static void SetBaselineOffset(const JSCallbackInfo& info);
    static void SetDecoration(const JSCallbackInfo& info);
    static void SetCopyOption(const JSCallbackInfo& info);
    static void SetHeightAdaptivePolicy(int32_t value);
    static void JsOnClick(const JSCallbackInfo& info);
    static void JsRemoteMessage(const JSCallbackInfo& info);
    static void JsOnDragStart(const JSCallbackInfo& info);
    static void JsOnDragEnter(const JSCallbackInfo& info);
    static void JsOnDragMove(const JSCallbackInfo& info);
    static void JsOnDragLeave(const JSCallbackInfo& info);
    static void JsOnDrop(const JSCallbackInfo& info);
    static void JsFocusable(const JSCallbackInfo& info);
    static void JsDraggable(const JSCallbackInfo& info);
    static void JsMenuOptionsExtension(const JSCallbackInfo& info);

private:
    static RefPtr<TextComponentV2> GetComponent();
};

查看代码发现JSText中未直接定义onAreaChange方法，在JSText::bind中也未绑定相关的方法，结合onAreaChange方法不止在Text组件中使用，也可以在其他组件中使用，因此继续往JSText继承的基类中找。

class JSContainerBase : public JSViewAbstract, public JSInteractableView {
public:
    static void Pop();
    static void JSBind(BindingTarget globalObj);
};

继续往上层找，发现在JSViewAbstract中定义了JsOnAreaChange方法：

class JSViewAbstract {
    // 忽略掉其他不相关代码片段
     static void JsOnAreaChange(const JSCallbackInfo& info);
}

在 JSViewAbstract::JSBind中实现了JS代码与C++代码的绑定关系

void JSViewAbstract::JSBind(BindingTarget globalObj)
{
    JSClass<JSViewAbstract>::Declare("JSViewAbstract");
    
    JSClass<JSViewAbstract>::StaticMethod("onAreaChange", &JSViewAbstract::JsOnAreaChange);

}

3. ArkTS onAreaChange接口定义

接口在interface/sdk-js/api/@internal/component/ets/common.d.ts中进行定义，两个参数，一个位变化前的组件区域信息，另一个为变化后的组件区域信息。

/**
* This callback is triggered when the size or position of this component change finished.
*
* @param { function } event event callback.
* @returns { T }
* @syscap SystemCapability.ArkUI.ArkUI.Full
* @crossplatform
* @since 10
*/
onAreaChange(event: (oldValue: Area, newValue: Area) => void): T;

4.前端回调函数保存逻辑

JSViewAbstract::JsOnAreaChange代码实现：

void JSViewAbstract::JsOnAreaChange(const JSCallbackInfo& info)
{
    if (info[0]->IsUndefined() && IsDisableEventVersion()) {
        LOGD("JsOnAreaChange callback is undefined");
        ViewAbstractModel::GetInstance()->DisableOnAreaChange();
        return;
    }
    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::FUNCTION };
    if (!CheckJSCallbackInfo("JsOnAreaChange", info, checkList)) {
        return;
    }
    auto jsOnAreaChangeFunction = AceType::MakeRefPtr<JsOnAreaChangeFunction>(JSRef<JSFunc>::Cast(info[0]));

    auto onAreaChanged = [execCtx = info.GetExecutionContext(), func = std::move(jsOnAreaChangeFunction)](
                             const Rect& oldRect, const Offset& oldOrigin, const Rect& rect, const Offset& origin) {
        JAVASCRIPT_EXECUTION_SCOPE_WITH_CHECK(execCtx);
        ACE_SCORING_EVENT("onAreaChange");
        func->Execute(oldRect, oldOrigin, rect, origin);
    };
    ViewAbstractModel::GetInstance()->SetOnAreaChanged(std::move(onAreaChanged));
}

关键点：
JSCallbackInfo为从JS前端传过来的参数，对参数合法性进行校验后，从这里面获取到绑定到onAreaChange上的回调函数以及回调函数，然后继续往ViewAbstractModel中传。

ViewAbstractModel是一个纯虚接口类，其实现有ViewAbstractModelNG和ViewAbstractModelImpl两个类，其中ViewAbstractModelNG位新的架构下的实现类，我们重点关注这个类的实现。

void SetOnAreaChanged(
    std::function<void(const Rect& oldRect, const Offset& oldOrigin, const Rect& rect, const Offset& origin)>&&
        onAreaChanged) override
{
    auto areaChangeCallback = [areaChangeFunc = std::move(onAreaChanged)](const RectF& oldRect,
                                  const OffsetF& oldOrigin, const RectF& rect, const OffsetF& origin) {
        areaChangeFunc(Rect(oldRect.GetX(), oldRect.GetY(), oldRect.Width(), oldRect.Height()),
            Offset(oldOrigin.GetX(), oldOrigin.GetY()), Rect(rect.GetX(), rect.GetY(), rect.Width(), rect.Height()),
            Offset(origin.GetX(), origin.GetY()));
    };
    ViewAbstract::SetOnAreaChanged(std::move(areaChangeCallback));
}

这里也没有做更多的东西，继续调用ViewAbstract::SetOnAreaChanged方法。
看下ViewAbstract::SetOnAreaChanged实现：

void ViewAbstract::SetOnAreaChanged(
    std::function<void(const RectF& oldRect, const OffsetF& oldOrigin, const RectF& rect, const OffsetF& origin)>&&
        onAreaChanged)
{   
    auto pipeline = PipelineContext::GetCurrentContext();
    CHECK_NULL_VOID(pipeline);
    auto frameNode = ViewStackProcessor::GetInstance()->GetMainFrameNode();
    CHECK_NULL_VOID(frameNode);
    frameNode->SetOnAreaChangeCallback(std::move(onAreaChanged));
    pipeline->AddOnAreaChangeNode(frameNode->GetId());
}

这里是关键点：

  1. 通过ViewStackProcessor获取到当前正在处理的frameNode，将前端一路传递过来的回调函数保存到frameNode中。
  2. 将frameNode的ID加入到渲染管线PipeContext中保存。
// FrameNode中保存回调函数，将回调函数保存到事件总线eventHub_
void FrameNode::SetOnAreaChangeCallback(OnAreaChangedFunc&& callback)
{
    if (!lastFrameRect_) {
        lastFrameRect_ = std::make_unique<RectF>();
    }
    if (!lastParentOffsetToWindow_) {
        lastParentOffsetToWindow_ = std::make_unique<OffsetF>();
    }
    eventHub_->SetOnAreaChanged(std::move(callback));
}

// 事件总线中保存回调函数
void EventHub::SetOnAreaChanged(OnAreaChangedFunc&& onAreaChanged)
{
    onAreaChanged_ = std::move(onAreaChanged);
}

//管线中保存FrameNode
void PipelineContext::AddOnAreaChangeNode(int32_t nodeId)
{
    onAreaChangeNodeIds_.emplace(nodeId);
}

6.回调函数调用处理

从上面的分析看，最终回调函数是保存在EventHub中的onAreaChanged_，那么只需要根据onAreaChanged_在哪里调用，然后再一路查看调用点，就可以看到详细的调用栈，这里不再贴详细的代码，直接贴出来最终的调用链：

PipelineContext::FlushVsync->PipelineContext::HandleOnAreaChangeEvent->FrameNode::TriggerOnAreaChangeCallback->EventHub::FireOnAreaChanged

从调用栈可以看到，在接受到底层vsync事件时，会触发PipelineContext::FlushVsync，之后按照上述的调用链，最终调用到前台绑定到Text.onAreaChange上的回调函数。

7. 代码分析总结

整体的类图关系如下：

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙开发学习手册》：

如何快速入门：https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识：https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题（含参考答案）：https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇（共计319页）：https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

OpenHarmony_小贾
关注
专栏目录
基于OpenHarmony/HarmonyOS操作系统的ArkUI框架深入学习
一键难忘的博客
09-23 2451
ArkUI是一套构建分布式应用界面的声明式UI开发框架。它使用极简的UI信息语法、丰富的UI组件、以及实时界面预览工具，帮助您提升HarmonyOS应用界面开发效率30%。您只需使用一套TS/JS API，就能在多个HarmonyOS设备上提供生动而流畅的用户界面体验。
HarmonyOS鸿蒙学习基础篇 - 自定义组件（一）_鸿蒙系统学习 csdn
2401_84166005的博客
04-13 808
自定义组件的创建：自定义组件的实例由ArkUI框架创建。初始化自定义组件的成员变量：通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量，初始化顺序为成员变量的定义顺序。如果开发者定义了aboutToAppear，则执行aboutToAppear方法。在首次渲染的时候，执行build方法渲染系统组件，如果子组件为自定义组件，则创建自定义组件的实例。在执行build()函数的过程中，框架会观察每个状态变量的读取状态，将保存两个map：状态变量 -> UI组件（包括ForEach和if）。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）控件的部分公共属性和事件
weixin_47730343的博客
12-18 1982
权重(layoutWeight)、对齐方式(align)、布局方向(direction对应的枚举。Ltr,Rtl,Auto)、相对定位(offset)、绝对定位(position)、鸿蒙（HarmonyOS）项目方舟框架（ArkUI）控件的部分公共属性和事件。设置组件的宽高，缺省时使用组件自身内容的宽高，比如充满父布局可以使用。操作系统: Windows 10 专业版。
组件区域变化（onAreaChange）事件
最新发布
m0_66179704的博客
09-08 174
组件区域变化时触发该回调。仅会响应由布局变化所导致的组件大小、位置发生变化时的回调。由绘制变化所导致的渲染属性变化不会响应回调，如。
【Harmony OS】【ARK UI】公共事件模块
华为开发者联盟
08-04 889
以异步方法订阅公共事件，使用callback形式返回。在调用subscriber接口订阅公共事件前，需要先通过createSubscriber接口创建一个CommonEventSubscriber对象。以异步方法取消订阅公共事件，使用callback形式返回。与subscribe接口相同，需要传入一个已创建的CommonEventSubscriber对象。以异步方法构造CommonEventSubscriber对象，创建公共事件订阅者对象，使用callback形式返回。订阅公共事件可选的配置信息。...
HarmonyOS NEXT实战开发：事件分发
hanyanyou的博客
07-28 644
ArkUI触控事件，根据输入源不同，主要划分为touch类与mouse类。
鸿蒙HarmonyOS实战-ArkUI事件（触屏事件）_arkui自定义触摸控件(1)
2401_84852027的博客
05-09 821
拖拽事件是一种用户交互行为，指的是在计算机中，用户通过鼠标或触摸屏按住某个元素，拖动它并释放的操作。开发者可以根据触摸事件的不同状态，执行相应的操作，例如在用户滑动屏幕时进行页面切换，或者在用户点击屏幕时进行按钮点击等。触摸事件可以包括触摸开始、触摸移动、触摸结束、触摸取消等不同的操作状态。.onDragMove((event: DragEvent, extraParams: string) => { //拖拽时移动。因为不好演示就不截图了。
HarmonyOS移动应用开发（ArkTS版）课件PPT
11-14
2. **第02章 第1个HarmonyOS应用**：引导开发者编写第一个 HarmonyOS 应用，通过实践来熟悉 ArkTS 语言和开发环境的设置，掌握基本的程序结构。 3. **第05章 组件**：详细讲解 HarmonyOS 中的组件系统，包括各种 UI...
HarmonyOS实战开发-如何打造购物商城APP。
2401_82546228的博客
04-26 4536
今天给大家分享一个非常好的实战项目，购物商城，购物商城是一个集购物、娱乐、服务于一体的综合性平台，致力于为消费者提供一站式的购物体验。各种功能都有涉及，最适合实现学习。
HarmonyOS实战开发-如何实现一个简单的健康生活应用（上）
2401_82546228的博客
03-31 1223
用户点击悬浮按钮进入任务列表页，点击任务列表可进入对应任务编辑的页面中，对任务进行详细的设置，之后点击完成按钮编辑任务后将返回首页。在组件CustomDialogView的aboutToAppear生命周期中注册SHOW_TASK_DETAIL_DIALOG的事件回调方法 ，当通过emit触发此事件时即触发回调方法执行。@Component// 成就对话框});// 任务时钟对话框});// 成就对话框});// 任务时钟对话框});build() {
[练习题+答案]Harmony OS应用开发者高级认证
06-01
- **知识点8**：ArkUI确实在HarmonyOS中作为声明式的开发范式出现，简化了界面构建过程，提升了开发效率。 #### 四、云函数与线程支持 - **知识点9**：云函数在打包完成后，通常不需要额外在AppGallery Connect...
鸿蒙HarmonyOS实战-ArkUI事件（触屏事件）
shudaoshanQAQ的博客
01-08 2078
触屏事件是指通过触摸屏幕来进行操作和交互的事件。常见的触屏事件包括点击（tap）、双击（double tap）、长按（long press）、滑动（swipe）、拖动（drag）等。
【愚公系列】2023年12月 HarmonyOS教学课程 040-ArkUI事件（组合手势）
热门推荐
时光隧道
12-18 6万+
应用程序的手势操作是指在移动设备上使用手指或手势进行与应用程序交互的方式。手势操作可以包括点击、滑动、双击、捏合等动作，用于实现不同的功能和操作。
Flutter 到 OpenHarmony,不是有手就行吗? (下拉刷新)
maniuT的博客
02-23 1333
五年前，有人告诉我，你可以错过其他技术，但千万不要错过Flutter。然而此刻，有人告诉我，如果你错过了 OpenHarmony，恐怕要错过下个时代了。作为发展了5年的 FlutterCandies 社区，我们已拥有70+的Flutter组件。我们当然也不会止步于Flutter。我们希望把我们的Flutter组件也能带到 OpenHarmony 生态当中，HarmonyCandies 便是为了这一刻。以Flutter开发者的角度，尽可能提供相同Api的 OpenHarmony 组件。
鸿蒙开发接口公共事件与通知：【FFI能力(Node-API)】
m0_62167422的博客
05-21 868
Node-API是封装底层JavaScript运行时能力的一套Native接口。
Flutter 到 OpenHarmony,不是有手就行吗 (下拉刷新)_flutter openharmony(1)
2401_84164503的博客
04-15 918
(组件都继承于该类，里面是一些公共的属性，事件)，虽然这样可以让编辑器有提示，并且不报错，但是运行起来依然会提示。中一样，父组件里面存放管理下拉刷新的状态，然后子组件里面监听状态，达到局部刷新的效果。在给组件定义参数的时候，会遇到这个参数不必须设置，但后续需要根据情况给它一个默认值。在给组件定义参数的时候，会遇到这个参数不必须设置，但后续需要根据情况给它一个默认值。我遇到的上架的问题主要是组织名称(当然，这是我自己猜的，后面会聊到这个)，中，我们可以通过定义参数为可空，然后在后续流程中判断这个参数是否为。
【HarmonyOS开发】探究Hap与App包的结构与区别
qq_23334071的博客
12-26 4228
OpenHarmony 可以进行两种形式（Hap和App）的打包，HAP是用于本地调试的，APP包是用于上架发布的。 根据不同的设备类型，一个APP包可以包含多个HAP包。
鸿蒙HarmonyOS实战-ArkUI事件（组合手势）(1)
2401_84160361的博客
04-12 504
滑动手势 | 在屏幕上快速滑动手指，可实现页面切换、滚动查看内容等功能 || 点击手势 | 轻触屏幕一次，可实现按钮点击、应用打开等功能 || 双击手势 | 连续快速点击屏幕两次，可实现放大图片、双击打开应用等功能 || 长按手势 | 在屏幕上长时间按住手指，可弹出上下文菜单或进行拖拽、复制等操作 || 捏合手势 | 使用两个手指在屏幕上同时向内或向外移动，可实现缩放、放大和缩小等功能 |
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值