ref |> 文章详情页Web容器复用02

Signed-off-by: xugenyuan <xugenyuan@wondertek.com.cn>

@@ -26,6 +26,7 @@ export const enum NativeCallH5Event {
 export const enum NativeCallH5Type {
 export const enum NativeCallH5Type {
   jsCall_receiveAppData = 'jsCall_receiveAppData',
   jsCall_receiveAppData = 'jsCall_receiveAppData',
   jsCall_appNotifyEvent = 'jsCall_appNotifyEvent',
   jsCall_appNotifyEvent = 'jsCall_appNotifyEvent',
+  jsCall_clearAppData = 'jsCall_clearAppData',
   // TODO 业务自行新增类型，自行调用,例：
   // TODO 业务自行新增类型，自行调用,例：
   // TODO this.webviewControl.callHandle(NativeCallH5Type.jsCall_receiveAppData,xxxx)
   // TODO this.webviewControl.callHandle(NativeCallH5Type.jsCall_receiveAppData,xxxx)
 
 

@@ -21,7 +21,6 @@ export struct WdWebLocalComponent {
   onWebPrepared: () => void = () => {
   onWebPrepared: () => void = () => {
   }
   }
   @Prop backVisibility: boolean = false
   @Prop backVisibility: boolean = false
-  @Prop webResource: Resource = {} as Resource
   @Prop @Watch('onReloadStateChanged') reload: number = 0
   @Prop @Watch('onReloadStateChanged') reload: number = 0
   @State webHeight: Length = '100%'
   @State webHeight: Length = '100%'
   @Link isPageEnd: boolean
   @Link isPageEnd: boolean

@@ -2,6 +2,7 @@ import { BridgeUtil, BridgeWebViewControl, Callback } from "wdJsBridge";
 import { Message } from "wdJsBridge/src/main/ets/bean/Message";
 import { Message } from "wdJsBridge/src/main/ets/bean/Message";
 import { Logger } from "wdKit";
 import { Logger } from "wdKit";
 import { H5CallNativeType } from "../pages/H5CallNativeType";
 import { H5CallNativeType } from "../pages/H5CallNativeType";
+import { NativeCallH5Type } from "../pages/NativeCallH5Type";
 import { WebEvents } from "./WebLocalPool";
 import { WebEvents } from "./WebLocalPool";
 
 
 const TAG = 'WebArticleEventHandler'
 const TAG = 'WebArticleEventHandler'
@@ -20,8 +21,13 @@ export class WebArticleEventHandler implements WebEvents {
 
 
 
 
   //MARK: ----
   //MARK: ----
-  onPrepareForReuse(): void {
-
+  onPrepareForReuse(): boolean {
+    if (!this.webviewControl || this.pageLoadEnd == false) {
+      return false
+    }
+    this.webviewControl?.callHandle(NativeCallH5Type.jsCall_clearAppData, '', (data) => {
+    })
+    return true
   }
   }
 
 
   onPageBegin(event: OnPageBeginEvent): void {
   onPageBegin(event: OnPageBeginEvent): void {

@@ -109,7 +109,7 @@ export class WebNodeController extends NodeController {
 
 
   aboutToAppear(): void {
   aboutToAppear(): void {
     this.webNodeInTree = true;
     this.webNodeInTree = true;
-    Logger.debug(TAG, `WebNodeController aboutToAppear target: ${this.target} ==> url:${this.webOption.src}`);
+    Logger.debug(TAG, `WebNodeController aboutToAppear target: ${this.target} ==> url:${this.webOption.src.toString()}`);
   }
   }
 
 
   aboutToDisappear(): void {
   aboutToDisappear(): void {
@@ -123,7 +123,7 @@ export class WebNodeController extends NodeController {
       //     "UTF-8"
       //     "UTF-8"
       //   );
       //   );
       // }
       // }
-      Logger.debug(TAG, `WebNodeController aboutToDisappear target: ${this.target} ==> url:${this.webOption.src}`);
+      Logger.debug(TAG, `WebNodeController aboutToDisappear target: ${this.target} ==> url:${this.webOption.src.toString()}`);
     } catch (error) {
     } catch (error) {
       Logger.error(TAG,`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
       Logger.error(TAG,`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
     }
     }
@@ -152,8 +152,8 @@ export class WebNodeController extends NodeController {
       new WebViewPoolData(this.webOption, this.target, this.webHeight, this.webEvents));
       new WebViewPoolData(this.webOption, this.target, this.webHeight, this.webEvents));
   }
   }
 
 
-  prepareForReuse() {
-    this.webEvents?.onPrepareForReuse()
+  prepareForReuse(): boolean | undefined {
+    return this.webEvents?.onPrepareForReuse()
   }
   }
 
 
   destoryWeb() {
   destoryWeb() {
@@ -189,7 +189,7 @@ export class WebNodeController extends NodeController {
 }
 }
 
 
 export interface WebEvents {
 export interface WebEvents {
-  onPrepareForReuse(): void
+  onPrepareForReuse(): boolean
   onPageBegin(event: OnPageBeginEvent): void;
   onPageBegin(event: OnPageBeginEvent): void;
   onPageEnd(event: OnPageEndEvent): void;
   onPageEnd(event: OnPageEndEvent): void;
   onLoadIntercept(event: OnLoadInterceptEvent): boolean;
   onLoadIntercept(event: OnLoadInterceptEvent): boolean;

@@ -11,6 +11,8 @@ interface ArticleWebInterface {
   webArticleEventHandler: WebArticleEventHandler
   webArticleEventHandler: WebArticleEventHandler
 }
 }
 
 
+const MAX_POOL_COUNT = 2
+
 export class WebPoolManager {
 export class WebPoolManager {
 
 
   private webTargets: string[] = []
   private webTargets: string[] = []
@@ -28,12 +30,12 @@ export class WebPoolManager {
   createArticleWeb(param: ArticleWebInterface, taking?: boolean) : string {
   createArticleWeb(param: ArticleWebInterface, taking?: boolean) : string {
     let target = util.generateRandomUUID()
     let target = util.generateRandomUUID()
     createReuseableWeb(param.uiContext,
     createReuseableWeb(param.uiContext,
-      {src: param.webSrc, controller: param.webController},
+      {src: param.webSrc, controller: param.webController, renderMode: RenderMode.SYNC_RENDER},
       target,
       target,
       800,
       800,
       param.webArticleEventHandler
       param.webArticleEventHandler
     )
     )
-    if (taking != true) {
+    if (taking != true && this.webTargets.length < MAX_POOL_COUNT) {
       this.webTargets.push(target)
       this.webTargets.push(target)
     }
     }
     return target
     return target
@@ -43,7 +45,15 @@ export class WebPoolManager {
   // 当使用完成，需要调用recycleTarget()
   // 当使用完成，需要调用recycleTarget()
   takeAvaiableArticleWebTarget(param: ArticleWebInterface): string {
   takeAvaiableArticleWebTarget(param: ArticleWebInterface): string {
     if (this.webTargets.length) {
     if (this.webTargets.length) {
-      return this.webTargets.slice(0, 1).pop()!
+      let target = this.webTargets.splice(0, 1).pop()!
+
+      // 当pool里没有缓存，主动提前加载一个
+      if (this.webTargets.length == 0) {
+        setTimeout(() => {
+          this.createArticleWeb(param)
+        }, 500)
+      }
+      return target
     }
     }
     return this.createArticleWeb(param, true)
     return this.createArticleWeb(param, true)
   }
   }
@@ -59,8 +69,14 @@ export class WebPoolManager {
       return
       return
     }
     }
 
 
-    nodeController.prepareForReuse()
-    this.webTargets.push(target)
+    if (this.webTargets.length < MAX_POOL_COUNT) {
+      if (nodeController.prepareForReuse() == true) {
+        this.webTargets.push(target)
+        return
+      }
+    }
+
+    this.destoryTarget(target)
   }
   }
 
 
   // 撤底销毁
   // 撤底销毁

@@ -111,4 +111,6 @@ export { GrayManageModel } from './src/main/ets/viewmodel/GrayManageModel'
 
 
 export { VoiceInputView } from './src/main/ets/components/comment/view/VoiceInputView'
 export { VoiceInputView } from './src/main/ets/components/comment/view/VoiceInputView'
 
 
+export { ComponentModule } from './src/main/ets/ComponentModule'
+
 // export {voicese}
 // export {voicese}

+import { BridgeUtil, BridgeWebViewControl } from "wdJsBridge";
+import { WebArticleEventHandler, WebPoolManager } from "wdWebComponent";
+
+export class ComponentModule {
+
+  static preInitArticleWebTemplate(context: UIContext) {
+
+    let webviewControl = new BridgeWebViewControl()
+    WebPoolManager.sharedInstance().createArticleWeb({
+      uiContext: context,
+      webSrc: $rawfile("apph5/index.html"),
+      webController: webviewControl,
+      webArticleEventHandler: new WebArticleEventHandler(webviewControl)
+    })
+  }
+}

@@ -99,20 +99,24 @@ export struct ImageAndTextWebComponent {
 
 
     this.webPoolTargetId = WebPoolManager.sharedInstance().takeAvaiableArticleWebTarget({
     this.webPoolTargetId = WebPoolManager.sharedInstance().takeAvaiableArticleWebTarget({
       uiContext: this.getUIContext(),
       uiContext: this.getUIContext(),
-      webSrc: $rawfile('apph5/index.html'),
+      webSrc: $rawfile("apph5/index.html"),
       webController: this.webviewControl,
       webController: this.webviewControl,
       webArticleEventHandler: new WebArticleEventHandler(this.webviewControl)
       webArticleEventHandler: new WebArticleEventHandler(this.webviewControl)
     })
     })
     this.webviewControl = WebPoolManager.sharedInstance().getWebController(this.webPoolTargetId)!
     this.webviewControl = WebPoolManager.sharedInstance().getWebController(this.webPoolTargetId)!
   }
   }
 
 
+  aboutToDisappear(): void {
+    Logger.debug(TAG, 'H5模板加载控件 aboutToDisappear');
+    WebPoolManager.sharedInstance().recycleTarget(this.webPoolTargetId)
+  }
+
   build() {
   build() {
     Column() {
     Column() {
       WdWebLocalComponent({
       WdWebLocalComponent({
         webPoolTargetId: this.webPoolTargetId,
         webPoolTargetId: this.webPoolTargetId,
         webviewControl: this.webviewControl,
         webviewControl: this.webviewControl,
         reload:this.reload,
         reload:this.reload,
-        webResource: $rawfile('apph5/index.html'),
         backVisibility: false,
         backVisibility: false,
         onWebPrepared: this.onWebPrepared.bind(this),
         onWebPrepared: this.onWebPrepared.bind(this),
         isPageEnd: $isPageEnd
         isPageEnd: $isPageEnd

-import { LogoutViewModel } from 'wdComponent';
+import { ComponentModule, LogoutViewModel } from 'wdComponent';
 import { GrayManageModel, mournsInfoModel } from 'wdComponent/src/main/ets/viewmodel/GrayManageModel'
 import { GrayManageModel, mournsInfoModel } from 'wdComponent/src/main/ets/viewmodel/GrayManageModel'
 import { BreakpointConstants, SpConstants } from 'wdConstant';
 import { BreakpointConstants, SpConstants } from 'wdConstant';
 
 
@@ -14,6 +14,8 @@ import { BottomNavigationComponent } from './view/BottomNavigationComponent';
 import LaunchDataModel from './viewModel/LaunchDataModel';
 import LaunchDataModel from './viewModel/LaunchDataModel';
 import { LaunchPageModel } from './viewModel/LaunchPageModel';
 import { LaunchPageModel } from './viewModel/LaunchPageModel';
 import { JSON } from '@kit.ArkTS';
 import { JSON } from '@kit.ArkTS';
+import { WebArticleEventHandler, WebPoolManager } from 'wdWebComponent';
+import { BridgeWebViewControl } from 'wdJsBridge';
 
 
 const TAG = 'MainPage';
 const TAG = 'MainPage';
 
 
@@ -60,6 +62,10 @@ struct MainPage {
     } catch (e) {
     } catch (e) {
       Logger.error(TAG, `Unexpected Text in JSON ??` + JSON.stringify(e) +"  " + dataModelStr);
       Logger.error(TAG, `Unexpected Text in JSON ??` + JSON.stringify(e) +"  " + dataModelStr);
     }
     }
+
+    setTimeout(() => {
+      ComponentModule.preInitArticleWebTemplate(this.getUIContext())
+    }, 500)
   }
   }
 
 
   pageTransition() {
   pageTransition() {