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

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 = 0x0000FF
          offContext.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.Number
  controller: 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,的尺寸改小,即可解决图标显示不全的问题

相关推荐
10年前端老司机3 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程7 小时前
2025前端面试题
前端·面试
Georgewu7 小时前
【HarmonyOS】元服务入门详解 (一)
harmonyos
前端小趴菜058 小时前
React - createPortal
前端·vue.js·react.js
coder_pig8 小时前
跟🤡杰哥一起学Flutter (三十五、玩转Flutter滑动机制📱)
android·flutter·harmonyos
晓13139 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo9 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴10 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78911 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼11 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript