HarmonyOS 模板快载demo

import { PageWeb, WebInfo } from "./PageWeb"  
import { PageWeb2 } from "./PageWeb2"  
import web_webview from '@ohos.web.webview';  
const targetPageURL =  
  "https://m.ly.com/minsu/houselist?city=2301&filterList=8888_1&inDate=2024-05-26&outDate=2024-05-27&pageSize=20&cityName=成都&resourceType=3"  
@Entry  
@Component  
struct Index {  
  @State message: string = '';  
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()  
  @Builder  
  PageMap(name: string) {  
    if (name === "pageOne") {  
      PageWeb()  
    } else {  
      PageWeb2()  
    }  
  }  
  build() {  
    Navigation(this.pageInfos) {  
      Row() {  
        Column() {  
          Text(this.message)  
            .fontSize(50)  
            .fontWeight(FontWeight.Bold)  
          Button("模板快载").onClick(() => {  
            // 跳转到page1  
            this.pageInfos.pushPath({ name: 'pageOne', param: { url: targetPageURL } as WebInfo })  
          })  
          Button("非模板快载").onClick(() => {  
            // 跳转到page2  
            this.pageInfos.pushPath({ name: 'page', param: { url: targetPageURL } as WebInfo })  
          })  
        }  
        .width('100%')  
      }  
      .height('100%')  
    }.title('NavIndex').navDestination(this.PageMap)  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.

import { TemplateWebNode, getManage } from "../TemplateLoad/templateNode"  
import web_webview from '@ohos.web.webview';  
export interface WebInfo {  
  url: string  
}  
@Component  
export struct PageWeb {  
  @Consume('pageInfos') pageInfos: NavPathStack;  
  @State node?: TemplateWebNode = undefined;  
  url?: string  
  controller: web_webview.WebviewController = new web_webview.WebviewController()  
  
  aboutToAppear() {  
    const params = this.pageInfos.getParamByName("pageOne") as WebInfo[];  
    this.url = params[0].url  
    setTimeout(() => {  
      this.controller.runJavaScript(`document.getElementsByClassName("box-btn")[0].click()`);  
    }, 10)  
  }  
  getNode(): TemplateWebNode {  
    if (this.node) {  
      return this.node  
    }  
    const manager = getManage()  
    const template = manager.getTemplate();  
    this.node = template.node  
    this.controller = template.controller  
    return this.node  
  }  
  build() {  
    NavDestination() {  
      Row() {  
        NodeContainer(this.getNode())  
          .height("100%")  
          .width("100%")  
      }  
      .width('100%')  
      .height('100%')  
    }.onBackPressed(() => {  
      if (this.controller.getUrl() === this.url) {  
        this.controller.backward()  
        return true  
      }  
      return false  
    })  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.

import { TemplateWebNode, getManage } from "../TemplateLoad/templateNode"  
import web_webview from '@ohos.web.webview';  
export interface WebInfo {  
  url: string  
}  
@Component  
export struct PageWeb2 {  
  @Consume('pageInfos') pageInfos: NavPathStack;  
  @State node?: TemplateWebNode = undefined;  
  controller: web_webview.WebviewController = new web_webview.WebviewController()  
  @State url: string = ""  
  aboutToAppear() {  
    const params = this.pageInfos.getParamByName("page") as WebInfo[];  
    this.url = params[0].url  
  }  
  build() {  
    NavDestination() {  
      Row() {  
        Web({ src: this.url, controller: this.controller }).fileAccess(true).domStorageAccess(true)  
      }  
      .width('100%')  
      .height('100%')  
    }  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

import { UIContext } from '@ohos.arkui.UIContext';  
interface OfflineNode<T, S> {  
  node: T,  
  controller: S  
}  
export class TemplateManage<T, S> {  
  uiContext: UIContext  
  templateList: OfflineNode<T, S>[] = []  
  cratedFactory: (uIContext: UIContext) => [T, S]  
  constructor(uiContext: UIContext, cratedFactory: (uIContext: UIContext) => [T, S]) {  
    this.cratedFactory = cratedFactory  
    this.uiContext = uiContext  
    this.initTemplate()  
  }  
  initTemplate() {  
    const nodeAndController: [T, S] = this.cratedFactory(this.uiContext)  
    this.templateList.push({  
      node: nodeAndController[0], controller: nodeAndController[1]  
    })  
  }  
  getTemplate(): OfflineNode<T, S> {  
    if (!this.templateList[0]) {  
      this.initTemplate()  
    }  
    const firstNode = this.templateList[0]  
    this.templateList.shift()  
    setTimeout(() => {  
      if (!this.templateList[0]) {  
        this.initTemplate()  
      }  
    }, 2000)  
    return firstNode  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

import web_webview from '@ohos.web.webview';  
import { UIContext } from '@ohos.arkui.UIContext';  
import { NodeController, BuilderNode, FrameNode } from '@ohos.arkui.node';  
import { TemplateManage } from "./index"  
interface WebBuildParam {  
  controller: web_webview.WebviewController  
}  
@Builder  
function WebBuilder(param: WebBuildParam) {  
  Column() {  
    Web({ src: "", controller: param.controller })  
      .fileAccess(true)  
      .domStorageAccess(true)  
      .width("100%")  
      .height("100%")  
      .onPageBegin(() => {  
        param.controller.runJavaScript("var hkj_pushState = history.pushState")  
      })  
  }  
}  
const WebBuildFactory = wrapBuilder<WebBuildParam[]>(WebBuilder);  
export class TemplateWebNode extends NodeController {  
  private rootNode: BuilderNode<WebBuildParam[]> | null = null;  
  dispose() {  
    this.rootNode?.getFrameNode()?.dispose()  
  }  
  aboutToDisappear() {  
    this.dispose()  
    return this;  
  }  
  // 必须要重写的方法，用于构建节点数、返回节点挂载在对应NodeContianer中  
  // 在对应NodeContianer创建的时候调用、或者通过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;  
  }  
  // 此函数为自定义函数，可作为初始化函数使用  
  // 通过UIContext初始化BuilderNode，再通过BuilderNode中的build接口初始化@Builder中的内容  
  initWeb(uiContext: UIContext, control: WebviewController) {  
    if (this.rootNode != null) {  
      return;  
    }  
    // 创建节点，需要uiContext  
    this.rootNode = new BuilderNode(uiContext)  
    // 创建动态Web组件  
    this.rootNode.build(WebBuildFactory, { controller: control })  
  }  
}  
const TEMPLATE_URL = "https://m.ly.com/minsu/minsuhome"  
export function createTemplateNode(uiContext: UIContext): [TemplateWebNode, web_webview.WebviewController] {  
  // 创建NodeController  
  let templateNode = new TemplateWebNode();  
  let controller = new web_webview.WebviewController();  
  templateNode.initWeb(uiContext, controller);  
  setTimeout(() => {  
    controller.loadUrl(TEMPLATE_URL)  
  }, 100)  
  return [templateNode, controller]  
}  
export let manage: TemplateManage<TemplateWebNode, web_webview.WebviewController>  
export function getManage(): TemplateManage<TemplateWebNode, web_webview.WebviewController> {  
  return manage  
}  
export function startTemplate(uiContext: UIContext) {  
  try {  
    manage = new TemplateManage<TemplateWebNode, web_webview.WebviewController>(uiContext, createTemplateNode)  
  } catch (e) {  
    console.log('hkj', e)  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';  
import { hilog } from '@kit.PerformanceAnalysisKit';  
import { window } from '@kit.ArkUI';  
import { startTemplate } from "../TemplateLoad/templateNode"  
export default class EntryAbility extends UIAbility {  
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {  
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');  
  }  
  onDestroy(): void {  
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');  
  }  
  onWindowStageCreate(windowStage: window.WindowStage): void {  
    // Main window is created, set main page for this ability  
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');  
    windowStage.loadContent('pages/Index', (err) => {  
      startTemplate(windowStage.getMainWindowSync().getUIContext())  
      if (err.code) {  
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');  
        return;  
      }  
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');  
    });  
  }  
  onWindowStageDestroy(): void {  
    // Main window is destroyed, release UI related resources  
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');  
  }  
  onForeground(): void {  
    // Ability has brought to foreground  
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');  
  }  
  onBackground(): void {  
    // Ability has back to background  
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.