// app.json 或 page.json
{
  "usingComponents": {},
  "permission": {
    "scope.webView": {
      "desc": "用于網(wǎng)頁(yè)和小程序通信"
    }
  }
}

<!-- 內(nèi)嵌網(wǎng)頁(yè)需引入微信JS-SDK -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!-- 或使用官方最新版本 -->

// page.js
Page({
  data: {
    webViewUrl: 'https://your-domain.com/page.html'
  },

  onLoad() {
    // 通過 web-view 組件的 ref 發(fā)送消息
  },

  // 向網(wǎng)頁(yè)發(fā)送消息
  sendToWebPage() {
    const webview = this.selectComponent('#myWebview')
    webview.postMessage({
      data: {
        type: 'from_miniprogram',
        message: 'Hello from Mini Program!',
        timestamp: Date.now()
      }
    })
  },

  // 接收網(wǎng)頁(yè)消息
  onMessage(e) {
    console.log('收到網(wǎng)頁(yè)消息:', e.detail.data)
    // 處理網(wǎng)頁(yè)發(fā)送的數(shù)據(jù)
    const { type, data } = e.detail.data
    if (type === 'from_web') {
      // 處理邏輯
    }
  }
})

<!-- page.wxml -->
<web-view 
  id="myWebview"
  src="{{webViewUrl}}"
  bindmessage="onMessage"
  bindload="onWebViewLoad"
/>
<button bindtap="sendToWebPage">發(fā)送消息到網(wǎng)頁(yè)</button>

// 監(jiān)聽小程序消息
document.addEventListener('message', function(e) {
  const data = e.data
  console.log('收到小程序消息:', data)
  
  // 處理消息
  if (data.type === 'from_miniprogram') {
    // 執(zhí)行相應(yīng)操作
    
    // 回復(fù)消息給小程序
    if (window.wx && window.wx.miniProgram) {
      window.wx.miniProgram.postMessage({
        data: {
          type: 'from_web',
          reply: 'Message received!',
          original: data.message
        }
      })
    }
  }
})

// 主動(dòng)發(fā)送消息到小程序
function sendToMiniProgram() {
  if (window.wx && window.wx.miniProgram) {
    window.wx.miniProgram.postMessage({
      data: {
        type: 'user_action',
        action: 'button_click',
        value: 'some_value',
        timestamp: new Date().getTime()
      }
    })
  }
}

// utils/webviewBridge.js
class WebViewBridge {
  constructor(webviewRef) {
    this.webview = webviewRef
    this.messageHandlers = new Map()
  }

  // 發(fā)送消息到網(wǎng)頁(yè)
  postMessage(type, data) {
    if (!this.webview) return false
    
    this.webview.postMessage({
      data: {
        type,
        payload: data,
        timestamp: Date.now(),
        source: 'miniprogram'
      }
    })
    return true
  }

  // 注冊(cè)消息處理器
  onMessage(type, handler) {
    this.messageHandlers.set(type, handler)
  }

  // 處理接收到的消息
  handleMessage(event) {
    const { type, payload, source } = event.detail.data
    if (source === 'web') {
      const handler = this.messageHandlers.get(type)
      if (handler) {
        handler(payload)
      }
    }
  }

  // 移除處理器
  offMessage(type) {
    this.messageHandlers.delete(type)
  }
}

export default WebViewBridge

// webview-bridge.js
class MiniProgramBridge {
  constructor() {
    this.handlers = new Map()
    this.init()
  }

  init() {
    // 監(jiān)聽小程序消息
    document.addEventListener('message', (e) => {
      const { type, payload, source } = e.data
      if (source === 'miniprogram') {
        this.dispatch(type, payload)
      }
    })

    // 監(jiān)聽頁(yè)面卸載
    window.addEventListener('beforeunload', () => {
      this.postMessage('page_unload', {})
    })
  }

  // 發(fā)送消息到小程序
  postMessage(type, data) {
    if (window.wx && window.wx.miniProgram) {
      window.wx.miniProgram.postMessage({
        data: {
          type,
          payload: data,
          timestamp: Date.now(),
          source: 'web'
        }
      })
      return true
    }
    return false
  }

  // 注冊(cè)消息處理器
  on(type, handler) {
    if (!this.handlers.has(type)) {
      this.handlers.set(type, [])
    }
    this.handlers.get(type).push(handler)
  }

  // 分發(fā)消息
  dispatch(type, data) {
    const typeHandlers = this.handlers.get(type)
    if (typeHandlers) {
      typeHandlers.forEach(handler => handler(data))
    }
  }

  // 移除處理器
  off(type, handler) {
    const typeHandlers = this.handlers.get(type)
    if (typeHandlers) {
      const index = typeHandlers.indexOf(handler)
      if (index > -1) {
        typeHandlers.splice(index, 1)
      }
    }
  }
}

// 創(chuàng)建全局實(shí)例
window.MiniProgramBridge = new MiniProgramBridge()

import WebViewBridge from '../../utils/webviewBridge'

Page({
  data: {
    url: 'https://example.com'
  },

  onLoad() {
    // 在 web-view 加載完成后初始化
  },

  onWebViewLoad() {
    const webview = this.selectComponent('#webview')
    this.bridge = new WebViewBridge(webview)
    
    // 注冊(cè)消息處理器
    this.bridge.onMessage('user_login', (data) => {
      console.log('用戶登錄:', data)
      // 處理登錄邏輯
    })

    this.bridge.onMessage('payment_success', (data) => {
      console.log('支付成功:', data)
      wx.showToast({
        title: '支付成功'
      })
    })
  },

  // 發(fā)送用戶信息到網(wǎng)頁(yè)
  sendUserInfo() {
    this.bridge.postMessage('user_info', {
      userId: '123',
      nickname: '張三',
      avatar: 'url'
    })
  }
})

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <button onclick="sendMessage()">發(fā)送消息到小程序</button>
  
  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <script src="webview-bridge.js"></script>
  <script>
    // 監(jiān)聽小程序消息
    MiniProgramBridge.on('user_info', (data) => {
      console.log('收到用戶信息:', data)
      document.getElementById('user-name').innerText = data.nickname
    })

    // 發(fā)送消息到小程序
    function sendMessage() {
      MiniProgramBridge.postMessage('button_click', {
        buttonId: 'submit',
        value: 'confirmed'
      })
    }

    // 頁(yè)面加載完成通知小程序
    window.addEventListener('load', () => {
      MiniProgramBridge.postMessage('page_loaded', {
        title: document.title,
        url: window.location.href
      })
    })
  </script>
</body>
</html>

// 1. 添加消息類型常量
const MessageTypes = {
  USER_INFO: 'user_info',
  PAYMENT: 'payment',
  NAVIGATION: 'navigation',
  ERROR: 'error'
}

// 2. 添加超時(shí)處理
function postMessageWithTimeout(type, data, timeout = 5000) {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => {
      reject(new Error('Message timeout'))
    }, timeout)
    
    // 發(fā)送消息邏輯
  })
}

// 3. 錯(cuò)誤處理
try {
  webview.postMessage(data)
} catch (error) {
  console.error('發(fā)送消息失敗:', error)
  // 重試或降級(jí)處理
}

// 方案1：使用URL參數(shù)傳遞狀態(tài)（實(shí)時(shí)）
// 網(wǎng)頁(yè)端
function updateState(state) {
  // 通過修改hash或reload傳遞數(shù)據(jù)
  window.location.hash = 'state=' + encodeURIComponent(JSON.stringify(state))
  
  // 或者使用URL參數(shù)
  const newUrl = window.location.pathname + '?data=' + encodeURIComponent(JSON.stringify(state))
  window.history.replaceState({}, '', newUrl)
}

// 方案2：使用Storage同步（需要輪詢）
// 網(wǎng)頁(yè)端
function sendViaStorage(data) {
  localStorage.setItem('web_to_miniprogram', JSON.stringify({
    data,
    timestamp: Date.now()
  }))
}

// 小程序端（需要輪詢）
setInterval(() => {
  const storage = wx.getStorageSync('web_to_miniprogram')
  if (storage) {
    this.handleMessage(storage.data)
    wx.removeStorageSync('web_to_miniprogram')
  }
}, 100)

// 方案3：使用WebSocket（真正實(shí)時(shí)）
const ws = new WebSocket('wss://your-server.com')
ws.onmessage = (e) => {
  // 小程序通過后端中轉(zhuǎn)消息
}