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

【每日学点鸿蒙知识】WebView事件监听、构建工具校验规则、避让区域问题、Grid布局对齐、字符串转base64

article 2025/1/2 21:38:04

1、HarmonyOS的webview如何监听滚动事件？H5如何直接调用拨打电话？

webview监听滚动事件以及电话调起代码如下: 第一个web组件监听滚动事件，第二个web组件H5调起拨打电话。

//xxx.ets
import webView from '@ohos.web.webview';
import { call } from '@kit.TelephonyKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebPage {
  controller: webView.WebviewController = new webView.WebviewController();
  aaa: number = 0

  build() {
    Column({ space: 20 }) {
      Web({ src: 'https://developer.huawei.com/consumer/cn/', controller: this.controller })
        .height(500)
        .javaScriptAccess(true)
        .domStorageAccess(true)
        .verticalScrollBarAccess(true)
        .onScroll((event) => {
          if (event.yOffset > this.aaa) {
            console.log('aaa下滑')
          }
          if (this.aaa > event.yOffset) {
            console.log('aaa上滑');
          }
          this.aaa = event.yOffset
        })

      Divider()

      Web({ src: $rawfile('call.html'), controller: this.controller })
        .height(500)
        .onLoadIntercept((event) => {
          if (event) {
            let url: string = event.data.getRequestUrl();
            // 判断链接是否为拨号链接
            if (url.indexOf('tel://') === 0) {
              call.makeCall(url.substring(6), (err: BusinessError) => {
                if (!err) {
                  console.log('make call success.');
                } else {
                  console.log('make call fail, err is:' + JSON.stringify(err));
                }
              });
              return true;
            }
          }
          return false;
        })
    }

  }

call.html：

<!DOCTYPE html> <html> <body> <div> <a href="tel://10086">拨打电话</a> </div> </body> </html>

2、mac构建与linux工具包构建校验规则不一致,如何修改为一致的大小写校验规则？

仅修改dependencies中的依赖为大写，代码import仍为小写时，本地编译（mac）能够通过，但是使用linux的Commandline打包会爆找不到对应的包
当前困难影响：容易导致开发同学以为本地编译过就没有问题把代码提上去，而流水线无法正常出包

在配置文件build-profile.json5中，设置strictMode字段为true “strictMode”: { “caseSensitiveCheck”: true } 编译器会对导入文件的大小写进行严格检查，如果文件名大小写不正确，将会导致编译报错
参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-hvigor-build-profile-V5

3、HarmonyOS 对Web组件使用expandSafeArea，但网页渲染内容没适应？

对Web组件使用expandSafeArea，但网页渲染内容没适应。

实现全屏展示web并隐藏状态栏和导航条可添加如下代码，在界面中无需进行导航条避让操作

// 1. 设置窗口全屏
let isLayoutFullScreen = true;
windowClass.setWindowLayoutFullScreen(isLayoutFullScreen)
// 2. 设置状态栏和导航条隐藏
windowClass.setSpecificSystemBarEnabled('status', false)

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-develop-apply-immersive-effects-V5#section202484117114

4、HarmonyOS Grid布局，按行排列，列数不固定，GridItem大小固定，如何让所有GridItem在中间，目前向左对齐了？

如果是相对Grid容器居中显示，可以使用margin属性设置偏移量。rowsTemplate、columnsTemplate仅设置其中的一个：元素按照设置的方向进行排布，超出Grid显示区域后，Grid可通过滚动的方式展示。如果设置了rowsTemplate，Grid滚动方向为水平方向，主轴方向为水平方向，交叉轴方向为垂直方向。最左边子组件是最先渲染的。

@Entry
@Component
struct Page617 {
  @State message: string = 'Hello World';
  @State numbers1: String[] = ['0', '1', '2', '3', '4']

  build() {
    RelativeContainer() {
      Grid() {
        ForEach(this.numbers1, (day: string) => {
          ForEach(this.numbers1, (day: string) => {
            GridItem() {
              Text(day)
                .fontSize(16)
                .backgroundColor(0xF9CF93)
                .width('50')
                .height('50')
                .textAlign(TextAlign.Center)
            }.margin({left:20,right:20})
          }, (day: string) => day)
        }, (day: string) => day)
      }

      // .columnsTemplate('1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr')
      .columnsGap(20)
      .rowsGap(20)
      .width('90%')
      .backgroundColor(0xFAEEE0)
      .height(300)
    }
    .height('100%')
    .width('100%')

  }
}

5、HarmonyOS 调用base64Helper.decodeSync解析网址会报错，有别的字符串转base64的方法码？

base64不支持特殊字符，需要对特殊字符先进行处理然后再操作。也可以考虑使用TextEncoder，TextDecoder对数据进行处理，参考文档：
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-util-V5#textencoder

查看全文

http://www.kler.cn/a/457887.html