HarmonyOS开发实例：【分布式新闻客户端】

最新推荐文章于 2024-04-24 18:21:49 发布
最新推荐文章于 2024-04-24 18:21:49 发布
阅读量1.6k 收藏 18
点赞数 21
分类专栏： 鸿蒙开发 文章标签： harmonyos OpenHarmony 鸿蒙系统 鸿蒙开发 移动开发 程序员 鸿蒙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62167422/article/details/137876450
版权

 

介绍

本篇Codelab基于栅格布局、设备管理和多端协同，实现一次开发，多端部署的分布式新闻客户端页面。主要包含以下功能：

  1. 展示新闻列表以及左右滑动切换新闻Tab。
  2. 点击新闻展示新闻详情页。
  3. 点击新闻详情页底部的分享按钮，发现周边处在同一无线网络下的设备并进行可信认证连接。
  4. 可信认证后，再次点击分享按钮，选择已连接的设备进行跨设备启动UIAbility。

最终效果图如下：

相关概念

  • [栅格布局]：一种通用的辅助定位工具，解决多尺寸多设备的动态布局问题。
  • [设备管理]：模块提供分布式设备管理能力。
  • [跨设备启动UIAbility]：多端上的不同UIAbility/ServiceExtensionAbility同时运行、或者交替运行实现完整的业务。
  • [Tabs组件]：通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。

相关权限

本篇Codelab使用了设备管理及跨设备实现多端协同能力，需要手动替换full-SDK，并在配置文件module.json5文件requestPermissions属性中添加如下权限：

  • [分布式设备认证组网权限]：ohos.permission.ACCESS_SERVICE_DM。
  • [设备间的数据交换权限]：ohos.permission.DISTRIBUTED_DATASYNC。

约束与限制

  1. 本篇Codelab部分能力依赖于系统API，需下载full-SDK并替换DevEco Studio自动下载的public-SDK。具体操作可参考指南[《如何替换full-SDK》]。
  2. 本篇Codelab使用的部分API仅系统应用可用，需要提升应用等级。

环境搭建

软件要求

  • [DevEco Studio]版本：DevEco Studio 4.0 Beta2。
  • OpenHarmony SDK版本：API version 10。
  • 鸿蒙开发文档指导：qr23.cn/AKFP8k点击或复制转到。

硬件要求

  • 开发板类型：[润和RK3568开发板]。
  • OpenHarmony系统：4.0 Beta1。 -鸿蒙HarmonyOS与OpenHarmony开发籽料mau123789是v直接拿

搜狗高速浏览器截图20240326151450.png

环境搭建

完成本篇Codelab我们首先要完成开发环境的搭建，本示例以RK3568开发板为例，参照以下步骤进行：

  1. [获取OpenHarmony系统版本]：标准系统解决方案（二进制）。以4.0 Beta1版本为例：

  1. 搭建烧录环境。

    1. [完成DevEco Device Tool的安装]
    2. [完成RK3568开发板的烧录]

  2. 搭建开发环境。

    1. 开始前请参考[工具准备]，完成DevEco Studio的安装和开发环境配置。
    2. 开发环境配置完成后，请参考[使用工程向导]创建工程（模板选择“Empty Ability”）。
    3. 工程创建完成后，选择使用[真机进行调测]。

代码结构解读

本篇Codelab只对核心代码进行讲解，对于完整代码，我们会在gitee中提供。

├──entry/src/main/ets                   // 代码区
│  ├──common
│  │  ├──constants
│  │  │  └──CommonConstants.ets         // 常量类
│  │  └──utils
│  │     └──Logger.ets                  // 日志工具类
│  ├──entryability
│  │  └──EntryAbility.ets               // 程序入口类
│  ├──model
│  │  └──RemoteDeviceModel.ets          // 设备管理类
│  ├──pages
│  │  ├──Index.ets                      // 新闻列表页
│  │  └──NewsDetail.ets                 // 新闻详情页
│  ├──view
│  │  ├──DetailFooter.ets               // 详情页页脚
│  │  ├──DetailHeadContent.ets          // 新闻详情
│  │  ├──DeviceListDialog.ets           // 设备列表弹窗
│  │  ├──NewsList.ets                   // 新闻列表
│  │  └──NewsTab.ets                    // 新闻页签
│  └──viewmodel
│     └──NewsDataModel.ets              // 新闻数据处理
└──entry/src/main/resources             // 资源文件目录

构建新闻列表页

新闻列表页由页签区域和新闻列表区域组成，页签区域为自定义布局TabBuilder，新闻列表区域为Tabs组件嵌套List组件，并适配不同尺寸设备对应的栅格。新闻列表页能够左右滑动或点击页签切换新闻Tab，并设置点击新闻跳转至新闻详情页。

 

// NewsTab.ets
@Component
export default struct NewsTab {
  @State currentIndex: number = 0;
  @State currentBreakpoint: string = CommonConstants.BREAKPOINT_SM;
  private newsItems: NewsData[] = [];

  // 自定义页签栏
  @Builder TabBuilder(title: Resource, index: number) {
    Row() {
      Text(title)
        .fontSize(this.currentIndex === index ? $r('app.float.lager_font_size') : $r('app.float.middle_font_size'))
        .fontWeight(this.currentIndex === index ? CommonConstants.FONT_WEIGHT_500 : FontWeight.Normal)
        .fontColor(this.currentIndex === index ? $r('app.color.tab_font_select') : $r('app.color.font_color_gray'))
    }
    .layoutWeight(1)
    .margin({
      right: $r('app.float.news_tab_margin_right'),
      left: (this.currentBreakpoint === CommonConstants.BREAKPOINT_SM && index === 0) ?
        $r('app.float.news_tab_margin_left') : 0
    })
    .height(this.currentIndex === index ? $r('app.float.news_tab_current_height') : $r('app.float.news_tab_height'))
  }

  build() {
    ...
    Tabs() {
      ForEach(CommonConstants.ALL_TITLE, (title: string, index: number) => {
        TabContent() {
          // 新闻内容列表
          NewsList({ newsItems: NewsDataModel.getNewsByType(this.newsItems, title) })
        }
        .tabBar(this.TabBuilder(NewsDataModel.getTypeByStr(title), index))
      }, (title: string, index: number) => index + JSON.stringify(title))
    }
    .barHeight($r('app.float.news_tab_bar_height'))
    .barWidth(CommonConstants.FULL_COMPONENT)
    .barMode(this.currentBreakpoint === CommonConstants.BREAKPOINT_SM ? BarMode.Scrollable : BarMode.Fixed)
    .onChange((index: number) => {
      this.currentIndex = index;
    })
    ...
  }
}

// NewsList.ets
@Component
export default struct NewsList {
  private newsItems: NewsData[] = [];

  build() {
    List() {
      ForEach(this.newsItems, (item: NewsData, index: number) => {
        ListItem() {
          // 栅格布局
          GridRow({
            columns: {
              sm: CommonConstants.FOUR_COLUMN,
              md: CommonConstants.EIGHT_COLUMN,
              lg: CommonConstants.TWELVE_COLUMN
            },
            breakpoints: {
              value: [
                CommonConstants.SMALL_DEVICE_TYPE,
                CommonConstants.MIDDLE_DEVICE_TYPE,
                CommonConstants.LARGE_DEVICE_TYPE
              ]
            },
            gutter: { x: $r('app.float.grid_row_gutter') }
          }) {
            GridCol({
              span: {
                sm: CommonConstants.FOUR_COLUMN,
                md: CommonConstants.EIGHT_COLUMN,
                lg: CommonConstants.EIGHT_COLUMN
              },
              offset: {
                sm: CommonConstants.ZERO_COLUMN,
                md: CommonConstants.ZERO_COLUMN,
                lg: CommonConstants.TWO_COLUMN
              }
            }) {
              NewsItem({ newsItem: item, isLast: index === this.newsItems.length - 1 })
            }
          }
        }
      }, (item: NewsData, index: number) => index + JSON.stringify(item))
    }
    .height(CommonConstants.FULL_COMPONENT)
  }
}
 

构建新闻详情页
 

新闻详情页
 

新闻详情页由新闻内容区域和页脚区域组成，其中新闻内容区域为Scroll组件嵌套栅格组件展示新闻详情，页脚区域为栅格布局，包含TextInput组件和三个按钮图标。
 

 

 

 

// DetailHeadContent.ets
build() {
  Column() {
    ...
    // 可滚动的容器组件
    Scroll() {
      // 栅格布局
      GridRow({
        columns: {
          sm: CommonConstants.FOUR_COLUMN,
          md: CommonConstants.EIGHT_COLUMN,
          lg: CommonConstants.TWELVE_COLUMN
        },
        breakpoints: {
          value: [
          CommonConstants.SMALL_DEVICE_TYPE,
          CommonConstants.MIDDLE_DEVICE_TYPE,
          CommonConstants.LARGE_DEVICE_TYPE
          ]
        },
        gutter: { x: $r('app.float.grid_row_gutter') }
      }) {
        GridCol({
          span: {
            sm: CommonConstants.FOUR_COLUMN,
            md: CommonConstants.EIGHT_COLUMN,
            lg: CommonConstants.EIGHT_COLUMN
          },
          offset: {
            sm: CommonConstants.ZERO_COLUMN,
            md: CommonConstants.ZERO_COLUMN,
            lg: CommonConstants.TWO_COLUMN
          }
        }) {
          ...
        }
        ...
      }
    }
    .padding({
      bottom: $r('app.float.news_detail_padding_bottom')
    })
    .scrollBar(BarState.Off)
  }
  .margin({
    left: $r('app.float.news_detail_margin'),
    right: $r('app.float.news_detail_margin')
  })
  .height(CommonConstants.FULL_COMPONENT)
  .alignItems(HorizontalAlign.Start)
}

// DetailFooter.ets
build() {
  Column() {
    // 分割线
    Divider()
      .color($r('app.color.detail_divider_color'))
      .width(CommonConstants.FULL_COMPONENT)

    // 栅格布局
    GridRow({
      columns: {
        sm: CommonConstants.FOUR_COLUMN,
        md: CommonConstants.EIGHT_COLUMN,
        lg: CommonConstants.TWELVE_COLUMN
      },
      breakpoints: {
        value: [
        CommonConstants.SMALL_DEVICE_TYPE,
        CommonConstants.MIDDLE_DEVICE_TYPE,
        CommonConstants.LARGE_DEVICE_TYPE
        ]
      },
      gutter: { x: $r('app.float.grid_row_gutter') }
    }) {
      GridCol({
        span: {
          sm: CommonConstants.FOUR_COLUMN,
          md: CommonConstants.EIGHT_COLUMN,
          lg: CommonConstants.EIGHT_COLUMN
        },
        offset: {
          sm: CommonConstants.ZERO_COLUMN,
          md: CommonConstants.ZERO_COLUMN,
          lg: CommonConstants.TWO_COLUMN
        }
      }) {
        ...
      }
      .margin({
        left: this.currentBreakpoint === CommonConstants.BREAKPOINT_SM ? $r('app.float.footer_margin_sm') :
          $r('app.float.footer_margin_other'),
        right: this.currentBreakpoint === CommonConstants.BREAKPOINT_SM ? $r('app.float.footer_margin_sm') :
          $r('app.float.footer_margin_other')
      })
    }
    .backgroundColor($r('app.color.bg_color_gray'))
    .height($r('app.float.footer_height'))
    .width(CommonConstants.FULL_COMPONENT)
    .onBreakpointChange((breakpoints) => {
      ...
    })
  }
}
 

分享按钮弹窗
 

页脚点击分享按钮，弹出自定义弹窗DeviceListDialog，用于多端协同拉起应用。DeviceListDialog由两个标题栏和两个List组件构成，其中List组件使用ForEach循环渲染设备数据。
 

 

 

 

// DeviceListDialog.ets
build() {
  Column() {
    Row() {
      ...
    }
    .height($r('app.float.choose_device_row_height'))
    .width(CommonConstants.FULL_COMPONENT)
    .padding({
      left: $r('app.float.dialog_padding'),
      right: $r('app.float.dialog_padding')
    })

    // 信任设备列表
    List() {
      ForEach(this.trustedDeviceList, (item: deviceManager.DeviceInfo, index: number) => {
        ListItem() {
          ...
        }
      }, (item: deviceManager.DeviceInfo) => JSON.stringify(item.deviceId))
    }

    Row() {
      ...
    }
    .height($r('app.float.choose_device_row_height'))
    .width(CommonConstants.FULL_COMPONENT)
    .padding({
      left: $r('app.float.dialog_padding'),
      right: $r('app.float.dialog_padding')
    })

    // 发现设备列表
    List() {
      ForEach(this.discoverDeviceList, (item: deviceManager.DeviceInfo, index: number) => {
        ListItem() {
          ...
        }
      }, (item: deviceManager.DeviceInfo) => JSON.stringify(item.deviceId))
    }

    Row() {
      ...
    }
    .height($r('app.float.dialog_button_row_height'))
    .padding({
      top: $r('app.float.dialog_button_padding_top'),
      bottom: $r('app.float.dialog_button_padding_bottom'),
      left: $r('app.float.dialog_padding'),
      right: $r('app.float.dialog_padding')
    })
    .width(CommonConstants.FULL_COMPONENT)
  }
  .borderRadius($r('app.float.dialog_border_radius'))
  .backgroundColor($r('app.color.device_dialog_background'))
  .width(CommonConstants.FULL_COMPONENT)
}
 

多端协同拉起应用
 

创建设备管理器
 

应用创建时创建一个设备管理器实例，注册设备状态监听和获取信任的设备列表。其中deviceManager类需使用full-SDK。
 

// EntryAbility.ets
onCreate(want: Want) {
  ...
  // 创建设备管理器
  RemoteDeviceModel.createDeviceManager(this.context);
}

// RemoteDeviceModel.ets
async createDeviceManager(context: common.UIAbilityContext): Promise<void> {
  if (this.deviceManager !== undefined) {
    return;
  }
  await new Promise((resolve: (value: Object | PromiseLike<Object>) => void, reject:
    ((reason?: RejectError) => void)) => {
    deviceManager.createDeviceManager(context.abilityInfo.bundleName, (err, value) => {
      if (err) {
        reject(err);
        logger.error('createDeviceManager failed.');
        return;
      }
      this.deviceManager = value;
      // 注册设备状态监听
      this.registerDeviceStateListener();
      // 获取信任设备列表
      this.getTrustedDeviceList();
      resolve(value);
    })
  })
}
 

发现设备
 

用户点击新闻详情页底部的分享按钮，调用startDeviceDiscovery()方法，发现周边处在同一无线网络下的设备并添加设备至已发现的设备列表。
 

// RemoteDeviceModel.ets
startDeviceDiscovery(): void {
  if (this.deviceManager === undefined) {
    logger.error('deviceManager has not initialized');
    this.showToast($r('app.string.no_device_manager'));
    return;
  }
  this.deviceManager.on('deviceFound', (data) => {
    if (data === null) {
      return;
    }
    // 监听设备发现
    this.deviceFound(data);
  })
  this.deviceManager.on('discoverFail', (data) => {
    logger.error(`discoverFail data = ${JSON.stringify(data)}`);
  })
  this.deviceManager.on('serviceDie', () => {
    logger.error('serviceDie');
  })

  let info: deviceManager.SubscribeInfo = {
    subscribeId: SUBSCRIBE_ID,
    mode: CommonConstants.INFO_MODE,
    medium: 0,
    freq: CommonConstants.INFO_FREQ,
    isSameAccount: false,
    isWakeRemote: true,
    capability: 0
  };
  // 添加设备至发现列表
  this.discoverList = [];
  AppStorage.setOrCreate(CommonConstants.DISCOVER_DEVICE_LIST, this.discoverList);

  try {
    this.deviceManager.startDeviceDiscovery(info);
  } catch (err) {
    logger.error(`startDeviceDiscovery failed error = ${JSON.stringify(err)}`);
  }
}
 

进行可信认证连接
 

在已发现的设备列表中选择设备，调用authenticateDevice()方法进行可信认证，输入PIN码，连接设备，将设备改为信任状态，添加至已信任设备列表。
 

// RemoteDeviceModel.ets
authenticateDevice(device: deviceManager.DeviceInfo, context: common.UIAbilityContext): void {
  if (this.deviceManager === undefined) {
    logger.error('deviceManager has not initialized');
    this.showToast($r('app.string.no_device_manager'));
    return;
  }

  for (let i: number = 0; i < this.discoverList.length; i++) {
    if (this.discoverList[i].deviceId !== device.deviceId) {
      continue;
    }
    let extraInfo: AuthExtraInfoInterface = {
      targetPkgName: context.abilityInfo.bundleName,
      appName: context.applicationInfo.name,
      appDescription: context.applicationInfo.description,
      business: CommonConstants.ZERO
    };
    let authParam: deviceManager.AuthParam = {
      'authType': CommonConstants.ONE,
      'extraInfo': extraInfo
    };
    try {
      // 可信认证
      this.deviceManager.authenticateDevice(device, authParam, (err) => {
        if (err) {
          logger.error(`authenticateDevice error. Code is ${err.code}, message is ${err.message}`);
          return;
        }
      })
    } catch (err) {
      logger.error(`authenticateDevice failed error = ${JSON.stringify(err)}`);
    }
  }
}
 

跨设备启动UIAbility
 

可信认证后，用户再次点击分享按钮，选择已信任设备列表中的设备，调用startAbilityContinuation()方法进行拉起应用，在另一设备中触发aboutToAppear()方法渲染当前的新闻详情页，实现跨设备启动UIAbility。
 

// DeviceListDialog.ets
function startAbilityContinuation(deviceId: string, newsId: string, context: common.UIAbilityContext): void {
  let want: Want = {
    deviceId: deviceId,
    bundleName: context.abilityInfo.bundleName,
    abilityName: CommonConstants.ABILITY_NAME,
    parameters: {
      newsId: newsId
    }
  };
  // 拉起应用
  context.startAbility(want).catch((err: Error) => {
    Logger.error(`startAbilityContinuation failed error = ${JSON.stringify(err)}`);
    prompt.showToast({
      message: $r('app.string.start_ability_continuation_error')
    });
  })
}

// NewsDetail.ets
aboutToAppear() {
  let newsId: string | undefined = AppStorage.get<string>('wantNewsId');
  if (newsId === undefined) {
    this.newsData = (router.getParams() as Record<string, NewsData>)['newsItem'];
    return;
  }
  // 读取跨设备传递的参数信息
  this.newsData = this.newsItems.filter((item: NewsData) => (item.newsId === newsId))[0];
}
 

 

最后呢，很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。
 

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点
 

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。
 

 

高清完整版请点击→《鸿蒙NEXT星河版开发学习文档》
 

针对鸿蒙成长路线打造的鸿蒙学习文档。话不多说，我们直接看详细资料鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，帮助大家在技术的道路上更进一步。
 

《鸿蒙 (OpenHarmony)开发学习视频》
 

图片
 

《鸿蒙生态应用开发V2.0白皮书》
 

图片
 

《鸿蒙 (OpenHarmony)开发基础到实战手册》
 

获取这份鸿蒙星河版学习资料，请点击→《鸿蒙NEXT星河版开发学习文档》
 

OpenHarmony北向、南向开发环境搭建
 

图片
 

《鸿蒙开发基础》
 

  1.  
    ArkTS语言
     
  2.  
    安装DevEco Studio
     
  3.  
    运用你的第一个ArkTS应用
     
  4.  
    ArkUI声明式UI开发
     
  5.  
    .……
     
 

图片
 

《鸿蒙开发进阶》
 

  1.  
    Stage模型入门
     
  2.  
    网络管理
     
  3.  
    数据管理
     
  4.  
    电话服务
     
  5.  
    分布式应用开发
     
  6.  
    通知与窗口管理
     
  7.  
    多媒体技术
     
  8.  
    安全技能
     
  9.  
    任务管理
     
  10.  
    WebGL
     
  11.  
    国际化开发
     
  12.  
    应用测试
     
  13.  
    DFX面向未来设计
     
  14.  
    鸿蒙系统移植和裁剪定制
     
  15.  
    ……
     
 

图片
 

《鸿蒙开发实战》
 

  1.  
    ArkTS实践
     
  2.  
    UIAbility应用
     
  3.  
    网络案例
     
  4.  
    ……
     
 

图片
 

 获取这份鸿蒙星河版学习资料，请点击→《鸿蒙NEXT星河版开发学习文档》
 

总结
 

鸿蒙—作为国家主力推送的国产操作系统。部分的高校已经取消了安卓课程，从而开设鸿蒙课程；企业纷纷跟进启动了鸿蒙研发。
 

并且鸿蒙是完全具备无与伦比的机遇和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，未来将会支持 50 万款的应用。那么这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！
 

 


                

        

        

        

    




    

      

        

            

              
                
                  移不动开发技术
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    21
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    18
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
鸿蒙开发实战项目(六十):分布式新闻客户端（JS）

				
			

			

				

					sybh的博客
				

				

					01-28
					
					951
					
				

			

		

		

			
				
基于JS扩展的类Web开发范式的方舟框架是一种跨设备的高性能UI开发框架，支持声明式编程和跨设备多态UI，适用于手机（Phone）、平板（Tablet）、智慧屏（TV）和智能穿戴（Wearable）应用开发，组件的主题和风格可根据不同设备的特点而进行多态设计，让开发者真正意义上实现不同设备之间的代码共享。最终效果预览我们最终会构建一个简易的HarmonyOS新闻客户端（JS版本）。

			
		

	



                

              
                



	

		

			

				
					
【ARK UI】HarmonyOS 如何实现新闻列表

				
			

			

				

					华为开发者联盟
				

				

					08-11
					
					941
					
				

			

		

		

			
				
来进行绘画list列表，需要注意的问题我们如何使用自定义新闻条目ListItem布局，我们可以参如下代码。构造数据源，新闻列表包含“新闻的id”、“新闻图片”、“新闻标题”、“新闻的内容”四个内容，字段表示如下。来定义新闻每一条重复数据的样式，我们对新闻条目的样式进行排版，代码如下。欲了解更多更全技术文章，欢迎访问。新闻图片：ImageUrl。新闻列表功能实现，代码如下。新闻内容：Content。新闻标题：Title。...

			
		

	



                


  
              

                


	

		

			

				
					
HarmonyOS 应用开发-ArkUI（ets）仿“腾讯新闻”APP

				
			

			

				

					maniuT的博客
				

				

					04-08
					
					1083
					
				

			

		

		

			
				
菜单用Scroll包裹设置为横向滑动，用display.getDefaultDisplay() 获取屏幕宽度（预览器无法获取），根据每个tab的固定宽度算出屏幕能显示多少个tab，用this.scroller.currentOffset().xOffset获取滑动偏移值，依据当前的index与偏移值的关系设置Scroll的偏移值this.scroller.scrollTo()获取屏幕大小接口官方文档链接。

			
		

	





	

		

			

				
					
【鸿蒙开发】新闻列表页面练习

				
			

			

				

					d312697510的博客
				

				

					04-24
					
					404
					
				

			

		

		

			
				
鸿蒙开发arkts，新闻列表页面练习，使用上拉加载下拉刷新新闻数据

			
		

	



		

			
		



	

		

			

				
					
鸿蒙应用开发 | 选项卡(TabList / Tab)的功能和用法

				
			

			

				

					
				

				

					08-04
					
					2075
					
				

			

		

		

			
				
导语：大家好，我是你们的朋友 朋哥，十年码农经验，对技术情有独钟。


今天来一个大招，鸿蒙中的顶部 切换 选项卡 TabList，开发应用的时候会经常用到，一般作为二级内容分类来用的。



不多说，今天的内容很多，下面我们开始今天的文章，还是老规矩，通过如下几点来说：



1，简介 2，属性 3，实战


简介

Tablist可以实现多个页签栏的切换，Tab为某个页签。子页签通常放在内容区上方，展示不同的分类。页签名称应该简洁明了，清晰描述分类的内容。



一般应用场景 都是作为应用首页的...

			
		

	





	

		

			

				
					
HarmonyOS NEXT自定义视图实现Tab效果(3)

				
			

			

				

					2401_84181911的博客
				

				

					04-11
					
					496
					
				

			

		

		

			
				
|—CustomView.ets                           // 视图层-自定义视图实现Tab效果。customview                                       // har类型。// 记录点击index。

			
		

	





	

		

			

				
					
精通HarmonyOS应用开发：从入门到高级实战"

					
最新发布

				
			

			

				

					07-06
				

			

		

		

			
				
HarmonyOS（鸿蒙操作系统）是华为开发的一个开源的、基于微内核的全场景分布式操作系统。对于想要成为HarmonyOS应用开发者的高级开发者，以下是一些关键点和学习资源：  ### 1. 了解HarmonyOS基础 - 学习HarmonyOS的...

			
		

	





	

		

			

				
					
华为鸿蒙HarmonyOS开发整理资料汇总.zip

				
			

			

				

					11-25
				

			

		

		

			
				
1学前必读：HarmonyOS学习资源主题分享 2学前必读：OpenHarmony-联盟生态资料合集 3-1.HarmonyOS概述：技术特性 3-2.HarmonyOS概述：开发工具与平台 3-3.HarmonyOS概述：系统安全 3-4.HarmonyOS概述：系统定义 3-5....

			
		

	





	

		

			

				
					
harmonyos体验-TalentLandProject:HarmonyOS分布式调度器演示

				
			

			

				

					07-01
				

			

		

		

			
				
和谐体验HarmonyOS 分布式调度程序 - 如何从一个设备启动一个能力到另一个？ 介绍 鸿蒙OS是面向全场景智慧生活方式的面向未来的分布式操作系统。 对于消费者而言，鸿蒙将各种智能设备整合为“一个超级设备”，通过超...

			
		

	





	

		

			

				
					
华为harmonyos公测-HarmonyOS-examples:鸿蒙示例

				
			

			

				

					07-01
				

			

		

		

			
				
HarmonyOS应用开发的各种示例，项目及开发教程汇总，帮助初学者快速掌握HarmonyOS应用开发。 没有人能熄灭满天的星光，每一位开发者，让我们在此汇集，一起点亮整个星空。 记得给仓库点个 Star 哟:winking_face: 一...

			
		

	





	

		

			

				
					
harmonyos体验-harmonyos-codelabs:和声-codelabs

				
			

			

				

					07-01
				

			

		

		

			
				
和谐体验代码实验室
这些
Codelab
旨在向开发人员展示示例应用程序，以在有趣的场景中使用
HarmonyOS
功能。
ComponentCodelab：这个CodeLab旨在让开发者了解常用组件的常用布局和使用方法。
链接：
DistributedVideoCodelab：DistributedVideoCodelab
应用是为了展示跨设备迁移视频能力。
链接：
EducationSystem：旨在帮助开发者快速了解多屏协同交互、分布式跨设备传输的体验。
链接：
HarmonyOSNewsClient：HarmonyOS
新闻客户端是一个简单的新闻应用程序。
链接：
SimpleVideoCodelab：SimpleVideoCodelab
应用程序是为了展示简单的鸿蒙视频功能。
链接：
DistributedMail：演示了可以跨设备迁移的电子邮件编辑页面，以及分布式文件系统的使用。
链接：
ShoppingJs：演示了使用
JS
UI
组件开发的购物应用程序。
链接：
VoiceCamera：演示了基于分布式文件系统和AI语音识别能力开发的分布式语音摄像头。
链接：
JSPl

			
		

	





	

		

			

				
					
HarmonyOS 开发平台和工具

				
			

			

				

					02-11
				

			

		

		

			
				
HarmonyOS 开发平台是华为构建的一个综合性的操作系统开发环境，旨在为开发者提供高效、便捷的工具，以适应超级终端时代的应用开发需求。该平台聚焦于鸿蒙系统的特性，支持跨设备分布式协同，使得应用程序能够在不同...

			
		

	





	

		

			

				
					
鸿蒙App开发-网络请求-下拉刷新三方库-底部Tab栏-滚动组件(含源码）

				
			

			

				

					liuhaikang的博客
				

				

					01-15
					
					1166
					
				

			

		

		

			
				
App底部是一个TabBar，点击TabBar可以切换上面的页面。共包含两个页面，一个是“首页” ,另一个是“空白页”。

			
		

	





	

		

			

				
					
鸿蒙HarmonyOS实战-ArkUI组件（页面路由）

				
			

			

				

					shudaoshanQAQ的博客
				

				

					01-06
					
					1846
					
				

			

		

		

			
				
路由导航是指在应用程序中通过路径导航定位到特定页面的过程。路由导航的实现通常采用路由器（router）来进行管理，路由器根据路径的不同值将用户请求导向到不同的页面。

			
		

	





	

		

			

				
					
鸿蒙开发-UI-页面路由

				
			

			

				

					中年程序员
				

				

					02-01
					
					2276
					
				

			

		

		

			
				
前面系列文章，我们详细学习了鸿蒙开发UI组件相关知识，学习了组件基本使用方法、自定义样式以及各种组件的使用场景，本文将学习鸿蒙开发UI页面路由自定义询问框的方式，可以使用弹窗和自定义弹窗来实现，这样可以让应用界面与系统默认询问框有所区别，提高应用的用户体验度。实现方式是通过promptAction.showDialog()打开弹窗代码示例//step1：先导入Router模块//step2：定义点击返回回调函数。

			
		

	





	

		

			

				
					
HarmonyOS官网案例解析——新闻数据加载（ArkTS）

				
			

			

				

					一起学鸿蒙呀~~
				

				

					12-21
					
					3209
					
				

			

		

		

			
				
/ 发送数据请求header: {},});// 处理数据，并返回// 处理数据，并返回} else {serverData.msg = `${'网络错误'}&${value.responseCode}`;serverData.msg = '网络错误';})....// 获取服务端新闻数据列表url += '?});...Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve。

			
		

	





	

		

			

				
					
04鸿蒙APP开发之创建一个底部菜单栏及首页列表

				
			

			

				

					James-Tom的博客
				

				

					12-18
					
					2339
					
				

			

		

		

			
				
构建一个带有底部四个菜单的导航栏，首页显示一个列表，并添加测试数据，及点击事件。

			
		

	





	

		

			

				
					
基于鸿蒙操作系统的新闻app设计(源码+开题)

				
			

			

				

					seryue11的博客
				

				

					03-16
					
					1267
					
				

			

		

		

			
				
通过深入研究鸿蒙系统的特性，结合新闻App的实际需求，可以开发出更加符合用户阅读习惯和兴趣爱好的新闻推送机制，提高新闻的传播效果和影响力。其次，设计新闻信息模块。此外，还设计个性化推荐系统，根据用户的浏览历史和反馈数据，为用户推荐符合其兴趣的新闻内容。通过以上研究内容的实施，我们期望能够设计出一款基于鸿蒙操作系统的新闻App，既满足用户的需求，又能够充分利用鸿蒙系统的优势，为新闻传播和鸿蒙生态的发展做出贡献。：如何确保新闻内容的真实性和时效性，同时实现个性化的新闻推送，提高用户对新闻内容的兴趣和关注度。

			
		

	





	

		

			

				
					
【HarmonyOS2鸿蒙应用开发】ListContainer简单新闻案例模拟

				
			

			

				

					weixin_53977819的博客
				

				

					10-10
					
					668
					
				

			

		

		

			
				
【码云】Gitee仓库地址：https://gitee.com/JIuyang2284/ListContainerTest

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值