uni-app+vue3实战：巧用web-view与H5双向通信，实现localStorage数据同步与多端兼容方案

1. 为什么需要web-view与H5的双向通信？

在混合开发中，我们经常会遇到这样的场景：已经开发好的H5页面需要快速集成到原生应用中，或者某些复杂功能（比如数据可视化大屏）更适合用H5实现。这时候web-view就成了连接原生和H5的桥梁。但仅仅加载H5页面还不够，我们经常需要实现以下功能：

• 用户登录状态同步（比如把App获取的Token传给H5）
• 数据实时交互（比如H5表单提交结果回传给App）
• 功能联动（比如H5按钮触发原生相机）

我去年做过一个电商项目就遇到典型场景：商品详情页用H5实现（方便运营随时改版），但购物车和支付需要调用原生功能。这时候双向通信就成了刚需，特别是要把用户登录信息从App同步到H5的localStorage，否则每次打开H5都要重新登录。

2. 基础通信方案实现

2.1 uni-app向H5发送数据

在uni-app的vue3组件中，我们可以这样初始化web-view并发送消息：

javascript复制<template>
  <web-view 
    :src="h5Url" 
    ref="webview"
    @message="handleH5Message"
  ></web-view>
</template>

<script setup>
import { ref } from 'vue'

const h5Url = ref('https://your-h5-domain.com')
const webview = ref(null)

// 关键发送方法
const sendToH5 = () => {
  const currentPage = getCurrentPages().pop()
  const appWebview = currentPage.$getAppWebview()
  const webviewContext = appWebview.children()[0]
  
  const payload = {
    token: 'user_jwt_token_123',
    theme: 'dark'
  }
  
  webviewContext.evalJS(`receiveAppData(${JSON.strin