HarmonyOS 鸿蒙Next中卡片如何渲染网页

选型API版本

不同版本的API，支持的接口或者语言规范并不完全相同，在鸿蒙官网可以有三种模式可以参考。

API 6下的基于JS的类web开发范式

采用经典的HML、CSS、JavaScript三段式开发方式，将已有的Web网页改造鸿蒙应用。

    <web src="https://xxx" id="web"></web>

API 6下的基于Java的开发模式

在java代码里动态创建webview后并调用load方法加载网页地址

 DirectionalLayout dLayout = new DirectionalLayout(this);
  dLayout.setLayoutConfig(new ComponentContainer.LayoutConfig(
      ComponentContainer.LayoutConfig.MATCH_PARENT,
      ComponentContainer.LayoutConfig.MATCH_PARENT
  ));
  super.setUIContent(dLayout);
  WebView webView = new WebView(getContext());
  webView.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT);
  webView.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT);
  dLayout.addComponent(webView);

  webView.load("https://xxx");

API 9下基于Arkts的开发模式

通过导入webview后创建webviewController，使用Web组件默认加载网页，使用loadUrl动态加载其他网页

import web_webview from '@ohos.web.webview';
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('loadUrl')
        .onClick(() => {
          try {
            // 点击按钮时触发跳转到https://new
            this.webviewController.loadUrl("https://new");
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      // 组件创建时，默认加载https://xxx
      Web({ src: "https://xxx", controller: this.webviewController})
    }
  }
}