Electron开发应用上架鸿蒙PC经验总结

在Electron应用适配鸿蒙PC并上架的过程中，开发者常会遇到权限申请、功能对接、系统特性适配等问题。本文整理了核心场景的解决方案与关键经验，供参考实践。

一、权限申请与常见问题

权限处理是应用上架的基础，尤其需注意系统级权限的申请规范与替代方案。

1. ohos.permission.kernel.ALLOW_WRITABLE_CODE_MEMORY权限

该权限用于允许应用申请可写可执行匿名内存，主要支持动态代码生成场景，但受严格限制。

核心说明

• 适用场景：仅允许用于应用自带引擎的即时编译（如实时渲染、动态解析），禁止用于热更新；
• 特殊要求：需主动适配坚盾模式（避免闪退），且仅限平板、PC/2in1设备应用申请；
• 权限级别：system_basic，授权方式为系统授权（system_grant）。

常见问题与解决方案

问题：申请该权限被拒绝后，移除权限导致浏览器视频播放提示“版本过低”（此前有权限时可正常播放）。
解决：升级鸿蒙PC至6.0版本，其ArkWeb内核基于Chromium M132（默认启用），可解决低版本内核兼容性问题。
（系统版本与Chromium内核对应关系：鸿蒙PC 4.0及以前→M99；4.1-5.1→M114；6.0→M132）

注意事项

该权限实际属于system_core级别，普通应用无法申请，仅限预置系统应用或白名单授权应用使用。替代方案：优先使用鸿蒙PC安全沙箱机制，避免直接内存写入。

二、核心功能对接指南

1. 内购支付端口对接

Electron层可通过绑定ArkTS方法实现内购支付功能，步骤如下：

1. 参考《Electron调用ArkTS指导》，将内购支付相关方法绑定到Electron；
2. 利用项目中已实现的adapter插件，在web_engine/src/main/ets/jsbindings路径下完成鸿蒙方法绑定，供Electron调用。

2. 窗口拖拽功能（setMovable）

鸿蒙PC Electron的窗口类型决定了是否支持拖拽设置：

• 主窗：支持通过setMovable接口设置是否可拖拽（参考Electron官方文档）；
• 子窗、悬浮窗：暂不支持setMovable，需避免对这类窗口使用该接口。

3. 文件读写操作

鸿蒙PC Electron的文件读写需结合权限申请与系统对话框，不同目录的处理方式不同：

目录类型	读权限	写权限	对应路径示例
桌面/下载/文档	可申请权限，dialog支持	可申请权限，dialog支持	/storage/Users/currentUser/Desktop
应用沙箱目录	直接读写（通过app.getPath('appData')获取路径）	直接读写	/data/storage/el2/base/files/*
应用工程目录	直接读（通过app.getAppPath()获取路径）	无写权限	/data/storage/el1/bundle/electron/...
其他目录（如音乐/图片）	不可申请，dialog不支持	不可申请，dialog不支持	-

代码示例（桌面/下载/文档读写）

读取文件：

try {
  // 申请目录权限
  systemPreferences.requestDirectoryPermission().then(async (enable) => {
    if (enable) {
      // 打开文件选择对话框
      const filePath = await dialog.showOpenDialogSync({
        buttonLabel: "确认",
        filters: [{ name: '所有文件', extensions: ['*'] }]
      });
    }
  });
} catch (e) {
  console.error("读取失败：", e);
}

保存文件：

try {
  systemPreferences.requestDirectoryPermission().then(async (enable) => {
    if (enable) {
      // 打开保存对话框
      const savePath = await dialog.showSaveDialogSync({
        defaultPath: "未命名.md",
        properties: ['showOverwriteConfirmation'],
        filters: [{ name: 'Markdown文件', extensions: ['md'] }]
      });
    }
  });
} catch (e) {
  console.error("保存失败：", e);
}

4. 华为账号登录集成

根据登录类型不同，集成方式有所区别：

（1）华为账号一键登录（支持获取手机号）

1. 下载鸿蒙PC化Electron样例工程；
2. 在main.js中调用showHuaweiQuickLogin()接口触发登录：

   const { BrowserWindow } = require('electron');
   let mainWindow = new BrowserWindow({ width: 800, height: 600 });
   mainWindow.showHuaweiQuickLogin(); // 调用一键登录
   

3. 在QuickLoginButtonComponent.ets中自定义登录窗口样式；
4. 提前配置client_id并获取scope权限（参考官方指南）。

（2）华为账号登录（不获取手机号）

鸿蒙PC Electron暂未提供直接API，可通过两种方式实现：

• 主进程：参考《Electron调用ets指导》绑定ArkTS登录逻辑；
• 渲染进程：通过华为账号OAuth服务实现网页登录（步骤参考官方文档），需配置回调地址与Client ID。

三、鸿蒙PC PC适配方案

鸿蒙PC PC支持Electron应用，提供两种接入方案：

方案	支持调用addon	支持调用ArkTS	适用场景
方案一（自编译）	是	是	需深度定制原生功能
方案二（编译产物）	否	否	快速开发，无需原生功能扩展

关键资源

• 入门指导：《Electron框架鸿蒙PC开发指导》（含编译、环境搭建步骤）；
• 示例代码：Electron 鸿蒙PC平台示例；
• 进阶文档：《Electron调用ArkTS指导》《Electron加载addon指导》（含node-sqlite3示例）。

四、常见FAQ

• Q：视频全屏后中文字幕模糊？
  A：移除字体样式中的-webkit-text-stroke属性（鸿蒙PC PC不兼容该属性）。

通过以上内容，可解决Electron应用上架鸿蒙PC的核心问题，建议结合官方文档与示例工程实践，确保功能兼容性与权限合规性。