当前位置：首页 > news >正文

【每日学点HarmonyOS Next知识】Web上传文件、监听上下左右区域连续点击、折叠悬停、字符串相关、播放沙盒视频

news 来源：原创 2025/8/26 19:54:33

1、HarmonyOS APP内h5原生webview `input[type='file']`无法唤醒手机上传？

文件上传要使用对应的picker
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-file-upload-V5

Web组件支持前端页面选择文件上传功能，应用开发者可以使用onShowFileSelector()接口来处理前端页面文件上传的请求，如果应用开发者不做任何处理，Web会提供默认行为来处理前端页面文件上传的请求。

下面的示例中，当用户在前端页面点击文件上传按钮，应用侧在onShowFileSelector()接口中收到文件上传请求，在此接口中开发者将上传的本地文件路径设置给前端页面。

应用侧代码。

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
import { picker } from '@kit.CoreFileKit';@Entry
@Component
struct WebComponent {controller: webview.WebviewController = new webview.WebviewController();build() {Column() {Web({ src: $rawfile('local.html'), controller: this.controller }).onShowFileSelector((event) => {console.log('MyFileUploader onShowFileSelector invoked');const documentSelectOptions = new picker.DocumentSelectOptions();let uri: string | null = null;const documentViewPicker = new picker.DocumentViewPicker();documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => {uri = documentSelectResult[0];console.info('documentViewPicker.select to file succeed and uri is:' + uri);if (event) {event.result.handleFileList([uri]);}}).catch((err: BusinessError) => {console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);})return true;})}}
}

local.html页面代码。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Document</title>
</head><body>
<!-- 点击上传文件按钮 -->
<input type="file" value="file"></br>
<meta name="viewport" content="width=device-width" />
</body>
</html>

2、HarmonyOS 当前页面监听上下左右区域的连续点击？

在某个特殊的页面会通过连续的点击功能来启动测试页面，比如在2s内连续点击页面的左左左，右右右，上上，下下，然后就启动一个功能或者跳转一个页面。如何能监听到这些事件。请参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-uicontext-V5#ZH-CN_TOPIC_0000001884757690__onwillclick12

3、HarmonyOS 对于FolderStack组件，当折叠悬停时，怎么使CustomDialog也放到下半屏？

可以参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-folderstack-V5
建议使用PromptAction.openCustomDialog，支持动态刷新；可以监听折叠屏是悬停态的时候动态改变这个弹窗builder里面的高度，然后通过偏移放到下半屏靠边就好

PromptAction.openCustomDialog参考文档：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-UIContext.md#opencustomdialog12

示例：

import { PromptAction,promptAction  } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';let promptAction: PromptAction = uiContext.getPromptAction();
try {promptAction.showActionMenu({title: 'showActionMenu Title Info',buttons: [{text: 'item1',color: '#666666'},{text: 'item2',color: '#000000'},]}).then(data => {console.info('showActionMenu success, click button: ' + data.index);}).catch((err:Error) => {console.error('showActionMenu error: ' + err);})
} catch (error) {let message = (error as BusinessError).message;let code = (error as BusinessError).code;console.error(`showActionMenu args error code is ${code}, message is ${message}`);
};

4、HarmonyOS ResourceStr输出string？

把string定义在资源文件中，使用ResourceStr ，现在想获取buttonText的string内容，和服务器的string进行比对，要怎么输出buttonText的string内容。

使用getStringSync方法。参考地址：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-resource-manager-V5#ZH-CN_TOPIC_0000001847052344__getstringsync9-1

demo如下：

import resourceManager from '@ohos.resourceManager';
import { common } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';@Entry
@Component
struct Index2 {@State message: string = 'Hello World';@State buttonText: Resource = $r('app.string.caijiOnly')context = getContext(this) as common.UIAbilityContext;aboutToAppear(): void {let resource: resourceManager.Resource = {bundleName: "com.example.mydemo", //修改为自己的包名moduleName: "entry",id: $r('app.string.caijiOnly').id};try {this.context.resourceManager.getStringSync(resource);console.log("官网示例：" + this.context.resourceManager.getStringSync(resource))console.log("buttonText：" + this.context.resourceManager.getStringSync(this.buttonText))} catch (error) {let code = (error as BusinessError).code;let message = (error as BusinessError).message;console.error(`getStringSync failed, error code: ${code}, message: ${message}.`);}}build() {Column() {Text(this.message)}}
}

5、HarmonyOS 应用沙盒路径视频无法播放？

想实现使用video组件简单播放视频的功能，但存在应用沙盒内的视频路径无法播放
使用video组件，填入正确存在的沙盒路径后显示黑屏，无法播放。尝试填入uri也无法播放，但相同的视频若存储在rawfile文件夹下则可以播放。所以应用沙盒中的视频该如何实现播放？

应用沙盒路径视频无法播放的原因主要是由于沙盒机制的限制。
因为采用了沙盒机制，每个应用都有自己的沙盒，应用只能访问自己沙盒内的文件和资源。
沙盒机制的影响：应用沙盒路径下的文件在应用沙盒之外是无法直接访问的。例如，如果你尝试在应用沙盒路径下播放视频，系统会返回文件不存在的错误。这是因为应用沙盒路径对应的实际路径在调试进程视角下是无法访问的。

解决方法
1.使用DevEco Studio推送文件：将需要的文件放入应用安装路径中，这样可以确保文件在应用沙盒之外也能被访问。
2.使用hdc工具推送文件：通过hdc工具将文件推送到设备的应用沙盒路径之外的位置。例如，可以将文件推送到设备的存储目录下，然后通过ContentResolver获取媒体文件的URI来播放视频。
3.路径映射关系：需要了解应用沙盒路径与调试进程视角下的真实物理路径之间的映射关系。例如，应用沙盒路径【每日学点HarmonyOS Next知识】Web上传文件、监听上下左右区域连续点击、折叠悬停、字符串相关、播放沙盒视频“/data/storage/el1/bundle”对应的真实物理路径是“/data/app/el1/bundle/public/<PACKAGENAME\>”

1、HarmonyOS APP内h5原生webview input[type='file']无法唤醒手机上传？

2、HarmonyOS 当前页面监听上下左右区域的连续点击？

3、HarmonyOS 对于FolderStack组件，当折叠悬停时，怎么使CustomDialog也放到下半屏？

4、HarmonyOS ResourceStr输出string？

5、HarmonyOS 应用沙盒路径视频无法播放？

相关文章：

1、HarmonyOS APP内h5原生webview `input[type='file']`无法唤醒手机上传？