鸿蒙开发-ArkTS 语言（二）— ArkUI组件

已于 2024-02-22 17:47:57 修改
阅读量1.8k 收藏 23
点赞数 25
分类专栏： 鸿蒙开发 文章标签： harmonyos 华为
于 2024-02-22 12:56:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73838866/article/details/136223439
版权

一.Image:图片显示组件

1.声明Image组件并设置图片源:

Image(src: string| PixelMap| Resource)

加载图片资源
  • 本地资源
Image('images/view.jpg')
.width(200)
  •  网络资源   引入网络图片需申请权限ohos.permission.INTERNET。

 如何申请权限ohos.permission.INTERNET：需要在module.json5配置文件中声明权限。

"requestPermissions": [
      {
        "name": 'ohos.permission.INTERNET'
      }
    ]
Image('https://www.example.com/example.JPG')
  • Resource资源

使用资源格式可以跨包/跨模块引入图片，resources文件夹下的图片都可以通过$r资源接口读取到并转换到Resource格式。

图1 resources

调用方式：

Image($r('app.media.icon'))

还可以将图片放在rawfile文件夹下。

图2 rawfile

 调用方式：

Image($rawfile('snap'))

 2.添加图片属性

Image($r('app.media.icon'))
   .width(100)//宽度
   .height(120)//高度
   .borderRadius(10)//边框圆角
   .interpolation(ImageInterpolation.High)//图片插值

更多查看官方文档：显示图片（Image）-显示图形-基于ArkTS的声明式开发范式-UI开发-开发-HarmonyOS应用开发 

二.Text:文本显示组件

1.声明Text组件并设置文本内容

Text(content?:string| Resource)

 创建文本

  • string格式，直接填写文本内容
Text('图片宽度')
  • Resource格式，读取本地资源文件

资源引用类型可以通过$r创建Resource类型对象，文件位置为/resources/base/element/string.json。

Text($r('app.string.width_label'))

2. 添加文本属性

Text('注册账号!')
   .lineHeight(32)//行高fontsize(20)//字体大小
   .fontColor('#ff1876f8')//字体颜色
   .fontWeight(FontWeight.Medium)//字体粗细

更多查看官方文档：文本显示（Text/Span）-添加常用组件-添加组件-基于ArkTS的声明式开发范式-UI开发-开发-HarmonyOS应用开发

三.TextInput:文本输入框 

1.声明TextInput组件:

TextInput( {placeholder?: Resourcestr,text?: ResourceStr})

  • 单行输入框 
TextInput()

  •  多行输入框
TextArea({text:"我是TextArea我是TextArea我是TextArea我是TextArea"}).width(300)

  

 2.添加属性和事件

TextInput({text:'当前输入文本'})
   .width(150)//宽
   .height(30)//高
   .backgroundcolor('#FFF')//背最色
   .type(InputType.Password)//输入框类型
   .onChange(value =>{
     //value是用户输入的文本内容
    })

TextInput有5种可选类型，分别为Normal基本输入模式、Password密码输入模式、Email邮箱地址输入模式、Number纯数字输入模式、PhoneNumber电话号码输入模式。通过type属性进行设置：

  • 密码输入模式
TextInput()
  .type(InputType.Password)

更多查看官方文档：文本输入（TextInput/TextArea）-添加常用组件-添加组件-基于ArkTS的声明式开发范式-UI开发-开发-HarmonyOS应用开发

四.Button:按钮组件 

1.创建按钮

创建不包含子组件的按钮。 
Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })

该接口用于创建不包含子组件的按钮，其中label用来设置按钮文字，type用于设置Button类型，stateEffect属性设置Button是否开启点击效果。

Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 
  .borderRadius(8) 
  .backgroundColor(0x317aff) 
  .width(90)
  .height(40)

创建包含子组件的按钮。
Button({ type: ButtonType.Normal, stateEffect: true }) {
  Row() {
    Image($r('app.media.loading')).width(20).height(40).margin({ left: 12 })
    Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
  }.alignItems(VerticalAlign.Center)
}.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)

设置按钮类型 

Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆形按钮）和Normal（普通按钮），通过type进行设置。

//胶囊按钮（默认类型）此类型按钮的圆角自动设置为高度的一半，不支持通过borderRadius属性重新设置圆角。
Button('Disable', { type: ButtonType.Capsule, stateEffect: false }) 
  .backgroundColor(0x317aff) 
  .width(90)
  .height(40)

//圆形按钮 此类型按钮为圆形，不支持通过borderRadius属性重新设置圆角。
Button('Circle', { type: ButtonType.Circle, stateEffect: false }) 
  .backgroundColor(0x317aff) 
  .width(90) 
  .height(90)

//普通按钮 此类型的按钮默认圆角为0，支持通过borderRadius属性重新设置圆角。
Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 
  .borderRadius(8) 
  .backgroundColor(0x317aff) 
  .width(90)
  .height(40)

2.添加属性和事件

Button('点我')
  .width(100)
  .height(30)type(ButtonType.Normal)// 按钮类型
  .onclick(()=>{
   //处理点击事件
  })

更多查看官方文档：按钮（Button）-添加常用组件-添加组件-基于ArkTS的声明式开发范式-UI开发-开发-HarmonyOS应用开发

五.Slider:滑动条组件

Slider({
    min:0，//最小值
    max:100，//最大值
    value:40，//当前值
    step:10，//滑动步长
    style: sliderstyle.0utset,// InSet
    direction: Axis.Horizontal,//Vertical
    reverse:false//是否反向滑动
  })
    .width('90%')
    .showTips(true)//是否展示value百分比提示
    .blockColor('#36d')
    .onChange(value =>{
    //value就是当前滑块值
  })

更多查看官方文档：slider-基础组件-组件参考（兼容JS的类Web开发范式-ArkUI.Full）-ArkTS API参考-HarmonyOS应用开发

 六.Column与Row

1.纵向布局使用Column容器，横向布局采用Row容器

 2.justifyContent和alignItems分别用来设置主轴和交叉轴的对齐方式

 

示例：

@Entry
@Component
struct ColumnExample {
  build() {
    Column({ space: 5 }) {
      // 设置子元素垂直方向间距为5
      Text('space').width('90%')
      Column({ space: 5 }) {
        Column().width('100%').height(30).backgroundColor(0xAFEEEE)
        Column().width('100%').height(30).backgroundColor(0x00FFFF)
      }.width('90%').height(100).border({ width: 1 })

      // 设置子元素水平方向对齐方式
      Text('alignItems(Start)').width('90%')
      Column() {
        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
        Column().width('50%').height(30).backgroundColor(0x00FFFF)
      }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 })

      Text('alignItems(End)').width('90%')
      Column() {
        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
        Column().width('50%').height(30).backgroundColor(0x00FFFF)
      }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 })

      Text('alignItems(Center)').width('90%')
      Column() {
        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
        Column().width('50%').height(30).backgroundColor(0x00FFFF)
      }.alignItems(HorizontalAlign.Center).width('90%').border({ width: 1 })

      // 设置子元素垂直方向的对齐方式
      Text('justifyContent(Center)').width('90%')
      Column() {
        Column().width('90%').height(30).backgroundColor(0xAFEEEE)
        Column().width('90%').height(30).backgroundColor(0x00FFFF)
      }.height(100).border({ width: 1 }).justifyContent(FlexAlign.Center)

      Text('justifyContent(End)').width('90%')
      Column() {
        Column().width('90%').height(30).backgroundColor(0xAFEEEE)
        Column().width('90%').height(30).backgroundColor(0x00FFFF)
      }.height(100).border({ width: 1 }).justifyContent(FlexAlign.End)
    }.width('100%').padding({ top: 5 })
    RowExample()
  }
}


@Component
struct RowExample {
  build() {
    Column({ space: 5 }) {
      // 设置子组件水平方向的间距为5
      Text('space').width('90%')
      Row({ space: 5 }) {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.width('90%').height(107).border({ width: 1 })

      // 设置子元素垂直方向对齐方式
      Text('alignItems(Bottom)').width('90%')
      Row() {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 })

      Text('alignItems(Center)').width('90%')
      Row() {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 })

      // 设置子元素水平方向对齐方式
      Text('justifyContent(End)').width('90%')
      Row() {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End)

      Text('justifyContent(Center)').width('90%')
      Row() {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center)
    }.width('100%')
  }
}

 更多查看官方文档：Column-容器组件-组件参考（基于ArkTS的声明式开发范式）-ArkTS API参考-HarmonyOS应用开发

 Row-容器组件-组件参考（基于ArkTS的声明式开发范式）-ArkTS API参考-HarmonyOS应用开发

 七.循环控制

1.ForEach:循环遍历数组，根据数组内容渲染页面组件

 2.if/else:条件控制，根据数据状态的不同，染不同的页面组件

 

 更多查看官方文档：if/else：条件渲染-渲染控制-学习ArkTS语言-入门-HarmonyOS应用开发 

 八.List

列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。

List({space:7}){
        ForEach(
          this.items,//循环数组
          (item:Item) => {
            ListItem(){ //List子组件
              ...
            }
          }
        )
      }
      .width('100%')
      .layoutWeight(1) // 设置权重
      .alignListItem(ListItemAlign.Center) //使List居中

更多查看官方文档：List-容器组件-组件参考（基于ArkTS的声明式开发范式）-ArkTS API参考-HarmonyOS应用开发

 九.页面路由

页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOS提供了Router模块，通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。

  •  页面栈的最大容量为32个页面。如果超过这个限制，可以调用router.clear()方法清空历史页面栈，释放内存空间。

Router模块提供了两种跳转模式，分别是router.pushUrl()和router.replaceUrl()。这两种模式决定了目标页是否会替换当前页。

  • router.pushUrl()：目标页不会替换当前页，而是压入页面栈。这样可以保留当前页的状态，并且可以通过返回键或者调用router.back()方法返回到当前页。
  • router.replaceUrl()：目标页会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。

同时，Router模块提供了两种实例模式，分别是Standard和Single。

  • Standard：标准实例模式，也是默认情况下的实例模式。每次调用该方法都会新建一个目标页，并压入栈顶。

  • Single：单实例模式。即如果目标页的url在页面栈中已经存在同url页面，则离栈顶最近的同url页面会被移动到栈顶，并重新加载；如果目标页的url在页面栈中不存在同url页面，则按照标准模式跳转。

1.首先要导入HarmonyOS提供的Router模块

import router from '@ohos.router';

2.然后利用router实现跳转、返回等操作:

router.pushUrl({
    url: 'pages/Detail' // 目标url
  }, 
    router.RouterMode.Standard,//页面模式:RouterMode枚举
    (err) => {
       if (err) {
         console.error(err);//异常响应回调函数
      return;
    }
    console.info('succeeded.');
  });

3.可以使用以下几种方式进行页面返回：

返回提示
//返回确认提示
router.showAlertBeforeBackPage({
    message:"确定返回吗?"
})
方式一：返回到上一个页面。 
router.showAlertBeforeBackPage({
    message:"确定返回吗?"
})
//确定之后才会回退
router.back();

这种方式会返回到上一个页面，即上一个页面在页面栈中的位置。但是，上一个页面必须存在于页面栈中才能够返回，否则该方法将无效。 

方式二：返回到指定页面。
router.back({
  url: 'pages/Home'
});

这种方式可以返回到指定页面，需要指定目标页的路径。目标页必须存在于页面栈中才能够返回。

方式三：返回到指定页面，并传递自定义参数信息。
router.back({
  url: 'pages/Home',
  params: {
    info: '来自Home页'
  }
});

 这种方式不仅可以返回到指定页面，还可以在返回的同时传递自定义参数信息。这些参数信息可以在目标页中通过调用router.getParams()方法进行获取和解析。

 解析参数 
//获取传递过来的参数
onPageShow() {
  const params = router.getParams(); // 获取传递过来的参数对象
  const info = params['info']; // 获取info属性的值
}

更多查看官方文档：页面路由（router）-设置页面路由和组件导航-基于ArkTS的声明式开发范式-UI开发-开发-HarmonyOS应用开发

  十.页面动画 

1.属性动画  一加全部加

属性动画是通过设置组件的animation属性来给组件添加动画，当组件的width、height、opacity、backgroundcolor、scale、rotate、translate等属性变更时，可以实现渐变过渡效果。

Text('^_^')
 .position({
    x:10，// x轴坐标
    y:0// y轴坐标
})
 .rotate({
    angle:0，//旋转角度
    centerX:'50%'，// 旋转中心横坐标
    centerY:'50%'// 旋转中心纵坐标
})
 .animation({
    duration: 1000,
    curve: Curve,EaseInOut
)

2. 显式动画  更加灵活

显式动画是通过全局animateTo函数来修改组件属性，实现属性变化时的渐变过渡效果。

Text('^_^')
 .position({
    x:10，// x轴坐标
    y:0// y轴坐标
})
 .rotate({
    angle:0，//旋转角度
    centerX:'50%'，// 旋转中心横坐标
    centerY:'50%'// 旋转中心纵坐标
})
.onClick(()=>{
         animateTo(
           {duration:1000},
             ()=>{
               // 开始游戏，显示小鱼
               this.isBegin = true
             }
           )
        })

 3.组件转场动画

// 过度动画 显示动画
    .transition({
        type:TransitionType.Insert,
        opacity:0,
        translate:{x:-270}
    })

更多查看官方文档：布局更新动画-页面内的动画-使用动画-基于ArkTS的声明式开发范式-UI开发-开发-HarmonyOS应用开发 

realsec
关注
  • 25
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
鸿蒙系统开发入门与进阶，介绍ArkTS基础快速入门，ArkTS：是一门用于开发鸿蒙应用的编程语言 arkUi开发和使用等
06-24
ArkTS 是华为专门为鸿蒙操作系统（HarmonyOS）设计的一种编程语言，它基于 TypeScript，融合了 JavaScript 的灵活性和静态类型的强健性。 ArkTS 的主要目的是简化鸿蒙应用的开发过程，提高代码质量和可维护性。...
HarmonyOS移动应用开发（ArkTS版）课件PPT
11-14
HarmonyOS 移动应用开发（ArkTS版）是面向开发者的一门课程，旨在教授如何使用 ArkTS 语言在 HarmonyOS 上构建高效、跨平台的应用。本课程由刘安战、余雨萍、陈争艳三位专家编著，由清华大学出版社出版。 ArkTS 是 ...
HarmonyOS系统开发ArkTS常用组件图片及参数（四）
qq_41946216的博客
03-18 752
我们在使用resources下的资源时，无需指定具体的环境版本，系统会根据设备所处的环境自动选择匹配的版本，例如当设备系统语言为中文时，则会使用zh_CN目录下的资源，为英文时，则会使用en_US目录下的资源。resources 目录下，可能存在base、（zh_CN和en_US）、系统主题（dark和light）、设备类型（phone 和 tablet）和 rawfile 等适配不同的环境的不同版本的目录。用于存储任意格式的原始文件，需要注意的是rawfile不会根据设备所处的环境去匹配不同的资源。
鸿蒙APP开发--ArkUI组件
m0_63160843的博客
02-29 695
(1)声明Image组件并设置图片源：Image(src: string|PixelMap|Resource)//有三种声明方式string|PixelMap|Resource//下面有介绍string格式，通常用于加载网络图片,需要申请网络访问权限：ohos.permission.INTERENTPixelMap格式，可以加载像素图，常用在图片编辑中Resource格式，加载本地图片//使用$r是指的图片是在resources目录下的media目录的资源。
鸿蒙ArkTS声明式组件：【Image】
2401_82772199的博客
06-23 1340
Image为图片组件，常用于在应用中显示图片。Image支持加载\[PixelMap]、\[ResourceStr]和\[DrawableDescriptor]类型的数据源，支持png、jpg、bmp、svg和gif类型的图片格式。
HarmonyOS第三章：初识ArkTs/ArkUI，常用组件二
最新发布
to_the_Future的博客
06-25 1033
本文档详细介绍了在鸿蒙应用开发中使用@ohos.promptAction模块提供的几种弹窗功能，以及全局UI弹窗的使用方法，并探讨了组件状态管理和事件处理机制。
ArkTs自定义模版文件设置 DevEco Studio
m0_71898690的博客
12-04 639
当我们设置好了模版，然后在新建ArkTs文件的时候 比如新建一个DEMO的ArkTs文件。
鸿蒙HarmonyOS实战-ArkTS语言基础类库（XML）_鸿蒙arkts定义样式xml文件
2401_84160325的博客
04-12 364
3 1 // 3：对应事件类型END_TAG值为3 1：深度为1（与）0 0 // 0：
鸿蒙HarmonyOS实战-ArkTS语言基础类库（XML）_鸿蒙arkts定义样式xml文件(1)
2401_84181975的博客
04-14 876
在XML中使用XML Schema定义结构的方式是使用一个独立的XML Schema文件，该文件定义了你希望XML文档符合的结构规范。首先，创建一个XML Schema文件，例如"example.xsd"。在该文件中定义你的元素、属性和数据类型。-- 在这里定义你的元素、属性和数据类型 -->接下来，在你的XML文档中引用该XML Schema文件，以使XML文档与定义的结构匹配。为此，在XML文档的根元素上添加一个xmlns:xsi属性和属性。xmlns:xsi属性指定XML命名空间xsi的定义，
华为鸿蒙Harmony开眼App（项目整体基于Api9+ArkTs+ArkUI）.zip
02-07
【华为鸿蒙HarmonyOS开发】是华为推出的一款面向全场景的分布式操作系统，旨在打破不同设备之间的界限，实现跨平台、跨设备的无缝协同体验。HarmonyOS采用微内核设计，强调安全性、高效率和低延迟，尤其适用于物联网...
鸿蒙学习第二篇—了解 ArkTS 语言.pdf
12-17
【鸿蒙学习第二篇—了解 ArkTS 语言】 在鸿蒙操作系统中， ArkTS 是一种专为鸿蒙系统设计的高级编程语言，它基于 JavaScript 和 TypeScript，并在其基础上进行了扩展和优化，以适应鸿蒙系统跨平台、高性能的需求。 ...
基于Api9+Stage模式+ArkTs+ArkUI的华为鸿蒙Harmony开眼App
04-24
华为鸿蒙Harmony开眼App（项目整体基于Api9+Stage模式+ArkTs+ArkUI） 鸿蒙Harmony版本开眼APP，具体包含功能如下： 1、常用组件的提取； 2、网络请求的基础封装(基于axios)； 3、封装项目页面多状态（加载中，成功，...
鸿蒙ArkTs中引入阿里巴巴图标库svg图标时fillColor不能改变图标颜色
weixin_55973411的博客
12-20 1197
在ArkTs项目引入阿里巴巴图标库的svg图标直接使用fillColor不能直接修改图标的颜色。是因为直接引入阿里巴巴图标会缺少一个属性，需要手动添加这个属性才能实现改变图标的颜色。点击引入的svg图标 添加fill这个属性。
ArkTS基础学习笔记
Glubin的博客
11-12 551
ArkTS基础知识学习笔记，摘抄自官方文档
【HarmonyOS】鸿蒙Arkts修改svg图标颜色【已解决】
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
03-07 1501
沉默小管 鸿蒙Arkts修改svg图标颜色
【OpenHarmony】ArkTS 语法基础 ② ( ArkTS 自定义组件 | 自定义可导入组件 - export 声明模块 | 导入自定义组件 - import 导入组件 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
06-03 1115
一、ArkTS 自定义组件 1、@Component 装饰器 2、自定义组件语法 3、将自定义组件设置为页面入口 二、ArkTS 使用外部自定义组件 1、自定义可导入组件 - export 声明模块 2、导入自定义组件 - import 导入组件
鸿蒙开发学习 （一）- 第一个ArkTS应用
m0_56255097的博客
01-16 1168
小编为此特别准备了一份联合鸿蒙官方发布笔记整理收纳的《鸿蒙开发学习笔记》以及学习路线图，内容包含ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。【有需要的朋友，可以扫描下方二维码免费领取哦~】
【鸿蒙开发】第五章 ArkTS基础知识 - 声明变量、常量、类型和函数
热门推荐
Yvan
12-11 1万+
if语句的条件支持非boolean值，对于boolean以外的类型，会进行隐式类型转换，null、undefined、空字符串、0等默认值都为fasleArkTS声明的变量、常量、类型、函数都跟TypeScript的大致基本相同，与Java也极其相似。所以如果是有一定语言基础的小伙伴，学习ArkTS的语法毫无难度，基本按照官方文档提供的指引学习即可，后面章节我们会继续记录ArkTS的学习。
HarmonyOS系统开发ArkTS入门案例及组件（三）
qq_41946216的博客
03-18 1446
提高代码复用性@Component 装饰器：装饰 struct 关键字声明的数据结构@Entry 装饰器：标识该组件为组件树的根节点，也就是一个页面入口组件struct：ArkTS用于自定义组件或者自定义定义弹窗的关键字，与结构类相似build() build() 用于声明自定义组件的UI结构组件属性：定义组件的属性。
鸿蒙开发 java arkts怎么选
10-09
对于鸿蒙开发中的Java ArkTS选项，您可以按照以下步骤进行选择： 1. 首先，确认您是否需要在鸿蒙系统上运行Java应用程序。如果您的应用程序需要使用Java语言编写，并依赖于Java生态系统中的库和框架，那么选择Java ArkTS是一个不错的选择。 2. 接下来，了解Java ArkTS的特性和功能。Java ArkTS是鸿蒙系统上的一种运行环境，它支持Java语言和Java虚拟机（JVM）。它提供了类似于传统Java平台的API和工具，并与鸿蒙系统的其他组件进行集成。 3. 确认您的开发团队是否具备Java开发经验和技能。如果您的团队已经熟悉Java开发，并且有相关的经验和技术能力，那么选择Java ArkTS将更容易上手和开发。 4. 最后，评估您的应用程序对性能和资源的要求。Java ArkTS在性能方面可能不如原生鸿蒙应用程序或者其他语言开发的应用程序。如果您的应用程序对性能和资源消耗有较高的要求，您可能需要考虑其他开发选项。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值