HarmonyOS鸿蒙Next榜首：应用如何配置图标的前景图和后景图

本期问题如下（解决方案见评论区）：

应用如何配置图标的前景图和后景图？
当前是否支持鸿蒙PC模拟器？
Web组件加载PDF时，如何禁止用户点击PDF中的某些链接？
h5如何通过userAgent判断当前是否是HarmonyOS NEXT？
HarmonyOS NEXT手机怎么导出照片到电脑？

向所有参与社区互助的开发者致以最诚挚的感谢！

特别感谢本期优质答复贡献者：@乌拉大乌拉、@todayisall

社区的蓬勃发展，离不开每一位积极参与者的贡献。本期“答开发者问”栏目，精选自广大热心开发者针对提问帖所贡献的众多优质答复之中。

它们不仅是智慧与经验的璀璨结晶，更是“众人拾柴火焰高”这一真理的生动体现。在此，我们由衷地感谢每一位热心参与、乐于分享的开发者，

是你们的热情与智慧，让这个社区充满了生机与活力，每一次的解答都是对技术探索精神的最好诠释。同时，我们也诚挚邀请更多的开发者加入

到这场智慧碰撞的盛宴中来。无论是抛出难题寻求解答，还是慷慨解囊分享经验，您的每一份参与都将为鸿蒙开发者社区注入新的活力，推动我们共同前行，

在技术的海洋中扬帆远航。

更多关于HarmonyOS鸿蒙Next榜首：应用如何配置图标的前景图和后景图的实战教程也可以访问 https://www.itying.com/category-93-b0.html

caililin 1楼

问题五：HarmonyOS NEXT手机怎么导出照片到电脑？

目前在mate60 pro拍摄的照片需要导出到电脑，请问要如何操作？

解决方案：

mediatool是一个轻量级的命令行工具集合，开发者可通过此工具操作媒体库资源。媒体库为图库提供和管理数据，媒体库中的图片视频会在图库界面呈现。

mediatool工具为系统自带工具，不需要安装，内置在/bin文件夹中，可以通过hdc shell直接调用。

mediatool使用前置条件：

正常连接设备
系统设置中开启开发者模式
使用hdc shell进入命令行执行模式

导出指定图片参考：

> hdc shell mediatool query -u MyImage.jpg
find 1 result
uri
"file://media/Photo/1/IMG_1743078145_000/MyImage.jpg"
> hdc shell mediatool recv file://media/Photo/1 /data/local/tmp/out.jpg
Table Name: Photos
/data/local/tmp/out.jpg
> hdc file recv /data/local/tmp/out.jpg .
FileTransfer finish, Size:10015455, File count = 1, time:679ms rate:14750.30kB/s

导出所有媒体库资源参考：

> hdc shell mediatool recv all /data/local/tmp/media
Table Name: Photos
/data/local/tmp/media/MyImage.jpg

Table Name: Audios
> hdc shell tar -cvf /data/local/tmp/media.tar /data/local/tmp/media/*
removing leading '/' from member names
data/local/tmp/media/MyImage.jpg
> hdc file recv /data/local/tmp/media.tar .
FileTransfer finish, Size:10017280, File count = 1, time:664ms rate:15086.27kB/s

原链接：

鸿蒙next怎么导出照片到电脑-华为开发者问答 | 华为开发者联盟 (huawei.com)

更多关于HarmonyOS鸿蒙Next榜首：应用如何配置图标的前景图和后景图的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

nodeper 2楼

问题四：h5如何通过userAgent判断当前是否是HarmonyOS NEXT？

HarmonyOS NEXT上线后，h5投放到app里面，需要通过userAgent判断系统做兼容，应该如何通过userAgent进行判断？类似要区分HarmonyOS NEXT和其他系统。手机和pad的userAgent都会有特定标识吗？

解决方案：

User-Agent（简称UA）是一个特殊的字符串，包含设备类型、操作系统及版本等关键信息。在Web开发中，这个字符串使服务器能够识别请求的来源设备及其特性，从而根据这些信息提供定制化的内容和服务。

HarmonryOS系统默认User-Agent格式:

Mozilla/5.0 ({DeviceType}; {OSName} {OSVersion}) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/{ChromeCompatibleVersion}.0.0.0 Safari/537.36  ArkWeb/{ArkWeb VersionCode} {DeviceCompat} {扩展区}

字段	含义
DeviceType	当前的设备类型。取值范围： Phone：手机设备 Tablet：平板设备 PC：2in1设备
OSName	基础操作系统名称。默认取值：OpenHarmony
OSVersion	基础操作系统版本，两位数字，M.S。通过系统参数const.ohos.fullname解析版本号得到，取版本号部分M.S前两位。默认取值：例如5.0
ChromeCompatibleVersion	兼容Chrome主版本的版本号，从114版本开始演进。默认取值：114
ArkWeb	HarmonyOS版本Web内核名称。默认取值：ArkWeb
ArkWeb VersionCode	ArkWeb版本号，格式a.b.c.d。默认取值：例如4.1.6.1
DeviceCompat	前向兼容字段。默认取值：Mobile
扩展区	三方应用可以扩展的字段。三方应用使用ArkWeb组件时，可以做UA扩展，例如加入APP相关信息标识。

通过User-Agent中的{OSName}字段识别HarmonyOS系统。当{OSName}字段值为OpenHarmony表明当前操作系统为HarmonyOS。

const isHarmonyOS = () => /OpenHarmony/i.test(navigator.userAgent);

通过User-Agent中的{OSName}和{OSVersion}字段识别HarmonyOS系统及系统版本。格式为：OpenHarmony + 版本号。

const matches = navigator.userAgent.match(/OpenHarmony (\d+\.?\d*)/);
matches?.length && Number(matches[1]) >= 5;

通过User-Agent中的{DeviceType}字段识别设备类型，Phone代表手机、Tablet代表平板、PC代表2in1设备。

原链接： h5如何通过userAgent判断是否是HarmonyOS NEXT-华为开发者问答 | 华为开发者联盟 (huawei.com)

eggper 3楼

问题三：Web组件加载PDF时，如何禁止用户点击PDF中的某些链接？

Web组件加载PDF时，如何禁止用户点击PDF中的某些链接，比如:https://www.baidu.com。

解决方案：

监听页面加载事件：通过onLoadIntercept事件捕获链接点击，当Web组件加载URL之前触发该回调，用于判断是否阻止此次访问，默认不拦截。
示例代码如下：

import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebPDFPage {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Web({
        src: "resource://rawfile/test.pdf",
        controller: this.controller
      })
        .domStorageAccess(true)
        .onLoadIntercept((event) => {
          let requestUrl = event.data.getRequestUrl();
          console.info('------>requestUrl:' + requestUrl);

          // 判断网址路径吻合，返回true表示阻止此链接加载
          if (requestUrl.startsWith('https://www.baidu.com')) {
            return true;
          }

          // 允许加载
          return false;
        });
    }
  }
}

原链接：

Web组件加载PDF时，如何禁止用户点击PDF中的某些链接，比如：https://www.baidu.com-华为开发者问答 | 华为开发者联盟 (huawei.com)

gougou168 4楼

问题二：当前是否支持鸿蒙PC模拟器？

请问当前是否支持鸿蒙PC模拟器？如果支持的话该如何下载？

解决方案：

Deveco Studio 5.0.5 Release版本，正式对外公开2IN1模拟器，下载5.0.5 Release及以上版本DevEco Studio软件即可。
DevEco Studio软件安装完成后，点击菜单栏的Tools > Device Manager创建模拟器，Type类型选择2IN1。
参考文档：模拟器创建。

原链接：

Huawei Developer Forum Topic

sinazl 5楼作者

问题一：应用如何配置图标的前景图和后景图？

应用审核时，提示应用存在【应用未配置图标的前景图和后景图，标准要求尺寸1024px*1024px且需下载HUAWEI DevEco Studio 5.0.5.315或以上版本进行图标再处理】的问题，不符合鸿蒙应用UX设计规范，这个问题该如何解决？

解决方案：

审核出现问题中的提示是因为应用中配置的图标没有符合UX设计规范。应用图标资源需分层，尺寸需满足规范要求：应用图标资源必须分为前景图和背景图两层，尺寸要求必须为1024px*1024px，资源不允许自行裁切圆角，不允许在资源内添加内间距。可参照通用应用 UX 体验标准中‘2.1.4.3图标’章节里的判定标准。
官方文档配置分层图标引导用户在app.json5配置文件中配置icon和label，由于module.json5配置文件中配置的icon会覆盖app.json5配置文件中的icon，需要检查是否在module.json5配置文件中也配置了icon和label：
- 如果module.json5配置文件中的icon和label非必需，可以直接删去，减少冗余配置和错误几率。在DevEco Studio 5.0.3.800版本及之后，module.json5配置文件中的icon和label不再强制要求配置。
- 如果使用到的某些系统API，对module.json5配置文件中的icon和label存在依赖（例如：showAssetsCreationDialog），则需要在app.json5和module.json5配置文件都配置正确的icon和label。
下载使用HUAWEI DevEco Studio 5.0.5.315或以上版本进行再打包，发布应用。
在DevEco Studio中处理应用图标：
处理步骤可参考配置分层图标和图标和标签配置。

原链接： 应用未配置图标的前景图和后景图-华为开发者问答 | 华为开发者联盟 (huawei.com)

caililin 6楼

在HarmonyOS应用开发中，配置图标前景图和后景图需在resources目录下的base/media文件夹放置图片资源。前景图对应应用主要图标，后景图作为背景层。在config.json的"abilities"或"app"节点中，通过"icon"字段指定前景图路径，"background"字段指定后景图路径。图片格式推荐使用PNG，尺寸需符合官方规范。开发者工具会自动处理图层叠加。无需代码操作，纯资源配置即可完成。

songsunli 7楼

关于HarmonyOS Next应用图标前景图和后景图配置：

在资源目录(resources/base/media)中准备前景图(foreground)和后景图(background)资源文件

在config.json中配置图标：

"abilities": [{
  "icon": "$media:icon_foreground",
  "background": "$media:icon_background"
}]

前景图建议使用透明PNG格式，尺寸建议192x192px
后景图可使用纯色或简单图案，尺寸与前景图一致
系统会根据设备主题自动适配图标显示效果
可通过Preview工具预览不同主题下的图标效果

HarmonyOS鸿蒙Next榜首：应用如何配置图标的前景图和后景图

本期问题如下（解决方案见评论区）：

答开发者问系列汇总：

往期问题回顾：

注意：