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

【每日学点鸿蒙知识】WebView代理、2D绘制矩形圆角、TextInput清理按钮、pdf滑动、icon配置问题

news 来源：原创 2025/7/21 5:32:29

1、HarmonyOS Webview 支持设置代理功能吗？

使用Web的onInterceptRequest先拦截再代理来实现。具体可以参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#ZH-CN_TOPIC_0000001930757269__oninterceptrequest9

onInterceptRequest(callback: Callback<OnInterceptRequestEvent, WebResourceResponse>)

当Web组件加载url之前触发该回调，用于拦截url并返回响应数据。
系统能力： SystemCapability.Web.Webview.Core
参数：

参数名	类型	必填	说明
callback	Callback	是	当Web组件加载url之前触发。返回值WebResourceResponse。返回响应数据则按照响应数据加载，无响应数据则返回null表示按照原来的方式加载。
示例：

// xxx.ets
import { webview } from '@kit.ArkWeb';@Entry
@Component
struct WebComponent {controller: webview.WebviewController = new webview.WebviewController();responseWeb: WebResourceResponse = new WebResourceResponse();heads: Header[] = new Array();webData: string = "<!DOCTYPE html>\n" +"<html>\n" +"<head>\n" +"<title>intercept test</title>\n" +"</head>\n" +"<body>\n" +"<h1>intercept test</h1>\n" +"</body>\n" +"</html>";build() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onInterceptRequest((event) => {if (event) {console.log('url:' + event.request.getRequestUrl());}let head1: Header = {headerKey: "Connection",headerValue: "keep-alive"}let head2: Header = {headerKey: "Cache-Control",headerValue: "no-cache"}// 将新元素追加到数组的末尾，并返回数组的新长度。let length = this.heads.push(head1);length = this.heads.push(head2);console.log('The response header result length is :' + length);const promise: Promise<String> = new Promise((resolve: Function, reject: Function) => {this.responseWeb.setResponseHeader(this.heads);this.responseWeb.setResponseData(this.webData);this.responseWeb.setResponseEncoding('utf-8');this.responseWeb.setResponseMimeType('text/html');this.responseWeb.setResponseCode(200);this.responseWeb.setReasonMessage('OK');resolve("success");})promise.then(() => {console.log("prepare response ready");this.responseWeb.setResponseIsReady(true);})this.responseWeb.setResponseIsReady(false);return this.responseWeb;})}}
}

2、HarmonyOS 关于使用OffscreenCanvasRenderingContext2D绘制问题？

绘制了一个矩形，但是不知道如何给这个矩形设置圆角，原始需求是绘制一个圆角是8的矩形

实现圆角就不能再用fillRect这个方法了，这是绘制长方形的，无论如何都是直角
能想到的解决方案就是用moveTo，arcTo，lineTo和stroke去绘制圆角矩形的轮廓，最后填充颜色圆角矩形的实现我这简单写了一个角，可以参考实现

@Entry
@Component
struct FillStyleExample {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() => {let offContext = this.offCanvas.getContext("2d", this.settings)offContext.fillStyle = 0x0000FFoffContext.moveTo(100, 20)offContext.arcTo(300, 20, 300, 70, 8)offContext.lineTo(300, 80)offContext.stroke()// offContext.fill()let image = this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width('100%').height('100%')}
}

3、HarmonyOS TextInput clearButton 位置问题？

TextInput 的clearButton 距离TextInput 的右边间距无法控制

目前textInput的cancelButton暂时不支持调整间距此场景可以通过自定义组件实现，以下是参考Demo：

@Entry
@Component
struct TextInputExample {@State text: string = ''@State changeType:InputType = InputType.Numbercontroller: TextInputController = new TextInputController()build() {Column() {Flex({direction: FlexDirection.Row}){Stack(){TextInput({ text: this.text, controller: this.controller }).type(this.changeType).placeholderFont({ size: 16, weight: 400 }).width('100%').height(56).onChange((value: string) => { this.text = value })Image($r('app.media.startIcon')).margin({ left: 290 }).width(20).height(20).onClick(() =>{this.text = ''})}}}.width('100%').height('100%').backgroundColor('#F1F3F5') } }

4、HarmonyOS Web打开pdf后，onScroll监控不到pdf滑动，怎么解决？

目前pdf是以插件的形式在web中加载的，暂不支持监听滚动条；可以通过web组件的onOverScroll通知网页过度滚动的偏移量的回调判断PDF是否到达顶端，底端。还可以通过Web组件的组件API（应用适配）或者网页的JS API（H5适配）来判断。

5、HarmonyOS $media:layered_image这个启动icon配置问题？

在项目安装到手机里面之后，屏幕上显示的图标异常，这个要怎么调整？

将foreground.png和background.png，的尺寸改小，即可解决图标显示不全的问题

1、HarmonyOS Webview 支持设置代理功能吗？

2、HarmonyOS 关于使用OffscreenCanvasRenderingContext2D绘制问题？

3、HarmonyOS TextInput clearButton 位置问题？

4、HarmonyOS Web打开pdf后，onScroll监控不到pdf滑动，怎么解决？

5、HarmonyOS $media:layered_image这个启动icon配置问题？

相关文章：