HarmonyOS 鸿蒙Next 大家知道咱web如何直接加载 html的标签

HarmonyOS 鸿蒙Next 大家知道咱web如何直接加载 html的标签

请问下鸿蒙的web组件如何加载下面的html标签啊？

<h1>欢迎来到我的网站</h1>

<nav>
  <ul>
    <li><a href="">首页</a></li>
    <li><a href="">关于我们</a></li>
    <li><a href="">服务</a></li>
    <li><a href="">联系我们</a></li>
  </ul>
</nav>

<main>
  <section id="home">
    <h2>首页</h2>
    <p>这里是首页的内容。</p>
  </section>

  <section id="about">
    <h2>关于我们</h2>
    <p>这里是关于我们的内容。</p>
  </section>

  <section id="services">
    <h2>服务</h2>
    <p>这里是服务内容的介绍。</p>
  </section>

  <section id="contact">
    <h2>联系我们</h2>
    <p>这里是联系我们的信息。</p>
  </section>
</main>

<footer>
  <p>版权所有 © 2024 月之暗面科技有限公司</p>
</footer>

更多关于HarmonyOS 鸿蒙Next 大家知道咱web如何直接加载 html的标签的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

可以参考这个demo：

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  htmlData:string="html内容"
  build() {
    Column() {

      // 组件创建时，加载www.example.com
      Web({ src: 'www.example.com', controller: this.controller })
        .onControllerAttached(() => {

         setTimeout(() =>{
           this.controller.loadData(
             "<html><body bgcolor=white>"+this.htmlData+"</body></html>",
             "text/html",
             "UTF-8"
           );
         },100)


        })
    }

  }

}

更多关于HarmonyOS 鸿蒙Next 大家知道咱web如何直接加载 html的标签的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我跑了这个demo是ok的，多谢兄弟~，

使用loaddata

对不起，您提供的内容并不包含HTML标签或图片链接。根据您的要求，不需要显示“基本信息”且要去掉复制和深色代码主题，也不包含需要转换的图片，因此转换后的Markdown内容将保持不变。

转换后的Markdown文档：

我看上面那个兄弟给的就是这个api，谢啦。

在HarmonyOS（鸿蒙）系统中，如果你想在Web视图中直接加载HTML标签，通常会使用鸿蒙提供的WebView组件。以下是如何在鸿蒙应用中进行此操作的基本步骤：

  1. 引入WebView组件： 确保你的项目中已经引入了WebView组件。这通常涉及到在项目的config.json文件中添加相应的模块依赖。

  2. 布局文件中添加WebView： 在你的布局XML文件中，添加WebView组件，并为其设置一个ID，以便在代码中引用。

  3. 在代码中加载HTML： 在你的JavaScript或TypeScript代码中，通过ID获取WebView组件的实例，然后使用其提供的方法来加载HTML内容。例如，如果WebView组件提供了loadUrl或类似的方法，你可以使用它来加载一个包含HTML标签的URL或HTML字符串。

  4. 处理权限和配置： 确保你的应用具有访问网络的权限（如果需要从网络加载HTML），并在必要时配置相应的网络权限。

示例代码（伪代码，具体实现需参考鸿蒙开发文档）：

// 获取WebView组件实例
let webView = this.$refs.webView;

// 加载HTML内容
webView.loadUrl('file:///android_asset/sample.html'); // 本地HTML文件
// 或者
webView.loadData('<html><body><h1>Hello, HarmonyOS!</h1></body></html>', 'text/html', 'UTF-8'); // 直接加载HTML字符串

请注意，上述代码是概念性的，并非直接可运行的代码。具体实现需根据鸿蒙的开发文档和API进行调整。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部