Web组件中的预加载，如何实现？

import UIAbility from '@ohos.app.ability.UIAbility'; 
import web_webview from '@ohos.web.webview'; 
import AbilityConstant from '@ohos.app.ability.AbilityConstant'; 
import Want from '@ohos.app.ability.Want'; 
import router from '@ohos.router'; 
​ 
export default class EntryAbility extends UIAbility { 
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) { 
    console.log("EntryAbility onCreate") 
    web_webview.WebviewController.initializeWebEngine() 
    // 预连接时，需要將'https://www.example.com'替换成一个真实的网站地址。 
    web_webview.WebviewController.prepareForPageLoad("https://xw.qq.com", true, 2); 
    AppStorage.setOrCreate("abilityWant", want) 
    AlertDialog.show({message:"EntryAbility onCreate done"}) 
    console.log("EntryAbility onCreate done") 
  } 
} 
​ 
@Entry 
@Component 
struct tests{ 
  controller: web_webview.WebviewController = new web_webview.WebviewController(); 
  aboutToAppear() { 
    // 配置web开启调试模式 
    web_webview.WebviewController.setWebDebuggingAccess(true); 
  } 
​ 
  build() { 
    Column() { 
      Button('prefetchPopularPage') 
        .onClick(() => { 
          try { 
            // 预加载时，需要将'https://www.example.com'替换成一个真实的网站地址。 
            this.controller.prefetchPage('https://xw.qq.com/'); 
            //AlertDialog.show({message: '进入try'}) 
          } catch (error) { 
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`); 
            AlertDialog.show({message:error.message}) 
          } 
        }) 
      // 需要将'www.example1.com'替换成一个真实的网站地址。 
      Web({ src: 'xw.qq.com', controller: this.controller}) 
      //Web({ src:$rawfile('test.html'), controller: this.controller }) 
      Button('返回') 
       .onClick(()=>{ 
         router.replaceUrl({  url:'pages/Index' }) 
       }) 
        .margin({left:270,top:-800}) 
    } 
​ 
  } 
}
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.

import util from '@ohos.util'; 
import router from '@ohos.router'; 
 
class Contact { 
  key: string = util.generateRandomUUID(true); 
  name: string; 
  icon: Resource; 
 
  constructor(name: string, icon: Resource) { 
    this.name = name; 
    this.icon = icon; 
  } 
} 
 
class dividerTmp { 
  strokeWidth: Length = 1 
  startMargin: Length = 10 
  endMargin: Length = 10 
  color: ResourceColor = '#ffe9f0f0' 
 
  constructor(strokeWidth: Length, startMargin: Length, endMargin: Length, color: ResourceColor) { 
    this.strokeWidth = strokeWidth 
    this.startMargin = startMargin 
    this.endMargin = endMargin 
    this.color = color 
  } 
} 
 
let opt: dividerTmp = new dividerTmp(1, 10, 10, '#ffe9f0f0') 
 
@Entry 
@Component 
export default struct Header { 
  @State needWrap: boolean = true 
  private swiperController: SwiperController = new SwiperController(); 
  private contacts: Array<object> = [ 
    new Contact('加拿大.............................', $r("app.media.icon")), 
    new Contact('中秋节，又称团圆节，象征着团圆与美满。', $r("app.media.icon")), 
    new Contact('小红', $r("app.media.icon")), 
  ] 
  //Tab 
  private tabsController: TabsController = new TabsController() 
  @State currentIndex: number = 0; 
 
  @Builder 
  TabBuilder(title: string, targetIndex: number) { 
    Column() { 
      Text(title) 
        .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B') 
    } 
    .onClick(() => { 
      this.currentIndex = targetIndex; 
      this.tabsController.changeIndex(this.currentIndex); 
    }) 
  } 
 
  build() { 
    Column({ space: 12 }) { 
      Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) { 
        TabContent() { 
          Column() { 
            Tabs() { 
              // 顶部导航栏内容 
            } 
          } 
          .backgroundColor('#ffffffff') 
          .width('100%') 
          .offset({ x: 0, y: 0 }) 
 
        } 
        .tabBar(this.TabBuilder('首页', 0)) 
 
        TabContent() { 
          Text('发现的内容').fontSize(30).backgroundColor(Color.Orange) 
        } 
        .tabBar(this.TabBuilder('发现', 1)) 
 
        TabContent() { 
          Text('推荐的内容').fontSize(30).backgroundColor(Color.Pink) 
        }.tabBar(this.TabBuilder('推荐', 2)) 
 
        TabContent() { 
        }.tabBar(this.TabBuilder('我的', 3)) 
      }.onClick(() => { 
        // this.currentIndex = index 
      }) 
      .scrollable(false) 
 
      GridRow() { 
        GridCol({ span: { sm: 12, md: 6, lg: 5 } }) { 
          Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { 
            Search({ placeholder: '猜您喜欢: 万水千山' }) 
              .placeholderFont({ size: 16 }) 
              .margin({ top: -760, bottom: 1000 }) 
            Image($r('app.media.startIcon')) 
              .width(32) 
              .height(32) 
              .objectFit(ImageFit.Contain) 
              .flexShrink(0) 
              .margin({ top: -760, bottom: 1000 }) 
          } 
        } 
      }.onBreakpointChange((breakpoint: string) => { 
        if (breakpoint === 'sm') { 
          this.needWrap = true 
        } else { 
          this.needWrap = false 
        } 
      }) 
      .padding({ left: 12, right: 12 }) 
 
      Swiper(this.swiperController) { 
        Text("暂无内容") 
          .width('96%') 
          .height('12%') 
          .backgroundColor(Color.Orange) 
          .textAlign(TextAlign.Center) 
          .fontSize(30) 
 
        Text("暂无内容") 
          .width('96%') 
          .height('12%') 
          .backgroundColor(Color.Brown) 
          .textAlign(TextAlign.Center) 
          .fontSize(30) 
 
        Text("暂无内容") 
          .width('96%') 
          .height('12%') 
          .backgroundColor(Color.Pink) 
          .textAlign(TextAlign.Center) 
          .fontSize(30) 
      } 
      .loop(true) 
      .autoPlay(true) 
      .interval(2800) 
      .margin({ top: -1000 }) 
 
      List({ space: 10 }) { 
        ForEach(this.contacts, (item: Contact) => { 
          ListItem() { 
            Row() { 
              Text(item.name) 
                .width("82%") 
                .fontSize(20) 
                .onClick(() => { 
                  router.replaceUrl({ 
                    url: 'pages/test' 
                  }) 
                }) 
 
              Image(item.icon) 
                .width(40) 
                .height(40) 
                .margin(8) 
            } 
            .width('96%') 
            .margin({ left: 12 }) 
            .justifyContent(FlexAlign.Start) 
          } 
        }, (item: Contact) => item.key.toString()) 
      } 
      .divider(opt) 
      .width('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.
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.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.