此文章內(nèi)容兼容API12，使用harmony next應(yīng)用開發(fā)

簡單使用

1蒜哀，在模塊的 module.json5 中添加權(quán)限

{
  "module": {
    ...
    "requestPermissions": [
      {
        "name": "ohos.permission.STORE_PERSISTENT_DATA"
      },
    ],
    ...
  }
}

2斩箫，page 中加載網(wǎng)頁

import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      Button('Load Web Page').onClick(() =>  this.controller.loadUrl('https://www.baidu.com');)
      Web({ src: 'https://www.baidu.com', controller: this.controller})
    }
  }
}

功能擴(kuò)展

屬性

1，onControllerAttached ：注入js對象撵儿、設(shè)置用戶代理
onControllerAttached 在WebviewController 成功綁定到 Web 組件時(shí)觸發(fā)

.onControllerAttached(() => {
         this.controller.registerJavaScriptProxy('customObj', {
            customMethod: (arg) => { }
          });
        this.webController.setCustomUserAgent('xx')
  })

2乘客，onlineImageAccess: 是否允許從網(wǎng)絡(luò)加載圖片資源
無圖模式
3，javaScriptAccess：是否允許執(zhí)行 JavaScript 代碼
執(zhí)行js代碼淀歇、app與網(wǎng)頁交互
4易核，domStorageAccess：是否允許Web應(yīng)用在客戶端存儲數(shù)據(jù)
5，darkMode： 設(shè)置深淺模式/黑白皮膚
搭配 forceDarkAccess 使用浪默，forceDarkAccess：強(qiáng)制web應(yīng)用深色模式
6牡直，imageAccess：對設(shè)備上圖像的訪問和管理
7缀匕，mixedMode：如何處理加載超文本傳輸協(xié)議（HTTP）和超文本傳輸安全協(xié)議（HTTPS）混合內(nèi)容，

• MixedMode.None ：不加載任何混合內(nèi)容碰逸；默認(rèn)
• MixedMode.Compatible ：兼容模式乡小，允許加載混合內(nèi)容
• MixedMode.Strict ：嚴(yán)格模式，只加載 HTTPS 內(nèi)容饵史，拒絕 HTTP 內(nèi)容

8劲件，textAutosizing：自動調(diào)整文本大小以適應(yīng)不同的屏幕尺寸和用戶偏好； 可以根據(jù)用戶的字體大小設(shè)置或設(shè)備的屏幕尺寸自動調(diào)整文本大小
9约急，nestedScroll ：處理 Web 組件嵌套滾動的屬性
屬性：scrollForward和scrollBackward控制滾動的方向和行為

• NestedScrollMode.SELF_ONLY ：僅當(dāng)前滾動容器滾動，不與父容器聯(lián)動苗分。
• NestedScrollMode.SELF_FIRST ：當(dāng)前滾動容器先滾動厌蔽，滾動至邊緣后父容器繼續(xù)滾動。
• NestedScrollMode.PARENT_FIRST ：父容器先滾動摔癣，滾動至邊緣后當(dāng)前滾動容器繼續(xù)滾動奴饮。
• NestedScrollMode.PARALLEL ：父容器與當(dāng)前滾動容器同時(shí)滾動

.nestedScroll({
      scrollForward: NestedScrollMode.SELF_FIRST,
      scrollBackward: NestedScrollMode.SELF_FIRST
    })

10，verticalScrollBarAccess ：控制垂直滾動條的顯示和隱藏
horizontalScrollBarAccess ：控制橫向滾動條的顯示和隱藏
11择浊，defaultFixedFontSize defaultFontSize minFontSize minLogicalFontSize

• defaultFixedFontSize ：設(shè)置網(wǎng)頁的默認(rèn)等寬字體大小
• defaultFontSize：設(shè)置網(wǎng)頁的默認(rèn)字體大小
• minFontSize ：設(shè)置網(wǎng)頁字體大小最小值
• minLogicalFontSize：設(shè)置網(wǎng)頁邏輯字體大小最小值戴卜。

事件

1，onTitleReceive：標(biāo)題獲取與更改時(shí)觸發(fā)的函數(shù)
2琢岩，onLoadIntercept：在頁面加載之前攔截請求投剥，允許開發(fā)者檢查 URL、修改請求或直接返回自定義內(nèi)容

.onLoadIntercept((event) => {
     //特殊處理
    if(res[0] === '1'){//外部瀏覽器打開
         RouterUtil.jumpSystemBrowser(originUrl);
         return true //攔截請求
    }
    // 對于其他請求担孔，不進(jìn)行攔截
    return false
})

3江锨，onBeforeUnload：刷新或關(guān)閉場景下，在即將離開當(dāng)前頁面時(shí)觸發(fā)此回調(diào)
onResourceLoad：通知Web組件所加載的資源文件url信息糕篇。
4啄育，onPageEnd：在用戶即將離開當(dāng)前頁面（例如通過導(dǎo)航或關(guān)閉標(biāo)簽頁）時(shí)被觸發(fā)。
這個(gè)事件可以用于提示用戶確認(rèn)是否真的要離開頁面拌消，或者用于執(zhí)行一些清理操作挑豌，如保存草稿、清除定時(shí)器等墩崩。
5氓英，onPermissionRequest ：在 Web 頁面請求權(quán)限時(shí)進(jìn)行自定義處理。
例如鹦筹，顯示自定義的權(quán)限請求對話框债蓝，或者根據(jù)應(yīng)用的邏輯決定是否允許權(quán)限請求

.onPermissionRequest((event) => {
          //權(quán)限申請
          let reqPermissions = event?.request.getAccessibleResource();
          if (reqPermissions) {
            let permissions: Array<Permissions> = []; //
            permissions.forEach((per: string) => {
              if (per === this.permission_CAMERA) {
                permissions.push('ohos.permission.CAMERA');
              } else if (per === this.permission_AUDIO) {
                permissions.push('ohos.permission.WRITE_AUDIO');
              }
            })
            let rst = PermissionUtil.checkAccessTokens(permissions);
            if (rst.length === 0) {
              //都已授權(quán)
              event?.request.grant(permissions);
            } else {
              this.showPermissionDialog(rst, () => {
                event?.request.grant(permissions);
              }, () => {
                event?.request.deny();
              });
            }
          }
        })

6，onAlert: 允許開發(fā)者攔截并自定義 alert() 對話框的行為盛龄，
例如饰迹，用應(yīng)用內(nèi)的消息提示框替換默認(rèn)的瀏覽器對話框芳誓，或者執(zhí)行一些額外的邏輯
7，onShowFileSelector 選擇文件啊鸭，拉起文件\圖庫選擇器
8锹淌，onProgressChange 網(wǎng)頁加載進(jìn)度變化時(shí)觸發(fā)該回調(diào)。
9赠制，onRequestSelected 當(dāng)Web組件獲得焦點(diǎn)時(shí)觸發(fā)該回調(diào)
10赂摆，onErrorReceive 網(wǎng)頁加載遇到錯(cuò)誤時(shí)觸發(fā)該回調(diào)；在無網(wǎng)絡(luò)的情況下钟些，觸發(fā)此回調(diào)

交互

1烟号，返回事件
（1）與原生標(biāo)題欄的，返回icon 交互

Image(this.backIcon).onClick(() => {
    // 判斷是否可以回退網(wǎng)頁
    let canBack = this.webController.accessBackward()
    if(canBack){
      this.webController.backward()
    }else{
      RouterUtil.jumpBack()
    }
})

（2）返回手勢的交互

onBackPress(): boolean | void {
    if(this.webController.accessBackward()){
      this.webController.backward()
      return true
    }
  }

2政恍，代理對象交互汪拥。javaScriptProxy：將本地對象暴露給h5，使得網(wǎng)頁可以調(diào)用本地對象的方法或訪問其屬性篙耗，實(shí)現(xiàn)h5和應(yīng)用通信
功能：

• 本地對象暴露：將本地對象及其方法和屬性暴露給網(wǎng)頁中的 JavaScript 代碼迫筑。
• 網(wǎng)頁交互：允許網(wǎng)頁通過 JavaScript 調(diào)用本地對象的方法，或監(jiān)聽本地對象的事件宗弯。
• 數(shù)據(jù)綁定：可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定脯燃，即網(wǎng)頁中的數(shù)據(jù)變化可以實(shí)時(shí)反映到本地對象中，反之亦然蒙保。

private webViewJs:NativeJs= new NativeJs(this.webController);
Web() .javaScriptProxy({
            object: this.webViewJs,
            name: "AppJs",
            methodList: this.webViewJs.getMethodList(),
            controller: this.webController
          })
...

export class NativeJs{
  
/**
   * 提供給H5使用的方法辕棚，需要把方法名放在這里
   */
  getMethodList(): string[] {
    return ['getDeviceInfo','getPhoneNumber','jumpToNewPage']
  }
  /**
   * 獲取注冊手機(jī)號  js方法
   */
  getPhoneNumber() : string{
    let result = '171xxxxxxxx'
    return result
  }

}