【鸿蒙实战开发】鸿蒙next版开发基础布局

最新推荐文章于 2024-07-23 15:29:01 发布
最新推荐文章于 2024-07-23 15:29:01 发布
阅读量1.2k 收藏 25
点赞数 29
文章标签： harmonyos 华为 鸿蒙 鸿蒙开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HarmonyOS_001/article/details/140104925
版权

今日核心：

1.设计资源-图标库

2.属性：布局属性、背景属性

3.线性布局

1. 设计资源-图标库

HarmonyOS 图标库为 HarmonyOS 开发者提供丰富的在线图标资源，涵盖多种使用场景以及风格分类，提供灵活的颜色、大小和格式定义，满足不同角色的下载需求
在这里插入图片描述

使用步骤：设计师提供图标/下载图标 → 使用图标

1.1. 下载图标

●HarmonyOS 图标库
●IconFont 图标库

进入图标库网站，下载 SVG 格式，存储到工程目录：resources/base/media/
在这里插入图片描述

HarmonyOS 图标默认命名以 ic_ 开头，其他图标库下载的图标素材建议修改为与 HarmonyOS 命名规则相同。

1.2. 使用图标

使用 Image 组件显示图标，添加 fillColor() 属性修改图标颜色

@Entry
@Component
struct Index {
build() {
Column() {
  Image($r('app.media.ic_gallery_create'))
    .width(30)
    .aspectRatio(1)
    .fillColor('#f60')}
    .padding(20)
  }
}

2. 布局属性

组件布局
在这里插入图片描述
在这里插入图片描述

2.1. 内边距 padding

作用：在组件内添加间距，拉开内容与组件边缘之间的距离
属性：数字 或 对象{}

●数字：上下左右内边距相同
●对象{}：配合 left、right、top、bottom 单独设置某个方向内边距

@Entry 
@Component 
struct Index { 
  build() { 
    Column() { 
      Row() { 
        Text('文字1') 
          .backgroundColor(Color.Pink) 
          .margin(20) 
        Text('文字2') 
          .backgroundColor(Color.Orange) 
          .margin({ top: 10, right: 20, bottom: 40, left: 80 }) 
        } 
      } 
    } 
  }

2.2. 外边距 margin

作用：在组件外面添加间距，拉开两个组件之间的距离
属性：margin
属性：数字 或 对象{}

●数字：上下左右内边距相同
●对象{}：配合 left、right、top、bottom 单独设置某个方向内边距

@Entry 
@Component 
struct Index { 
  build() { 
    Column() { 
      Row() { 
        Text('文字1') 
          .backgroundColor(Color.Pink) 
          .margin(20) Text('文字2') 
          .backgroundColor(Color.Orange) 
          .margin({ top: 10, right: 20, bottom: 40, left: 80 
        }) 
      } 
    } 
  } 
}

2.3. 案例-QQ音乐登录

在这里插入图片描述

@Entry 
@Component 
struct Index { 
  build() { 
    Column() { 
      Image($r('app.media.ic_user')) 
        .width(100) 
        .margin({ bottom: 10 }) 
      Text('大王叫我来巡山') 
        .fontWeight(700) 
        .margin({ bottom: 40}) 
      Button('QQ登录') 
        .width('100%') 
        .backgroundColor('#367bf6') 
      Button('微信登录') 
        .width('100%') 
        .fontColor('#000') 
        .backgroundColor('#ddd') 
        .margin({ top: 10 }) 
      } 
      .padding(20) 
    } 
  }

2.4. 边框属性

2.4.1. 四个方向边框相同

属性：border()
参数：{width?: 数字, color?: ‘’, style?: BorderStyle}，
● width：边框宽度，边框宽度默认值为0，即不显示边框
● color：边框颜色
● style：边框样式，BorderStyle为枚举类型

Solid：实线（默认）
Dashed：虚线
Dotted：点线

@Entry 
@Component 
struct Index { 
  build() { 
    Column() { 
      Text('边框线') 
        .width(100) 
        .height(40) 
        .textAlign(TextAlign.Center) 
        // 黑色 实线 边框 
        .border({width: 1}) 
        // 红色 实线 边框 
        .border({width: 1, color: 'red'}) 
        // 红色 虚线 边框 
        .border({width: 1, color: 'red', style: BorderStyle.Dashed}) 
      } 
    .padding(20) 
  } 
}

2.4.2. 四个方向边框不同

书写方法
width、color、style 均可以通过top、right、bottom、left设置各个方向边框外观
示例代码

@Entry 
@Component 
struct Index {  
  build() { 
    Column() { 
      Text('边框线') 
        .width(100) 
        .height(40) 
        .textAlign(TextAlign.Center) 
        // 边框 - 四个方向效果不同 
        .border({ width: {left: 1, top: 3, right: 5, bottom: 7}
        .color: {left: 'red', top: '#ff0', right: '#f60', bottom: '#ccc'}
        .style: {top: BorderStyle.Dashed, right: BorderStyle.Dotted} 
      }) 
    } 
  .padding(20) 
  } 
}

2.5. 边框圆角

属性：borderRadius(圆角半径)
参数：数值 或 { }

topLeft：左上角
topRight：右上角
bottomLeft：左下角
bottomRight：右下角

@Component
struct Index {
  build() {
    Column({space: 20}) {
      Text('圆角1')
        .width(100)
        .height(40)
        .backgroundColor('#f60')
        .borderRadius(5)

// 胶囊状 圆角半径 = 高度 / 2

      Text('圆角2')
        .width(100)
        .height(40)
        .backgroundColor('#fc0')
        .borderRadius(20)

// 正圆 圆角半径 = 正方形尺寸 / 2
      Image($r('app.media.avatar'))
        .width(100)
        .aspectRatio(1)
        .borderRadius(50)

// 四个角半径不同写法
      Text('圆角3')
        .width(100)
        .height(40)
        .backgroundColor('#fc0')
        .borderRadius({
          topLeft: 5,
          topRight: 10,
          bottomRight: 20,
          bottomLeft: 40
      })
    }
  .padding(20)
  }
}

3. 背景属性

在这里插入图片描述

3.1. backgroundColor

设置组件的背景色

@Entry 
@Component 
struct Index { 
  build() { 
    Column() { 
      Text('组件') 
        .width(300) 
        .height(100) 
        .backgroundColor(Color.Pink) 
      } 
    .padding(20) 
  } 
}

组件添加宽高属性或有内容才能观察到背景色

3.2. backgroundImage

属性：backgroundImage(背景图地址, 背景图平铺方式 ImageRepeat)
背景图平铺方式：（可省略）
● NoRepeat：不平铺，默认值
● X：水平平铺
● Y：垂直平铺
● XY：水平垂直均平铺

@Entry 
@Component 
struct Index { 
  build() { 
    Column() { 
      Text('组件') 
        .width(300) 
        .height(100) 
        .backgroundColor(Color.Pink) 
        .backgroundImage($r('app.media.flower')) 
        .backgroundImage($r('app.media.flower'), ImageRepeat.X) 
      } 
    .padding(20) 
  } 
}

3.3. backgroundImageSize

作用：背景图缩放
属性：backgroundImageSize
参数：
● 设置背景图宽高尺寸：{width: 数值, height: 数值}（只设置宽或高，另一个尺寸等比例缩放）
● 枚举 ImageSize：

Cover：等比例缩放背景图至图片完全覆盖组件范围
Contain：等比例缩放背景图，当宽或高与组件尺寸相同则停止缩放
Auto：默认，原图尺寸

@Entry 
@Component 
struct Index { 
  build() { 
    Column() { 
      Text('组件') 
        .width(300) 
        .height(100) 
        .backgroundColor(Color.Pink) 
        .backgroundImage($r('app.media.flower')) 
        .backgroundImageSize({width: 100}) 
        .backgroundImageSize(ImageSize.Cover) 
        .backgroundImageSize(ImageSize.Contain) 
      } 
    .padding(20) 
  } 
}

3.4. backgroundImagePosition

作用：调整背景图在组件内的显示位置，默认显示位置为组件左上角
属性：backgroundImagePosition()
参数：
● 位置坐标： {x: 位置, y: 位置}
● 枚举 Alignment
在这里插入图片描述


@Entry 
@Component 
struct Index { 
  build() { 
    Column() { 
      Text('组件') 
        .width(300) 
        .height(100) 
        .backgroundColor(Color.Pink) 
        .backgroundImage($r('app.media.flower')) 
        .backgroundImagePosition({x: 100, y: 50}) 
        .backgroundImagePosition(Alignment.Center) 
      } 
    .padding(20) 
  } 
}

4. 线性布局

线性布局（LinearLayout）是开发中最常用的布局，通过线性容器 Row 和 Column 构建。Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。

4.1. 基本概念

● 布局容器：具有布局能力的容器组件，可以承载其他元素作为其子元素。
● 布局子元素：布局容器内部的元素。
● 主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为横向，Column容器主轴为纵向。
● 交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为纵向，Column容器交叉轴为横向。
● 间距：布局子元素的间距。

4.2. 主轴方向的间距

在布局容器内，可以通过 space 属性设置主轴方向上子元素的间距，使各子元素在主轴方向上有等间距效果。

4.2.1. Column

在这里插入图片描述

@Entry 
@Component 
struct Index { 
  build() { 
    Column({ space: 20}) { 
      Text('子元素1') 
        .width(100) 
        .height(40) 
        .backgroundColor(Color.Pink) 
      Text('子元素2') 
        .width(100) 
        .height(40) 
        .backgroundColor(Color.Orange) 
      Text('子元素3') 
        .width(100) 
        .height(40) 
        .backgroundColor(Color.Brown) 
      } 
    } 
  }

4.2.2. Row

在这里插入图片描述

@Entry 
@Component 
struct Index { 
 build() { 
   Row({ space: 20}) { 
     Text('子元素1') 
       .width(100) 
       .height(40) 
       .backgroundColor(Color.Pink) 
     Text('子元素2') 
       .width(100) 
       .height(40) 
       .backgroundColor(Color.Orange) 
     Text('子元素3') 
       .width(100) 
       .height(40) 
       .backgroundColor(Color.Brown) 
     } 
   } 
 }

4.3. 主轴对齐方式
属性：justifyContent()
参数：枚举FlexAlign

在这里插入图片描述
在这里插入图片描述

@Entry 
@Component 
struct Index { 
  build() { 
    Column() { 
      Text('子元素1') 
        .width(100) 
        .height(40) 
        .backgroundColor(Color.Pink) 
      Text('子元素2') 
        .width(100) 
        .height(40) 
        .backgroundColor(Color.Orange) 
      Text('子元素3') 
        .width(100) 
        .height(40) 
        .backgroundColor(Color.Brown) 
      } 
    .width('100%') 
    .height(300) 
    .backgroundColor('#ccc') 
    // 首端对齐 
    .justifyContent(FlexAlign.Start) 
    // 居中对齐 .justifyContent(FlexAlign.Center) 
    // 尾部对齐 .justifyContent(FlexAlign.End) 
    // 第一个元素与行首对齐，最后一个元素与行尾对齐 
    .justifyContent(FlexAlign.SpaceBetween) 
    // 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半
    .justifyContent(FlexAlign.SpaceAround) 
    // 相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样
    .justifyContent(FlexAlign.SpaceEvenly) 
  } 
}

Column 与 Row 组件的 justifyContent 属性效果相似

4.4. 交叉轴对齐方式

属性：alignItems()
参数：枚举类型

交叉轴在水平方向：HorizontalAlign → Column
交叉轴在垂直方向：VerticalAlign→ Row

注意：布局容器在交叉轴要有足够空间，否则无法生效

4.4.1. Column

在这里插入图片描述

@Entry 
@Component 
struct Index { 
  build() { 
    Column({ space: 20}) { 
      Text('子元素1') 
        .width(100) 
        .height(40) 
        .backgroundColor(Color.Pink) 
      Text('子元素2') 
        .width(100) 
        .height(40) 
        .backgroundColor(Color.Orange) 
      Text('子元素3') 
      .width(100) 
      .height(40) 
      .backgroundColor(Color.Brown) 
    } 
    .width('100%') 
    // 默认左对齐 
    .alignItems(HorizontalAlign.Start) 
    // 居中 
    .alignItems(HorizontalAlign.Center) 
    // 右对齐 
    .alignItems(HorizontalAlign.End) } }

4.4.2. Row

在这里插入图片描述

@Entry 
@Component 
struct Index {
  build() { 
    Row({ space: 20}) { 
      Text('子元素1') 
        .width(100) 
        .height(40) 
        .backgroundColor(Color.Pink) 
      Text('子元素2') 
        .width(100) 
        .height(40) 
        .backgroundColor(Color.Orange) 
      Text('子元素3') 
        .width(100) 
        .height(40) 
        .backgroundColor(Color.Brown) } 
        .width('100%') .height(100) 
        .backgroundColor('#ccc') 
        // 默认顶对齐 
        .alignItems(VerticalAlign.Top) 
        // 居中 
        .alignItems(VerticalAlign.Center)
        // 底对齐
        .alignItems(VerticalAlign.Bottom) 
      } 
    }

4.5. 单个子元素交叉轴对齐方式

属性：alignSelf()
参数：枚举ItemAlign(Stretch拉伸，交叉轴拉伸效果)

4.6. 自适应缩放

父容器尺寸确定时，设置了 layoutWeight 属性的子元素与兄弟元素占主轴尺寸按照权重进行分配。
● 主轴：布局方向的轴线，子元素默认沿着主轴排列
● 交叉轴：垂直于主轴方向的轴线
属性：layoutWeight()
参数：数字

@Entry 
@Component 
struct Index { 
  build() { 
    Column() { 
      // 主轴方向：水平方向 
      Row() { 
        Text('左侧') 
          .width(60) 
          .height(30) 
          .backgroundColor('#ccc') 
        Text('右侧 layoutWeight') 
          .height(30) 
          .backgroundColor('#fc0') 
          .layoutWeight(1) } 
          .margin({bottom: 20}) 
          // 主轴方向：垂直方向 
      Column() { 
        Text('第一行-固定高度') 
        .width('100%') 
        .height(30) 
        .backgroundColor(Color.Pink) 
      Text('第二行-layoutWeight') 
        .width('100%') 
        .backgroundColor(Color.Green) 
        .layoutWeight(1) } 
        .width('100%') 
        .height(100) 
        .backgroundColor('#f5f5f5') 
      } 
    }
  }

5. 综合案例-得物探索页

在这里插入图片描述

5.1. 布局思路

在这里插入图片描述

5.2. 参考代码

@Entry 
@Component 
struct Index {
  build() { 
    Column() {
      Row() { 
        // 左侧 
        Column({ space: 8}) {
          Text('玩一玩')
            .fontColor('#141519') 
            .fontSize(18)
            .fontWeight(700)
          Row() { 
            Text('签到兑礼')
              .fontColor('#a4a4b0')
              .fontSize(12) 
              .fontWeight(600)
            Text(' | 超多大奖 超好玩')
              .fontColor('#a4a4b0')
              .fontSize(13) 
            } 
          } 
        .layoutWeight(1)
        .alignItems(HorizontalAlign.Start) 
      // 右侧 
      Row({ space: 15}) { 
        Image($r('app.media.du'))
          .width(50)
          .backgroundColor('#efefef')
          .borderRadius(5) 
        Image($r('app.media.ic_public_arrow_right'))
          .width(20) 
          .fillColor('#aeaeba') 
        } 
      } 
    .width('100%') 
    .height(80)
    .backgroundColor('#fff') 
    .borderRadius(5) 
    .padding({left: 20, right: 12}) }
    .width('100%')
    .height('100%')
    .backgroundColor('#f5f4f9')
    .padding(10) 
  } 
}

6. 综合案例-得物-产品卡片

6.1. 参考代码

综合案例-得物-产品卡片
在这里插入图片描述

@Entry
@Component
struct Index {
  build() {
    Column() {
    
      // 产品卡片
      Column({space: 10}) {
      
        // 图片
        Image($r('app.media.nick'))
          .width('100%')
          .aspectRatio(1)
          .borderRadius({topLeft:5, topRight: 5})
          
        // 标题文字
        Text('今晚吃这个 | 每日艺术分享 No.43')
          .fontSize(14)
          .fontWeight(600)
          .fontColor('#414141')
          .lineHeight(22)
          .padding({left: 10, right: 10})
          
        // 用户与点赞
        Row() {
          // 用户
          Row({space: 5}){
            Image($r('app.media.user'))
              .width(15)
              .aspectRatio(1)
              .borderRadius(10)
            Text('插画师分享聚集地')
              .fontSize(10)
              .fontColor('#787a7d')
          }
          
          // 点赞
          Row({ space: 5}){
            Image($r('app.media.ic_like'))
              .width(10)
              .aspectRatio(1)
              .fillColor('#c2c0ca')
            Text('2300')
              .fontSize(10)
              .fontColor('#787a7d')
          }
        }
        .width('100%')
        .padding({left: 10, right: 10})
        .justifyContent(FlexAlign.SpaceBetween)
      }
      .width(200)
      .padding({bottom:10})
      .backgroundColor('#fff')
      .borderRadius(5)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f5f4f9')
    .padding(10)
  }
}
代码减少发量
关注
  • 29
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HarmonyOS 2.0鸿蒙应用开发实战教程视频教程2.4G
06-16
了解这三种语言在HarmonyOS开发中的应用场景和语法特点，以及如何使用它们创建组件和交互逻辑。 4. **UI组件与布局**：掌握HarmonyOS的用户界面组件，如按钮、文本框、列表视图等，并学习如何使用布局管理器来组织...
harmonyos中如何给官方图标库设置填充颜色？harmonyos中如果遇到其他图标库不能设置填充颜色，如何设置填充颜色？
2301_78906928的博客
02-21 477
如何改变其他图标库的图标，需要在图标.svg文件中，svg标签上设置fill="currentColot",才能让fillColor属性显示效果成功。在项目中想要改变官网图标的颜色，需要在Image组件设置.fillColor属性。在开发中最好用.svg图标。
HarmonyOS鸿蒙原生应用开发设计- 图标库
weixin_69135651的博客
10-27 1402
开发者直接使用官方提供的图标库内容，既可以符合HarmonyOS原生应用的开发上架运营规范，又可以防止别人引用的侵权等，减少自主创作图标的工作量。当然，如果有个性化的自主又有能力创作的除外。HarmonyOS设计文档中，为大家提供了独特的图标库，开发者可以根据需要直接引用。键盘、箭头、连接状态、媒体、人、设备、索引、通信、文件、物体与工具等。图标库可以分为双色图标、填充图标、线性图标。本文根据官方文档材料整理汇总。编辑具体的部分内容展示。
鸿蒙next开发：如何提升应用响应速度？
shudaoshanQAQ的博客
05-27 929
在应用响应用户输入期间.........
鸿蒙开发系列教程（二十六）--样式处理（二）
huazi99的博客
03-19 628
官网：https://developer.harmonyos.com/cn/design/harmonyos-icon/可以下载不同类型。
鸿蒙应用项目分享：我的鸿蒙毕设：基于HarmonyOS的任务看板平台【一】：项目整体介绍
Felix Cai 的世界
06-14 8462
鸿蒙项目初步分享，基于HarmonyOS的任务看板平台设计与实现，项目是我的毕业设计，此文分享APP内样式，后续逐步分享代码。基于精益思想，看板方法，参考飞书APP中的板栗看板和Trello应用。JAVA实现大部分内容。分享内容仅用于个人学习。...
鸿蒙NEXT-Column&Row组件的使用
2301_76813281的博客
01-18 1169
一个丰富的页面需要很多组件组成，那么，我们如何才能让这些组件有条不紊地在页面上布局呢？这就需要借助容器组件来实现。容器组件是一种比较特殊的组件，它可以包含其他的组件，而且按照一定的规律布局，帮助开发者生成精美的页面。容器组件除了放置基础组件外，也可以放置容器组件，通过多层布局的嵌套，可以布局出更丰富的页面。ArkTS为我们提供了丰富的容器组件来布局页面，本文将以构建登录页面为例，介绍Column和Row组件的属性与使用。
【HarmonyOS NEXT】ArkTS是否支持iconfont图标
Mayism123的博客
03-01 883
ArkTS / UI组件 / iconfont图标 / @ohos.font注册自定义字体 / registerFont。问题二：若支持，registerFont注册自己的iconfont的ttf文件后，如何去使用icon图标？问题一：支持外部引入的方式，详细内容可参考如下文档中的registerFont方法。问题二、引入ttf文件后，需要有对应的Iconfont才能显示，请参考如下代码实现。咨询场景：目前有一套标准UI组件库，大部分图标是iconfont。问题一：ArkTS是否支持iconfont？
Harmony OS物联网应用开发实战
10-02
4. **应用开发基础**：涵盖HarmonyOS应用的基本元素，如组件、服务、页面布局等，以及用Java或JS进行应用编程的基础知识。 5. **分布式能力实战**：介绍如何利用分布式任务调度、分布式数据管理、分布式UI等特性，...
华为鸿蒙HarmonyOS开发者资料大全.7z
08-12
华为鸿蒙HarmonyOS开发者资料大全是一份专为想要学习和深入理解鸿蒙操作系统开发的初学者准备的综合资源包。这份7z压缩文件包含了丰富的教程、文档、示例代码和工具，旨在帮助开发者快速掌握鸿蒙系统的开发技能。...
2024 鸿蒙零基础快速实战-仿抖音App开发（ ArkTS版 ）完结11章
05-26
华为鸿蒙HarmonyOS系统是面向万物互联的全场景分布式操作系统，目前鸿蒙系统已从2.0升级更新至Beta 3.0，支持手机、平板、智能穿戴、智慧屏等多种终端设备运行，提供应用开发、设备开发的一站式服务。 凭借多终端...
鸿蒙应用开发从入门到实战书后答案
04-08
在鸿蒙应用开发的学习过程中，从入门到实战的旅程涵盖了多个关键知识点，这些知识点构成了鸿蒙操作系统应用开发的基础。作为一款面向未来、全场景的分布式操作系统，鸿蒙OS（HarmonyOS）为开发者提供了丰富的工具和...
鸿蒙系统中处理图像数据的高级指南
qq_14863717的博客
06-06 277
在鸿蒙（HarmonyOS）系统中处理图像数据通常涉及加载图像资源、转换为合适的图像格式（如），以及将其用于各种操作，如绘制到画布（Canvas）上或进行图像处理。特别是在WebGL上下文中，可能需要将对象传输到WebGL纹理中以进行更高级的图形渲染。本指南将提供一个在鸿蒙系统中处理图像数据的高级流程，并详细说明了如何在WebGL中使用。
OpenHarmony实战开发-提升应用响应速度。
m0_70749039的博客
04-22 1085
应用对用户的输入需要快速反馈，以提升交互体验，因此本文提供了以下方法来提升应用响应速度。
鸿蒙界面开发
最新发布
qq_46025779的博客
07-23 499
界面开发界面开发-布局思路属性方法字体颜色文字溢出省略号、行高Image图片组件输入框与按钮综合实训设计资源-svg图标欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入MarkdownText-to-HTML。
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 606
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
HarmonyOS NEXT零基础入门到实战-第二部分
sxwn123的专栏
07-20 439
tabBar(this.myBuilder(0, '购物车', $r('app.media.startIcon'), $r('app.media.xm'))).tabBar(this.myBuilder(1, '我的', $r('app.media.startIcon'), $r('app.media.hw'))).tabBar(this.myBuilder(2, '我的', $r('app.media.startIcon'), $r('app.media.hw')))（文字、图片...）
HarmonyOS和OpenHarmony区别联系
Jason_Lee155的博客
07-23 411
刚开始接触鸿蒙开发的时候经常看到HarmonyOS和OpenHarmony频繁的出现在文章和文档之中，那么这两个名词分别是什么意思，他们之间又有什么联系呢？
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号2
Gusha_的博客
07-21 1345
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
pycharm爬虫得物小程序
03-30
作为AI语言模型，我无法提供有关如何在PyCharm中编写得物小程序爬虫的具体代码。但是，我可以提供一些一般性的指导，以帮助您开始： 1. 安装必要的库和工具 要使用PyCharm编写得物小程序爬虫，您需要安装Python和必要的库和工具，如requests、BeautifulSoup和Selenium等。可以使用pip安装这些库。 2. 确定爬取网站的URL 在开始编写代码之前，您需要确定要爬取的得物小程序网站的URL。这将有助于您编写正确的代码。 3. 编写代码 使用PyCharm创建新的Python项目，并从库中导入所需的模块。然后，编写您的代码以爬取得物小程序网站上的数据。您可以使用requests模块发出请求、使用BeautifulSoup模块解析网页内容、使用Selenium模块模拟浏览器行为等。 4. 测试和调试 在编写完代码后，使用PyCharm进行测试和调试。您可以使用调试器来查找代码中的错误，并使用单元测试来确保代码的正确性。 总之，编写得物小程序爬虫需要一些编程和技术知识。如果您是初学者，建议先从Python基础开始学习。同时，建议您谨慎使用爬虫技术，并遵守网站的使用规则和法律法规。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值