企业官网建设流程全解析

游戏网站html模板,个人工作室和公司的区别,新闻稿撰写,wordpress 好用吗本笔记详细记录了在 Windows 11 环境下搭建 React Native for OpenHarmony (RNOH) 开发环境、创建多终端工程、以及代码提交至 AtomGit 的全流程。 一、 开发环境搭建 1.1 前置软件安装 在开始配置 OpenHarmony 特有环境前#xff0c;需完成以下基础软件的安装#xff08;…本笔记详细记录了在 Windows 11 环境下搭建 React Native for OpenHarmony (RNOH) 开发环境、创建多终端工程、以及代码提交至 AtomGit 的全流程。一、 开发环境搭建1.1 前置软件安装在开始配置 OpenHarmony 特有环境前需完成以下基础软件的安装参考已验证的教程VS Code: 代码编辑器 安装指南Git: 版本控制工具 安装指南Java (JDK 17): 必须安装 JDK 17RNOH 依赖此版本 安装指南Android Studio: 用于管理通用移动端依赖可选建议安装 安装指南DevEco Studio: 鸿蒙应用开发核心 IDE 安装指南完成安装后启动运行界面如下系统提供了很多模板在文件-新建项目下可以非常方便的新建项目。1.2 OpenHarmony SDK 下载与配置打开DevEco Studio进入SettingsSDK。勾选并下载API 10 (或更高版本)的 SDK。确保同时下载了OpenHarmony SDK和HarmonyOS SDK视具体目标设备而定。在 SDK Tools 标签页中勾选安装Native(C 工具链)CMakeCommand Line Tools(hdc 工具在此包含)1.3 环境变量配置 (关键)为了支持 React Native 的 C 编译和命令行工具需配置系统环境变量JAVA_HOME: 指向 JDK 17 安装目录 (例如C:\Program Files\Java\jdk-17).OHOS_SDK_HOME: 指向 DevEco SDK 安装目录 (例如C:\Users\YourUser\AppData\Local\OpenHarmony\Sdk).HDC_HOME(可选): 指向 toolchains 目录%OHOS_SDK_HOME%\10\toolchains.Path: 添加以下路径到系统 Path 变量中%JAVA_HOME%\bin%OHOS_SDK_HOME%\10\toolchains(用于 hdc 命令)%OHOS_SDK_HOME%\10\native\build-tools\cmake\bin(用于 cmake 编译)验证: 打开 PowerShell 输入hdc -v和cmake -version应能正确输出版本号。1.4 多设备调试驱动真机 (Phone/Pad): 开启开发者模式 - USB 调试。连接电脑后使用hdc list targets查看设备 ID。模拟器: 在 DevEco Studio Device Manager 中创建 API 10 的模拟器并启动。开发板 (如 DAYU200): 通过 USB 连接确保安装了相应的 USB 串口驱动。我们在开发过程中需要经常用到模拟器所以一定要学会模拟器的安装方法。选中Device Manager 根据本机配置创建。在如下界面创建新机并选择合适的配置。二、 Git 与 AtomGit 仓库操作2.1 创建 AtomGit 仓库登录 AtomGit。点击右上角 “” - “新建仓库”。填写仓库信息仓库名称:rnoh-cross-platform-demo(示例)描述: React Native for OpenHarmony 跨平台开发实战项目公开性: 选择公开初始化: 勾选 “添加 README.md”, “.gitignore” (选择 Node 或 C 模板), “开源许可证” (推荐 Apache-2.0 或 MIT)。创建完成后复制 HTTPS 或 SSH 克隆地址。2.2 本地 Git 初始化与配置在本地工作区执行# 全局配置用户签名gitconfig --global user.nameYourNamegitconfig --global user.emailyour.emailexample.com# 克隆仓库gitclone https://atomgit.com/YourUsername/rnoh-cross-platform-demo.gitcdrnoh-cross-platform-demo2.3 分支管理规范main: 主分支存放稳定版本代码。dev: 开发分支日常开发使用。feature/xxx: 功能分支开发特定功能时从 dev 切出。# 创建并切换到开发分支gitcheckout -b dev三、 工程创建与多终端运行验证3.1 创建 RNOH 工程使用 React Native 官方 CLI 结合 RNOH 模板创建项目# 1. 初始化标准 RN 项目 (版本需参考 RNOH 官方推荐如 0.72.5)npx react-native0.72.5 init MyRNOHApp# 2. 进入项目并安装鸿蒙适配依赖cdMyRNOHAppnpminstallrnoh/react-native-openharmony# 3. 补全鸿蒙工程结构 (参考 RNOH 官方文档或模板)# 通常需要将 sample 中的 harmony 文件夹复制到项目根目录# 并修改 harmony/build-profile.json5 中的签名配置3.2 工程配置与依赖Local Properties: 在harmony/local.properties中指定 SDK 路径sdk.dirC:/Users/YourUser/AppData/Local/OpenHarmony/Sdk权限声明: 在harmony/entry/src/main/module.json5中添加网络权限等requestPermissions:[{name:ohos.permission.INTERNET}]3.3 编译与运行确保 Metro 服务已启动npmstart场景 A: 模拟器/真机运行使用 DevEco Studio 打开harmony目录等待 Sync 完成。在右上角选择运行设备模拟器或真机。点击Run ‘entry’(绿色三角形)。场景 B: 命令行运行 (进阶)# 确保 hdc 连接正常cdharmony ./hvigorw.bat assembleHap --mode debug hdcinstallentry/build/default/outputs/default/entry-default-signed.hap3.4 运行日志与证据日志查看: 在 DevEco Studio 底部Log窗口或使用命令hdc hilog。截图保存: 运行成功后截取模拟器/真机画面保存为run_evidence_emulator.png或run_evidence_device.png放入docs目录。四、 代码提交规范完成开发验证后将代码推送到 AtomGit。4.1 清理与忽略确保.gitignore包含以下内容避免提交临时文件node_modules/ .idea/ .vscode/ android/app/build/ ios/Pods/ harmony/entry/build/ harmony/.hvigor/ *.hap local.properties4.2 提交代码# 1. 添加文件gitadd.# 2. 提交 (使用清晰的 Commit Message)gitcommit -mfeat: 完成RNOH工程初始化及多端运行适配# 格式建议: type(scope): subject# type: feat(新功能), fix(修补), docs(文档), chore(构建/依赖)# 3. 推送到远程 dev 分支gitpush origin dev4.3 合并到主分支 (Release)在 AtomGit 平台发起 Pull Request或在本地合并gitcheckout maingitmerge devgitpush origin main五、 常见问题与避坑指南 (Troubleshooting)5.1 Metro 连接问题现象: App 启动后一直显示 “Connecting to Metro…” 或白屏。原因: 真机/模拟器无法访问电脑端的 8081 端口。解决:必须使用 hdc 进行端口转发hdc rport tcp:8081 tcp:8081确保电脑和手机在同一 Wi-Fi 下如果是无线调试。检查harmony/entry/src/main/resources/rawfile/rn_config.json中的bundleUrl是否正确指向了电脑 IP。5.2 C 编译报错 (CMake Error)现象: Sync 或 Build 时报错CMake Error: ...或Ninja not found。原因: 环境变量未生效或 SDK 路径配置错误。解决:检查local.properties中的路径分隔符是否为/(Windows 下不要用单反斜杠\)。确保cmake命令在终端可直接执行。如果使用 DevEco Studio 4.0建议清理.hvigor和build目录后重试。5.3 签名失败现象: 安装 HAP 时提示INSTALL_FAILED_VERIFY_APP_PKCS7_FAIL。解决:必须在 DevEco Studio 中配置自动签名 (Project Structure Signing Configs Automatically generate signature)。如果是真机需要确保设备 UDID 已添加到签名文件中。六、 开发感悟与经验总结 (Insights)6.1 架构视角的转变与 Android/iOS 的 React Native 不同RNOH 采用了更激进的C-API 架构。这意味着 JavaScript 代码直接通过 N-API 与 C 层交互最后通过 ArkUI 的 XComponent 进行渲染。优势: 理论上性能上限更高因为绕过了部分 Java/JS Bridge 的开销。挑战: 对 C 环境依赖更重初次配置比 Android 复杂需要开发者对 Native 编译流程有一定了解。6.2 版本“强绑定”RNOH 目前处于快速迭代期版本兼容性极为敏感RN 版本: 必须严格使用 RNOH 官方文档指定的 React Native 版本如0.72.5不要随意升级到最新版。API 版本: OpenHarmony API 10 和 API 11 的底层接口差异较大务必确认 SDK 版本与 RNOH 版本的对应关系。6.3 跨平台开发的“最后一公里”虽然 React Native 实现了“一次编写到处运行”但在鸿蒙平台上目前仍需手动处理不少“最后一公里”的工作第三方库的适配如相机、地图往往需要寻找对应的ohos适配版本或自己实现 TurboModule。因此不仅要懂 React还要适当补充 ArkTS 和 C 的知识这将是未来鸿蒙跨端开发者的核心竞争力。七、 生态资源RNOH 核心仓库: react-native-openharmony三方库适配列表: RNOH 三方库列表官方文档: RNOH 文档中心欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net