求助，如何在鸿蒙平台上通过WebView展示商品详情的HTML页面？

"requestPermissions": [{
  "name": "ohos.permission.INTERNET" 
}]
1.
2.
3.

import web_webview from '@ohos.web.webview'
1.

// 页面布局 
@Component 
struct ProductDetailPage {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
 
  build() {
    Column() {
      Web({ 
        src: 'https://www.example.com/product.html',  
        controller: this.controller  
      })
      .onPageEnd(e => {
        console.log(' 页面加载完成')
      })
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

Web({ 
  src: $rawfile('product_detail.html'),  
  controller: this.controller  
})
1.
2.
3.
4.

this.controller.runJavaScript( 
  "document.getElementById('price').innerText  = '¥299.00';"
)
1.
2.
3.

// 注册JS桥接 
web_webview.WebviewController.setWebMessageListener(...) 
 
// 原生方法暴露 
@Concurrent 
function nativeShareHandler(productId: string) {
  // 调用原生分享模块 
}
1.
2.
3.
4.
5.
6.
7.
8.

Web({
  .fileAccess(true)
  .cacheMode(WebCacheMode.Default)
})
1.
2.
3.
4.

web_webview.WebviewController.initializeGlobalWebStorage()
1.

aboutToReuse(params) {
  this.controller.refresh() 
}
1.
2.
3.

.onInterceptRequest(event => {
  if(event.request.url.includes('malicious.site'))  {
    return { action: WebRequestAction.Reject }
  }
})
1.
2.
3.
4.
5.

Web({
  .mixedMode(WebMixedMode.Compatibility)
})
1.
2.
3.

.onErrorReceive(e => {
  promptAction.showToast({ 
    message: '加载失败，错误码：' + e.errorCode  
  })
})
.onHttpError(e => {
  if(e.statusCode  === 404) {
    this.controller.loadData('<h1> 商品已下架</h1>')
  }
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

hdc shell 
hdc_std shell param set persist.web.debug.enabled  1
1.
2.

web_webview.WebviewController.enableDebugging(true)
1.

.onScroll(event => {
  if(event.offsetY  <= 0) {
    event.stopPropagation() 
  }
})
1.
2.
3.
4.
5.

aboutToDisappear() {
  this.controller.destroy() 
}
1.
2.
3.