鸿蒙开发日记：ArkWeb在美颜相机中的Web滤镜商店集成

开发场景需求
在"拍摄美颜相机"应用中，需实现在线滤镜商城功能。ArkWeb 作为鸿蒙的Web组件容器，解决了原生滤镜资源有限的痛点，实现：
动态加载云端滤镜商店页面
原生与Web的双向数据通信
网页安全隔离与性能优化

// 核心实现与代码示例
// 基础Web容器集成
typescript

// 滤镜商店页面（FilterStore.ets）  
@Component  
struct FilterStorePage {  
  private controller: WebController = new WebController();  
  @State webUrl: string = 'https://filter-store.example.com/harmony';  
  
  build() {  
    Column() {  
      // ArkWeb组件容器  
      Web({  
        controller: this.controller,  
        src: this.webUrl  
      })  
      .javaScriptAccess(true)  // 启用JS交互  
      .fileAccess(true)       // 允许访问本地文件  
      .onPageEnd(() => {  
        console.info('滤镜商店加载完成');  
      })  
      
      // 原生导航栏  
      NativeHeader({ onBack: this.goBack })  
    }  
  }  
  
  // 返回时清除缓存  
  aboutToDisappear() {  
    this.controller.clearCache();  
  }  
}  

// 原生与Web双向通信
// 步骤1：Web向原生发送滤镜数据
javascript

/* 网页端JS代码 */  
function sendFilterToNative(filterData) {  
  // 调用鸿蒙注入的全局对象  
  harmonyWebInterface.postMessage({  
    type: 'FILTER_PURCHASE',  
    data: filterData  
  });  
}  

// 步骤2：原生接收并处理数据
typescript

// 注册消息处理器  
this.controller.registerJavaScriptProxy({  
  postMessage: (msg) => this.handleWebMessage(msg)  
}, 'harmonyWebInterface');  

// 处理Web消息  
private handleWebMessage(msg: WebMessage) {  
  if (msg.type === 'FILTER_PURCHASE') {  
    const filter = msg.data as FilterItem;  
    // 保存到本地数据库  
    FilterDB.addPurchasedFilter(filter);  
    // 显示购买成功提示  
    prompt.showToast({ message: `已添加${filter.name}` });  
  }  
}  

// 步骤3：原生调用Web方法
typescript

// 刷新网页商品列表  
refreshWebStore() {  
  this.controller.runJavaScript('window.refreshProducts()');  
}  
// 安全与性能优化
typescript

Web({  
  /* ... */  
})  
.zoomAccess(false)  // 禁用缩放  
.userAgent('HarmonyOS-BeautyCam/1.0') // 自定义UA  
.webDebuggingAccess(false) // 生产环境禁用调试  
.onError((err) => {  
  // 网页崩溃时降级处理  
  if (err.code === 2003) {  
    this.fallbackToNativeStore();  
  }  
})  
// 关键配置
module.json5 声明：
json

"abilities": [{  
  "name": "FilterStorePage",  
  "permissions": [  
    "ohos.permission.INTERNET",  
    "ohos.permission.GET_NETWORK_INFO"  
  ]  
}],  
"metaData": {  
  "networkSecurityConfig": {  
    "cleartextTraffic": true  // 允许HTTP  
  }  
}  

// 跨域问题解决方案
typescript
// 启用跨域访问  
.webCursiveFont(true)  
.domStorageAccess(true)
// 内存泄漏预防
typescript

aboutToDisappear() {  
  this.controller.destroy(); // 必须手动销毁  
}  

// 混合渲染优化
typescript

// 网页透明区域显示原生组件  
.backgroundTransparent(true)  
.overlay(this.buildNativeFloatingButton())  

// 安全增强实践
// 内容安全策略
typescript

.contentAccess(true)  
.setCSP("default-src 'self' https://cdn.example.com")  

// 敏感操作二次确认
typescript

onConfirm(event: { url: string, message: string }) {  
  if (event.url.includes('payment')) {  
    showPaymentDialog(event.url);  
    return true; // 拦截默认弹窗  
  }  
  return false;  
}