前言

本次参加开源鸿蒙跨平台开发学习活动，作为小白，我最初以为鸿蒙开发很复杂，但其实开源鸿蒙支持React Native、Flutter等跨平台技术栈，能复用现有技能。目标是搭建一个支持多终端（手机、平板、开发板、模拟器）的开发环境，并实现一个简单的数据清单列表App，通过网络请求拉取数据展示。参考了官方的“开源鸿蒙跨平台技术指导手册”，加上一些CSDN文章，边学边做。整个过程分两个任务：环境搭建与工程运行（任务一），网络请求集成（任务二）。

任务一：开源鸿蒙跨平台开发环境搭建、多终端工程创建运行、代码提交至AtomGit

① 开发环境搭建

第一步就是环境配置。我下载了DevEco Studio（鸿蒙一站式开发工具），版本是6.0.1 Release。从华为开发者官网下载，安装过程挺顺利，但要注意Java JDK要用JDK 17+，不然会报错。

• 技术栈开发环境：我选择了React Native for OpenHarmony。安装Node.js（v20），然后用npm全局安装@ohos/cli。
  

• 开源鸿蒙SDK下载：在DevEco Studio里，按需下载SDK，我选择的是。下载慢的话，可以用镜像源加速。
  

• 环境变量配置：如下图。重启DevEco后验证。
  

• 多设备调试驱动安装：模拟器直接在DevEco里启动。

（这里插入运行截图：DevEco Studio界面显示SDK下载完成、环境变量配置成功、模拟器运行中。）

② Git与AtomGit仓库操作

我以前用GitHub，但这次用AtomGit（https://atomgit.com），因为它是开源鸿蒙推荐的平台。注册账号后，创建公开仓库“AtomGitPractice”。

• Git核心命令掌握：clone仓库、branch创建dev分支、commit用清晰message如“feat: init project setup”、push到remote、pull同步。
• 分支管理规范：主分支main用于release，dev用于开发。配置.gitignore忽略node_modules等；README.md写项目简介、安装步骤；选择MIT开源许可证。

仓库符合开源标准：有清晰描述、无敏感文件。命令示例：

git clone git@gitcode.com:u013460287/AtomGitPractice.git
git add .
git commit -m "chore: init project && first commit"
git push origin master

③ 工程创建与多终端运行验证

基于React Native for OpenHarmony模板，在DevEco Studio创建工程“AtomGitNews”。

1. 工程配置：添加模块依赖（如@ohos/hap），权限声明（网络权限稍后加），多设备适配参数（屏幕密度、设备类型）。
2. 编译、部署与运行：
   • 模拟器：直接Run，App启动显示“Welcome to React Native”。
3. 记录日志：用DevEco日志查看，运行成功证据：截屏App首页。

④ 代码提交规范

将工程代码（配置文件、src源码、assets资源、logs日志）提交到AtomGit。commit message如“chore: init project && first commit”，粒度控制在每个功能点一commit。仓库可直接clone复现：npm install后hvigor build运行。

完整仓库链接：https://gitcode.com/u013460287/AtomGitPractice.git。

任务二：为开源鸿蒙跨平台工程集成网络请求能力，实现数据清单列表的完整构建与开源鸿蒙设备运行验证

① 网络能力与权限配置

继续在AtomGitNews工程上集成网络。开源鸿蒙用原生API。

• 权限声明：在module.json5添加"requestPermissions": [
  { “name”: “ohos.permission.INTERNET” }
  ],"。
• 配置：确保build-profile.json里enableNetwork=true。测试用fetch API简单get请求。

小白经验：权限没加会报403错误，查手册才解决。

② 数据清单列表构建

基于网络请求，返回JSON数据构建列表。假设API是https://jsonplaceholder.typicode.com/todos，返回todo列表。

• 数据解析：用JSON.parse处理response。
• 列表渲染：用React Native的FlatList组件，item显示title和completed。
• 兜底展示：空数据show“无数据”，异常用try-catch显示“网络错误”。

代码示例（Index.ets）：

import {
  AnyJSBundleProvider,
  ComponentBuilderContext,
  FileJSBundleProvider,
  MetroJSBundleProvider,
  ResourceJSBundleProvider,
  RNApp,
  RNOHErrorDialog,
  RNOHLogger,
  TraceJSBundleProviderDecorator,
  RNOHCoreContext
} from '@rnoh/react-native-openharmony';
import { createRNPackages } from '../RNPackagesFactory';

@Builder
export function buildCustomRNComponent(ctx: ComponentBuilderContext) {}

const wrappedCustomRNComponentBuilder = wrapBuilder(buildCustomRNComponent)

@Entry
@Component
struct Index {
  @StorageLink('RNOHCoreContext') private rnohCoreContext: RNOHCoreContext | undefined = undefined
  @State shouldShow: boolean = false
  private logger!: RNOHLogger

  aboutToAppear() {
    this.logger = this.rnohCoreContext!.logger.clone("Index")
    const stopTracing = this.logger.clone("aboutToAppear").startTracing();

    this.shouldShow = true
    stopTracing();
  }

  onBackPress(): boolean | undefined {
    this.rnohCoreContext!.dispatchBackPress()
    return true
  }

  build() {
    Column() {
      if (this.rnohCoreContext && this.shouldShow) {
        if (this.rnohCoreContext?.isDebugModeEnabled) {
          RNOHErrorDialog({ ctx: this.rnohCoreContext })
        }
        RNApp({
          rnInstanceConfig: {
            createRNPackages,
            enableNDKTextMeasuring: true, // 该项必须为true，用于开启NDK文本测算
            enableBackgroundExecutor: false,
            enableCAPIArchitecture: true, // 该项必须为true，用于开启CAPI
            arkTsComponentNames: []
          },
          initialProps: { "foo": "bar" } as Record<string, string>,
          appKey: "AtomGitNews",
          wrappedCustomRNComponentBuilder: wrappedCustomRNComponentBuilder,
          onSetUp: (rnInstance) => {
            rnInstance.enableFeatureFlag("ENABLE_RN_INSTANCE_CLEAN_UP")
          },
            jsBundleProvider: new TraceJSBundleProviderDecorator(
            new AnyJSBundleProvider([
              new MetroJSBundleProvider(),
              //优先使用打包的资源，而不是设备上残留的任何过时文件。
              new ResourceJSBundleProvider(this.rnohCoreContext.uiAbilityContext.resourceManager, 'hermes_bundle.hbc'),
              new ResourceJSBundleProvider(this.rnohCoreContext.uiAbilityContext.resourceManager, 'bundle.harmony.js'),
              new FileJSBundleProvider('/data/storage/el2/base/files/bundle.harmony.js'),
            ]),
            this.rnohCoreContext.logger),
        })
      }
    }
    .height('100%')
    .width('100%')
  }
}

交互流畅：滚动无卡顿。

③ 可选拓展（三方库接入）

我选择了React Native技术栈的axios库（OpenHarmony兼容）。集成：npm install axios，版本^1.0.0。

• 使用要点：支持拦截器，我加了loading interceptor。差异：鸿蒙下promise兼容好，但timeout要手动调。

代码替换fetch为axios：

import axios, {AxiosError, AxiosHeaders} from 'axios';

export const http = axios.create({
  baseURL: 'https://api.gitcode.com/api/v5',
  timeout: 10000,
  headers: {
    Accept: 'application/json',
  },
  transformResponse: [
    data => {
      if (typeof data !== 'string') return data;
      try { return JSON.parse(data); } catch { return data; }
    },
  ],
});

④ 开源鸿蒙终端运行验证与代码提交规范

在模拟器运行：列表加载数据正常。日志记录请求时长<500ms。

更新代码推到AtomGit，commit如“feat:网络请求功能可运行，数据清单加载正常”。仓库完整，可clone复现。

总结与小白心得

作为小白，从环境搭建到网络集成，花了4天，但现在能独立开发简单App了。关键是多试错，多问。
欢迎加入开源鸿蒙跨平台社区: https://openharmonycrossplatform.csdn.net