場(chǎng)景：

在 uni-app 中通過 web-view 內(nèi)嵌 H5 ，要做到在 H5 發(fā)起傳遞信息傳給 uni-app 并且 uni-app 能實(shí)時(shí)接收。

解決方案：

1.在uni-app項(xiàng)目的main.js文件中引入和創(chuàng)建一個(gè)事件總線對(duì)象：

import Vue from 'vue'
export const EventBus = new Vue()

2.在uni-app中定義一個(gè)事件監(jiān)聽函數(shù)，在該函數(shù)中實(shí)現(xiàn)對(duì)來自web-view的消息進(jìn)行處理：

import {EventBus} from '@/main.js'
// 監(jiān)聽事件
EventBus.$on('messageFromH5', (data) => {
  // 處理來自web-view的消息
  console.log('收到來自H5頁(yè)面的消息：', data)
})

3.在web-view的H5頁(yè)面中使用postMessage()方法向uni-app頁(yè)面發(fā)送消息，同時(shí)將發(fā)送的消息格式轉(zhuǎn)換為對(duì)象格式：

var messageData = {
  content: '這是從H5頁(yè)面中發(fā)送的消息'
}
var sendData = JSON.stringify(messageData)
window.parent.postMessage(sendData, '*')

• 在調(diào)用postMessage方法時(shí)，第二個(gè)參數(shù)需要指定為’*'，表示任意域名都可以接收到消息。
• uniapp的web-view組件的onMessage中的回調(diào)函數(shù)，只有在頁(yè)面還沒有被銷毀前才會(huì)響應(yīng)，因此需要在頁(yè)面銷毀前即可獲得消息，如果需要在后退和分享時(shí)也能獲得消息，則需要在生命周期函數(shù)onUnload中清理原有的web-view，再重新生成web-view，并在重新生成的web-view中監(jiān)聽消息。
• 在web-view中使用postMessage方法發(fā)送數(shù)據(jù)時(shí)，需要確保發(fā)送的數(shù)據(jù)是一個(gè)標(biāo)準(zhǔn)的JSON對(duì)象，避免其他數(shù)據(jù)格式的問題而導(dǎo)致消息無法被正確接收。

4.在web-view組件標(biāo)簽中設(shè)置onMessage屬性，監(jiān)聽web-view中傳過來的消息，并對(duì)其進(jìn)行相應(yīng)的處理：

<web-view src="https://example.com/h5page" @message="onMessage"></web-view>
export default {
  methods: {
    onMessage (event) {
      // 對(duì)從web-view中接收到的消息進(jìn)行處理
      console.log('收到來自web-view的消息：', event.detail.data)
      // 將消息發(fā)送到uni-app中的事件總線
      EventBus.$emit('messageFromH5', event.detail.data)
    }
  }
}

這里的onMessage()方法通過監(jiān)聽web-view的message事件來實(shí)現(xiàn)對(duì)從web-view中傳過來的消息進(jìn)行處理。同時(shí)，將接收到的消息發(fā)送到uni-app頁(yè)面中已經(jīng)創(chuàng)建的事件總線中，以便不在內(nèi)嵌的頁(yè)面也能夠接收消息。

到此這篇關(guān)于web-view內(nèi)嵌H5與uniapp數(shù)據(jù)的實(shí)時(shí)傳遞的文章就介紹到這了,更多相關(guān)web-view內(nèi)嵌H5內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論