需要web组件JSBridge通信的demo

// index.ets页面 
import web_webview from '@ohos.web.webview'; 
import business_error from '@ohos.base'; 
class H5Object{ 
  'name':string 
  'age':string 
  'sex':string 
} 
@Entry 
@Component 
struct Index { 
  controller:web_webview.WebviewController = new web_webview.WebviewController(); 
  scroller: Scroller = new Scroller() 
  ports:web_webview.WebMessagePort[] = []; 
  @State message: string = '应用侧'; 
  @State receivedFromHtml:string = ''; 
  @State receivedObjectFromHtml:H5Object = { 
    name:'Helen', 
    age:'20', 
    sex:'Girl' 
  }; 
  @State receivedArrayFromHtml:Array<string> = ['我是第一条数据','我是第二条数据','我是第三条数据']; 
  @State receivedArrayObjectFromHtml:H5Object[] = [ 
    { 
      name:'Helen', 
      age:'20', 
      sex:'Girl' 
    }, 
    { 
      name:'Alice', 
      age:'19', 
      sex:'Girl' 
    }, 
    { 
      name:'Wendy', 
      age:'18', 
      sex:'Girl' 
    }, 
  ]; 
  aboutToAppear() { 
    // 配置Web开启调试模式 
    web_webview.WebviewController.setWebDebuggingAccess(true); 
  } 
  onPageShow() { 
    setTimeout(()=>{ 
      this.getDataFromH5(); 
    },500) 
  } 
  getDataFromH5() { 
    let tag = '[TAG-LCF]'; 
    try{ 
      // 1、创建两个消息端口 
      this.ports = this.controller.createWebMessagePorts(); 
      // 2、在应用侧的消息端口（端口1）上注册回调事件。 
      this.ports[1].onMessageEvent((result:web_webview.WebMessage)=>{ 
        // 判断数据类型是否是对象 
        let isObject = false; 
        // 判断数据类型是否是数组 
        let isArray = false; 
        let arr = []; 
        // 如果数据是字符串、数字走catch，只有数组、对象、数组对象类型的数据走try 
        try{ 
          arr = JSON.parse(result as string); 
          isObject = true; 
          if(Array.isArray(arr)){ 
            isArray = true; 
          }else{ 
            isArray = false; 
          } 
        } 
        catch(error){ 
          let e: business_error.BusinessError = error as business_error.BusinessError; 
          console.error(`ErrorCode: ${e.code},  Message: ${e.message}`); 
        } 
        if(typeof(result) === 'string' && !isObject){ 
          // H5侧传过来的是字符串数据 
          this.receivedFromHtml = result; 
          return this.receivedFromHtml; 
        }else if(typeof(result) === 'string' && isObject && !isArray){ 
          // H5侧传过来的是对象数据 
          this.receivedObjectFromHtml = JSON.parse(result) as H5Object; 
          return this.receivedObjectFromHtml; 
        }else if(typeof(result) === 'string' && isObject && isArray){ 
          // H5侧传过来的是数组对象数据 
          if (JSON.parse(result)[0] !== '第一条数据'){ 
            this.receivedArrayObjectFromHtml = JSON.parse(result); 
            return this.receivedArrayObjectFromHtml 
          } 
          // H5侧传过来的是数组数据 
          this.receivedArrayFromHtml = JSON.parse(result); 
          return this.receivedArrayFromHtml; 
        } 
        // 必须return数据，否则报错 
        return this.receivedFromHtml; 
      }) 
      // 3、将另一个消息端口（端口0）发送到HTML侧，由HTML侧保存并使用 
      this.controller.postMessage('__init_port__',[this.ports[0]],'*'); 
    }catch(error){ 
      let e: business_error.BusinessError = error as business_error.BusinessError; 
      console.error(`ErrorCode: ${e.code},  Message: ${e.message}`); 
    } 
  } 
  // 异步数据的发送 
  async AsynData(){ 
    if (this.ports && this.ports[1]) { 
      await this.ports[1].postMessageEvent('倒计时3秒'); 
    } else { 
      console.error(`ports is null, Please initialize first`) 
    } 
  } 
  build() { 
    Column(){ 
      Scroll(this.scroller){ 
        Column() { 
          Text(this.message) 
            .fontSize(20) 
            .fontWeight(FontWeight.Bold) 
            .margin({ top: 10 }) 
          // 展示字符串 或 异步数据 
          Text('H5页面发送过来的String数据: ' + this.receivedFromHtml) 
            .margin({ top: 10, bottom: 10 }) 
          // 展示对象 
          Text('H5页面发送过来的Object数据: ') 
          Row({ space: 16 }) { 
            Text('姓名:' + this.receivedObjectFromHtml.name) 
            Text('性别:' + this.receivedObjectFromHtml.sex) 
            Text('年龄:' + this.receivedObjectFromHtml.age) 
          } 
          // 展示数组数据 
          Text('H5页面发送过来的Array数据:') 
          List() { 
            ForEach(this.receivedArrayFromHtml, (item: string) => { 
              ListItem() { 
                Text(item) 
              } 
            }) 
          } 
          .alignListItem(ListItemAlign.Center) 
          // 展示数组对象嵌套数据 
          List() { 
            ForEach(this.receivedArrayObjectFromHtml, (item: H5Object) => { 
              ListItem() { 
                Row() { 
                  Text('姓名:' + item.name) 
                  Text('性别:' + item.sex) 
                  Text('年龄:' + item.age) 
                } 
              } 
            }) 
          } 
          .alignListItem(ListItemAlign.Center) 
          Column() { 
            Button('发送String类型数据至H5侧') 
              .fontSize(12) 
              .margin({ bottom: 10 }) 
              .onClick(() => { 
                if (this.ports && this.ports[1]) { 
                  this.ports[1].postMessageEvent('来自应用侧String类型的数据'); 
                } else { 
                  console.error(`ports is null, Please initialize first`) 
                } 
              }) 
            Button('发送Object类型数据至H5侧') 
              .fontSize(12) 
              .margin({ bottom: 10 }) 
              .onClick(() => { 
                if (this.ports && this.ports[1]) { 
                  this.ports[1].postMessageEvent(JSON.stringify(this.receivedObjectFromHtml)); 
                } else { 
                  console.error(`ports is null, Please initialize first`) 
                } 
              }) 
            Button('发送Array类型数据至H5侧') 
              .fontSize(12) 
              .margin({ bottom: 10 }) 
              .onClick(() => { 
                if (this.ports && this.ports[1]) { 
                  this.ports[1].postMessageEvent(JSON.stringify(this.receivedArrayFromHtml)); 
                } else { 
                  console.error(`ports is null, Please initialize first`) 
                } 
              }) 
            Button('发送数组对象类型数据至H5侧') 
              .fontSize(12) 
              .margin({ bottom: 10 }) 
              .onClick(() => { 
                if (this.ports && this.ports[1]) { 
                  this.ports[1].postMessageEvent(JSON.stringify(this.receivedArrayObjectFromHtml)); 
                } else { 
                  console.error(`ports is null, Please initialize first`) 
                } 
              }) 
            Button('发送异步数据至H5侧') 
              .fontSize(12) 
              .margin({ bottom: 10 }) 
              .onClick(() => { 
                if (this.ports && this.ports[1]) { 
                  this.AsynData() 
                  setTimeout(()=>{ 
                    this.ports[1].postMessageEvent('来自应用侧的异步数据'); 
                  },3000) 
                } else { 
                  console.error(`ports is null, Please initialize first`) 
                } 
              }) 
          }.width('100%') 
        } 
      } 
      .height('50%') 
      .width('100%') 
      .scrollable(ScrollDirection.Vertical) 
      .backgroundColor('#FDE7E9') 
      Web({src:$rawfile('index.html'),controller:this.controller}) 
        .height('50%') 
        .onlineImageAccess(true) 
        .imageAccess(true) 
    } 
    .height('100%') 
    .width('100%') 
  } 
} 
// index.html代码，该文件放在rawfile文件夹下 
<!doctype html> 
  <html lang="en"> 
  <head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" 
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  <title>Document</title> 
  </head> 
  <body> 
  <h1>H5侧</h1> 
  <div> 
  <input type="button" value="发送String类型数