鸿蒙应用开发--代码单词页面实现: web混合开发,html标签高亮,播放单词音频,--待更新-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_88846919/article/details/146169526

总结

这个项目就是鸿蒙中的数据传递给网页，网页执行一段逻辑之后，将文本高亮显示在用户眼前.
单词朗读,使用AVplayer,需要关注api和状态变化.执行对应的逻辑

我的页面,给builder绑定点击事件的回调函数

在这里插入图片描述

单词页面的结构

有两个模态框

获取存在resources文件夹里面的word.json

上下文=> 资源管理器 => 获取rawfile里面的内容=>得到unit8Array类型的二进制数组=>使用util.textdecoder解码成string=>再使用JSON.stringfy转换成对象
获取rawfile
将文本转换成字符串
 资源的分类与访问
 resourceManagerapi

在这里插入图片描述

还有一种方法,在测试
ResourceManager

经过验证发现,不太能走通.因为需要获取资源的id, $r () 资源有 i d, 但是$ rawfile资源并不会打包进,所以不会分配id,而且这样的话,代码不会报错,但是不会走通.通过调试发现,当执行到.getStringSync(strId)的时候,代码就被阻塞了
在这里插入图片描述

在这里插入图片描述

代码高亮

在这里插入图片描述


<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Word</title>
    <link rel="stylesheet"
          href="./github.min.css">
    <script src="./highlight.min.js"></script>
    <style>
        code {
          font-size: 16px;
          line-height: 1.6
        }

    </style>
</head>
<body>
<pre><code></code></pre>
<script>
function writeCode(str) {
  const el = document.querySelector('code');
  el.innerHTML = hljs.highlightAuto(str).value;
}



</script>
</body>
</html>

[高亮js代码在资源里面,可以下载]

在这里插入图片描述
通过web组件绑定{src:‘’,controller: }加载html文件.
通过.onPageEnd()事件判定html加载完,然后执行脚本
runjavascript

 Web({ src: $rawfile('index.html'), controller: this.controller })
        .javaScriptAccess(true)
        .onPageEnd(e => {
          try {
            this.controller.runJavaScript(
            💕
              'test()',
              (error, result) => {
                if (error) {
                  console.error(`run JavaScript error, ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
                  return;
                }
                if (result) {
                  this.webResult = result;
                  console.info(`The test() return value is: ${result}`);
                }
              });
            if (e) {
              console.info('url: ', e.url);
            }
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })