HarmonyOS web组件预创建之后没法修改uicontext，导致无法复用？

Question

HarmonyOS web组件预创建之后没法修改uicontext，导致无法复用？

有个webview预创建的问题再咨询下，web预创建之后，使用的时候要怎么才能换掉对应的UIcontext。比如我用page A的uicontext进行预创建了一个web组件，使用的时候是在page b里使用的。如果在page b里使用之前预创建的web组件会不显示数据。怀疑是uicontext不对导致的问题

harmonyos harmonyos-next

阅读 1.2k

1 个回答

得票最新

HarmonyOS码上奇行

12k5214

发布于
3 月 25 日浙江

<!--index.html-->
  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  </head>
  <body>
  <h1>标题</h1>
  <h5 id="h5"></h5>
  <h5 id="h6"></h5>
  <button onclick="handleFromH5">调用Arkts的方法</button>
  <script type="text/javascript">
  function handleFromH5(){
    let result = window.objName.test();
    document.getElementById('h6').innerHTML = result;
  }
function test() {
  console.log('Ark WebComponent')
  return "This value is from index.html"
}
</script>
  </body>
  </html>

  //Index.ets
  import router from '@ohos.router';
import { createNWeb } from "../pages/common"
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  aboutToAppear(): void {
    createNWeb("https://www.huawei.com", this.getUIContext());
  }
  build() {
    Row() {
      Column() {
        Text(this.message)
          .onClick(() => {
            console.log("text click event");
            // createNWeb("https://www.huawei.com", this.getUIContext());
            router.pushUrl({ url: "pages/WebviewCustomParameter" });
          })
          .copyOption(CopyOptions.LocalDevice)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .backgroundColor(Color.Yellow)
      .onClick(() => {
        console.log("column click event");
      })
    }
    .height('100%')
    .onClick(() => {
      console.log("row click event");
    })
  }
}

//common.ets
// 创建NodeController
// common.ets
import { UIContext } from '@ohos.arkui.UIContext';
import web_webview from '@ohos.web.webview'
import { NodeController, BuilderNode, Size, FrameNode } from '@ohos.arkui.node';
// @Builder中为动态组件的具体组件内容
// Data为入参封装类
class Data {
  url: string;
  controller: WebviewController;
  constructor(url: string, controller: WebviewController) {
    this.url = url;
    this.controller = controller;
  }
}
@Builder
function WebBuilder(data: Data) {
  Column() {
    Web({ src: $rawfile("index.html"), controller: data.controller })
      .javaScriptAccess(true)
      .multiWindowAccess(true)
      .width("100%")
      .height("100%")
      .onPageBegin(e => {
        console.log("webview 预创建测试 onPageBegin");
      })
      .onPageEnd(e => {
        console.log("webview 预创建测试 onPageEnd");
      })
  }
}
let wrap = wrapBuilder<Data[]>(WebBuilder);
// 用于控制和反馈对应的NodeContainer上的节点的行为，需要与NodeContainer一起使用
export class myNodeController extends NodeController {
  private rootnode: BuilderNode<Data[]> | null = null;

  // 必须要重写的方法，用于构建节点数、返回节点挂载在对应NodeContainer中
  // 在对应NodeContainer创建的时候调用、或者通过rebuild方法调用刷新
  makeNode(uiContext: UIContext): FrameNode | null {
    console.log(" uicontext is undifined : " + (uiContext === undefined));
    if (this.rootnode != null) {
      // 返回FrameNode节点
      return this.rootnode.getFrameNode();
    }
    // 返回null控制动态组件脱离绑定节点
    return null;
  }
  // 当布局大小发生变化时进行回调
  aboutToResize(size: Size) {
    console.log("aboutToResize width : " + size.width + " height : " + size.height)
  }
  // 当controller对应的NodeContainer在Appear的时候进行回调
  aboutToAppear() {
    console.log("aboutToAppear")
  }
  // 当controller对应的NodeContainer在Disappear的时候进行回调
  aboutToDisappear() {
    console.log("aboutToDisappear")
  }
  // 此函数为自定义函数，可作为初始化函数使用
  // 通过UIContext初始化BuilderNode，再通过BuilderNode中的build接口初始化@Builder中的内容
  initWeb(url: string, uiContext: UIContext, control: WebviewController) {
    if (this.rootnode != null) {
      return;
    }
    // 创建节点，需要uiContext
    this.rootnode = new BuilderNode(uiContext)
    // 创建动态Web组件
    this.rootnode.build(wrap, { url: url, controller: control })
  }
}
// 创建Map保存所需要的NodeController
let NodeMap: Map<string, myNodeController | undefined> = new Map();
// 创建Map保存所需要的WebViewController
export let controllerMap: Map<string, WebviewController | undefined> = new Map();
// 初始化需要UIContext 需在Ability获取
export const createNWeb = (url: string, uiContext: UIContext) => {
  // 创建NodeController
  let baseNode = new myNodeController();
  web_webview.WebviewController.setWebDebuggingAccess(true);
  let controller = new web_webview.WebviewController();
  // 初始化自定义web组件
  baseNode.initWeb(url, uiContext, controller);
  controllerMap.set(url, controller)
  NodeMap.set(url, baseNode);
}
// 自定义获取NodeController接口
export const getNWeb = (url: string): myNodeController | undefined => {
  return NodeMap.get(url);
}

// WebDemo.ets
// 使用NodeController的Page页
import { controllerMap, getNWeb } from "./common"
import business_error from '@ohos.base';
@Entry
@Component
struct WebDemo {
  @State webResult: string = 'ArkTS'
  build() {
    Row() {
      Column() {
        // NodeContainer用于与NodeController节点绑定，rebuild会触发makeNode
        // Page页通过NodeContainer接口绑定NodeController，实现动态组件页面显示
        NodeContainer(getNWeb("https://www.huawei.com"))
          .height("90%")
          .width("100%")
          .onAppear(() => {
            let controller = controllerMap.get("https://www.huawei.com");
            if (controller) {
              try {
                console.info("controller");
                controller.runJavaScript("test()", (error, result) => {
                  if (error) {
                    let e: business_error.BusinessError = error as business_error.BusinessError;
                    console.error(`run JavaScript error, ErrorCode: ${e.code}, Message: ${e.message}`);
                    return;
                  }
                  if (result) {
                    this.webResult = result
                    console.info(`The test() return value is: ${result}`)
                  }
                })
              } catch (err) {
                console.error(err)
              }
            }
          })
        Text(this.webResult).fontSize(20)
      }
      .width('100%')
    }
    .height('100%')
  }
}

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

HarmonyOS

子站问答

访问

相似问题

找不到问题？创建新问题

HarmonyOS web组件预创建之后没法修改uicontext，导致无法复用？

你尚未登录，登录后可以

如何在WebMessagePort中发送复杂对象？

遇到Flutter版本升级问题如何解决？

鸿蒙开发入门：如何快速掌握Flutter技术？

如何通过API实现应用版本隔离？

如何解决新API在旧版本系统中导致的崩溃问题？

复杂动画出现帧率抖动是什么原因?

鸿蒙系统启动内存测试方法有哪些？

HarmonyOS