在做 React Native 應(yīng)用時(shí)，如果需要在 App 里面內(nèi)嵌 H5 頁面，那么 H5 與 App 之間可以通過 Webview 的 PostMessage 功能實(shí)現(xiàn)實(shí)時(shí)的通訊，但是在小程序里面，雖然也提供了一個(gè) webview 組件，但是，在進(jìn)行 postMessage 通訊時(shí)，官方文檔里面給出了一條很變態(tài)的說明：
網(wǎng)頁向小程序 postMessage 時(shí)，會在特定時(shí)機(jī)（小程序后退、組件銷毀、分享）觸發(fā)并收到消息。e.detail = { data }，data 是多次 postMessage 的參數(shù)組成的數(shù)組
這里面已經(jīng)說的很明白了，不管我們從 H5 頁面里面 postMessage 多少次，小程序都是收不到的，除非：
這里面其實(shí)我沒有完全說對，官方其實(shí)說的是 小程序后退，并沒有說是用戶做回退操作，經(jīng)過我的實(shí)測，確實(shí)人家表達(dá)得很清楚了，我們通過微信官方的SDK調(diào)起的回退也是完全可行的：
wx.miniProgram.navigateBack()
大體思路
從上面的分析和實(shí)測中我們可以知道，要實(shí)現(xiàn)無需要用戶操作即可完成的通訊，第三種情況我們是完全不需要考慮了的，那么來仔細(xì)考慮第 1 和第 2 種場景。
第 1 種方式：回退
當(dāng)我們想通過網(wǎng)頁向小程序發(fā)送數(shù)據(jù)，同時(shí)還可以回退到上一個(gè)頁面時(shí)，我們可以在 wx.miniProgram.postMessage 之后，立馬調(diào)用一次 wx.miniProgram.navigateBack()，此時(shí)小程序的操作是：
我們在處理 postMessage 的時(shí)候做一些特殊操作，可以將這些數(shù)據(jù)保存下來
第 2 種方式：組件銷毀
這是我感覺最合適的一種方式，可以讓小程序拿到數(shù)據(jù)，同時(shí)還保留在當(dāng)前頁面，只需要銷毀一次 webview 即可，大概的流程就是：
這種方式雖然變態(tài)，但是至少可以做到實(shí)時(shí)拿到數(shù)據(jù)，同時(shí)還保留在當(dāng)前 H5 頁面，唯一需要解決的是，在做這整套操作前，H5 頁面需要做好狀態(tài)的緩存，要不然，再次打開之后，H5 的數(shù)據(jù)就清空了。
第 1 種方式：通過回退，將數(shù)據(jù)提交給小程序之后傳遞給 webview 的上一頁面
這種方式實(shí)現(xiàn)起來其實(shí)是很簡單的，我們現(xiàn)在新建兩個(gè)頁面：
sandbox/canvas-by-webapp/index.js
const app = getApp();Page({ data: { url: '', dimension: null, mime: '', }, handleSaveTap: function() { wx.navigateTo({ url: '/apps/browser/index', events: { receiveData: data => { console.log('receiveData from web browser: ', data); if (typeof data === 'object') { const { url, mime, dimension } = data; if (url && mime && dimension) { this.setData({ url, dimension, mime, }); this.save(data); } } } } }) }, save: async function({ url, mime, dimension }) { try { await app.saveImages([url]); app.toast('保存成功！'); } catch (error) { console.log(error); app.toast(error.message || error); } },});上面的代碼中，核心點(diǎn)，就在于 wx.navigateTo 調(diào)用時(shí)，里面的 events 參數(shù)，這是用來進(jìn)行與 /apps/browser/index 頁面通訊，接收數(shù)據(jù)用的。
apps/browser/index.js
我省略了絕大多數(shù)與本文無關(guān)的代碼，保存最主要的三個(gè)：
Page({ onLoad() { if (this.getOpenerEventChannel) { this.eventChannel = this.getOpenerEventChannel(); } }, handleMessage: function(message) { const { action, data } = message; if (action === 'postData') { if (this.eventChannel) { this.eventChannel.emit('receiveData', data); } } }, handlePostMessage: function(e) { const { data } = e.detail; if (Array.isArray(data)) { const messages = data.map(item => { try { const object = JSON.parse(item); this.handleMessage(object); return object; } catch (error) { return item; } }); this.setData({ messages: [...messages], }); } },})其實(shí)，onLoad 方法中，我們使用了自微信 SDK 2.7.3 版本開始提供的 getOpenerEventChannel 方法，它可以創(chuàng)建一個(gè)與上一個(gè)頁面的事件通訊通道，這個(gè)我們會在 handleMessage 中使用。
handlePostMessage 就是被 bindmessage 至 webview 上面的方法，它用于處理從 H5 頁面中 postMessage 過來的消息，由于小程序是將多次 postMessage 的消息放在一起發(fā)送過來的，所以，與其它的Webview不同點(diǎn)在于，我們拿到的是一個(gè)數(shù)組： e.detail.data， handlePostMessage 的作用就是遍歷這個(gè)數(shù)組，取出每一條消息，然后交由 handleMessage 處理。
handleMessage 在拿到 message 對象之后，將 message.action 與 message.data 取出來（*這里需要注意，這是我們在 H5 里面的設(shè)計(jì)的一種數(shù)據(jù)結(jié)構(gòu)，你完全可以在自己的項(xiàng)目中設(shè)計(jì)自己的結(jié)構(gòu)），根據(jù) action 作不同的操作，我在這里面的處理是，當(dāng) action === 'postData' 時(shí)，就通過 getOpenerEventChannel 得到的消息通道 this.eventChannel 將數(shù)據(jù)推送給上一級頁面，也就是 /sandbox/canvas-by-webapp，但是不需要自己執(zhí)行 navigateBack ，因?yàn)檫@個(gè)需要交由 H5 頁面去執(zhí)行。
H5 頁面的實(shí)現(xiàn)
我的 H5 主要就是使用 html2canvas 庫生成 Canvas 圖（沒辦法，自己在小程序里面畫太麻煩了），但是這個(gè)不在本文討論過程中，我們就當(dāng)是已經(jīng)生成了 canvas 圖片了，將其轉(zhuǎn)為 base64 文本了，然后像下面這樣做：
wx.miniProgram.postMessage({ data: JSON.stringify({ action: 'postData', data: 'BASE 64 IMAGE STRING' })});wx.miniProgram.navigateBack()將數(shù)據(jù) postMessage 之后，立即 navigateBack() ，來觸發(fā)一次回退，也就觸發(fā)了 bindmessage 事件。
使用銷毀 webview 實(shí)現(xiàn)實(shí)時(shí)通訊
接下來，咱就開始本文的重點(diǎn)了，比較變態(tài)的方式，但是也沒想到更好的辦法，所以，大家將就著交流吧。
H5 頁面的改變
wx.miniProgram.postMessage({ data: JSON.stringify({ action: 'postData', data: 'BASE 64 IMAGE STRING' })});wx.miniProgram.navigateTo('/apps/browser/placeholder');H5 頁面只是將 wx.miniProgram.navigateBack() 改成了 wx.miniProgram.navigateTo('/apps/browser/placeholder') ，其它的事情就先都交由小程序處理了。
/apps/browser/placeholder
這個(gè)頁面的功能其實(shí)很簡單，當(dāng)打開它了之后，做一點(diǎn)點(diǎn)小操作，立馬回退到上一個(gè)頁面（就是 webview 所在的頁面。
Page({ data: { loading: true }, onLoad(options) { const pages = getCurrentPages(); const webviewPage = pages[pages.length - 2]; webviewPage.setData( { shouldReattachWebview: true }, () => { app.wechat.navigateBack(); } ); },});我們一行一行來看：
const pages = getCurrentPages();
這個(gè)可以拿到當(dāng)前整個(gè)小程序的頁面棧，由于這個(gè)頁面我們只允許從小程序的 Webview 頁面過來，所以，它的上一個(gè)頁面一定是 webview 所在的頁面：
const webviewPage = pages[pages.length - 2];
拿到 webviewPage 這個(gè)頁面對象之后，調(diào)用它的方法 setData 更新一個(gè)值：
webviewPage.setData( { shouldReattachWebview: true }, () => { app.wechat.navigateBack(); } );shouldReattachWebview 這個(gè)值為 true 的時(shí)候，表示需要重新 attach 一次 webview，這個(gè)頁面的事件現(xiàn)在已經(jīng)做完了，回到 webview 所在的頁面
apps/browser/index.js 頁面
我同樣只保留最核心的代碼，具體的邏輯，我就直接寫進(jìn)代碼里面了。
Page({ data: { shouldReattachWebview: false, // 是否需要重新 attach 一次 webview 組件 webviewReattached: false, // 是否已經(jīng) attach 過一次 webview 了 hideWebview: false // 是否隱藏 webview 組件 }, onShow() { // 如果 webview 需要重新 attach if (this.data.shouldReattachWebview) { this.setData( { // 隱藏 webview hideWebview: true, }, () => { this.setData( { // 隱藏之后立馬顯示它，此時(shí)完成一次 webview 的銷毀，拿到了 postMessage 中的數(shù)據(jù) hideWebview: false, webviewReattached: true, }, () => { // 拿到數(shù)據(jù)之后，處理 canvasData this.handleCanvasData(); } ); } ); } }, // 當(dāng) webview 被銷毀時(shí)，該方法被觸發(fā) handlePostMessage: function(e) { const { data } = e.detail; if (Array.isArray(data)) { const messages = data.map(item => { try { const object = JSON.parse(item); this.handleMessage(object); return object; } catch (error) { return item; } }); this.setData({ messages: [...messages], }); } }, // 處理每一條消息 handleMessage: function(message) { const {action, data} = message // 如果 saveCanvas action if (action === 'saveCanvas') { // 將數(shù)據(jù)先緩存進(jìn) Snap 中 const { canvasData } = this.data; // app.checksum 是我自己封裝的方法，計(jì)算任何數(shù)據(jù)的 checksum，我拿它來當(dāng)作 key // 這可以保證同一條數(shù)據(jù)只會被處理一次 const snapKey = app.checksum(data); // 只要未處理過的數(shù)據(jù)，才需要再次數(shù)據(jù) if (canvasData[snapKey] !== true) { if (canvasData[snapKey] === undefined) { // 將數(shù)據(jù)從緩存進(jìn) `snap` 中 // 這也是我自己封裝的一個(gè)方法，可以將數(shù)據(jù)緩存起來，并且只能被讀取一次 app.snap(snapKey, data); // 設(shè)置 canvasData 中 snapKey 字段為 `false` canvasData[snapKey] = false; this.setData({ canvasData, }); } } } }, // 當(dāng) webview 被重新 attach 之后，canvas 數(shù)據(jù)已經(jīng)被保存進(jìn) snap 中了， handleCanvasData: async function handleCanvasData() { const { canvasData } = this.data; // 從 canvasData 中拿到所有的 key，并過濾到已經(jīng)處理過的數(shù)據(jù) const keys = Object.keys(canvasData).filter(key => canvasData[key] === false); if (keys.length === 0) { return; } for (let i = 0; i < keys.length; i += 1) { try { const key = keys[i]; const { url } = app.snap(key); // 通過自己封裝的方法，將 url（也就是Base64字符）保存至相冊 const saved = await app.saveImages(url); // 更新 canvasData 對象 canvasData[key] = true this.setData({ canvasData }) console.log('saved: ', saved); } catch (error) { app.toast(error.message); return; } } },})對應(yīng)的 index.wxml 文件內(nèi)容如下：
<web-view src="{{src}}" wx:if="{{src}}" bindmessage="handlePostMessage" wx:if="{{!hideWebview}}" />流程回顧與總結(jié)
整個(gè)流程看舊去很繁瑣，但是寫起來其實(shí)還好，這里面最主要的是需要注意，數(shù)據(jù)去重，微信的 postMessage 里面拿到的永遠(yuǎn) 都是 H5 頁面從被打開到關(guān)閉的所有數(shù)據(jù)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
