微信小程序webview與h5通過(guò)postMessage實(shí)現(xiàn)實(shí)時(shí)通訊的實(shí)現(xiàn)
在做 React Native 應(yīng)用時(shí),如果需要在 App 里面內(nèi)嵌 H5 頁(yè)面,那么 H5 與 App 之間可以通過(guò) Webview 的 PostMessage 功能實(shí)現(xiàn)實(shí)時(shí)的通訊,但是在小程序里面,雖然也提供了一個(gè) webview 組件,但是,在進(jìn)行 postMessage 通訊時(shí),官方文檔里面給出了一條很變態(tài)的說(shuō)明:
網(wǎng)頁(yè)向小程序 postMessage 時(shí),會(huì)在特定時(shí)機(jī)(小程序后退、組件銷毀、分享)觸發(fā)并收到消息。e.detail = { data },data 是多次 postMessage 的參數(shù)組成的數(shù)組
這里面已經(jīng)說(shuō)的很明白了,不管我們從 H5 頁(yè)面里面 postMessage 多少次,小程序都是收不到的,除非:
- 用戶做了回退到上一頁(yè)的操作
- 組件銷毀
- 用戶點(diǎn)擊了分享
這里面其實(shí)我沒(méi)有完全說(shuō)對(duì),官方其實(shí)說(shuō)的是 小程序后退,并沒(méi)有說(shuō)是用戶做回退操作,經(jīng)過(guò)我的實(shí)測(cè),確實(shí)人家表達(dá)得很清楚了,我們通過(guò)微信官方的SDK調(diào)起的回退也是完全可行的:
wx.miniProgram.navigateBack()
大體思路
從上面的分析和實(shí)測(cè)中我們可以知道,要實(shí)現(xiàn)無(wú)需要用戶操作即可完成的通訊,第三種情況我們是完全不需要考慮了的,那么來(lái)仔細(xì)考慮第 1 和第 2 種場(chǎng)景。
第 1 種方式:回退
當(dāng)我們想通過(guò)網(wǎng)頁(yè)向小程序發(fā)送數(shù)據(jù),同時(shí)還可以回退到上一個(gè)頁(yè)面時(shí),我們可以在 wx.miniProgram.postMessage 之后,立馬調(diào)用一次 wx.miniProgram.navigateBack(),此時(shí)小程序的操作是:
- 處理 postMessage 信息
- 回退到上一頁(yè)
我們?cè)谔幚?postMessage 的時(shí)候做一些特殊操作,可以將這些數(shù)據(jù)保存下來(lái)
第 2 種方式:組件銷毀
這是我感覺(jué)最合適的一種方式,可以讓小程序拿到數(shù)據(jù),同時(shí)還保留在當(dāng)前頁(yè)面,只需要銷毀一次 webview 即可,大概的流程就是:
- 小程序 postMessage
- 小程序 navigateTo 將小程序頁(yè)面導(dǎo)向一個(gè)特殊的頁(yè)面
- 小程序的那個(gè)特殊頁(yè)面立馬回退到 webview 所在的頁(yè)面
- webview 所在的頁(yè)面的 onShow 里面,做一次處理,將 webview 銷毀,然后再次打開(kāi)
- 觸發(fā) onMessage 拿到數(shù)據(jù)
- H5 頁(yè)面再次被打開(kāi)
這種方式雖然變態(tài),但是至少可以做到實(shí)時(shí)拿到數(shù)據(jù),同時(shí)還保留在當(dāng)前 H5 頁(yè)面,唯一需要解決的是,在做這整套操作前,H5 頁(yè)面需要做好狀態(tài)的緩存,要不然,再次打開(kāi)之后,H5 的數(shù)據(jù)就清空了。
第 1 種方式:通過(guò)回退,將數(shù)據(jù)提交給小程序之后傳遞給 webview 的上一頁(yè)面
這種方式實(shí)現(xiàn)起來(lái)其實(shí)是很簡(jiǎn)單的,我們現(xiàn)在新建兩個(gè)頁(yè)面:
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ù),這是用來(lái)進(jìn)行與 /apps/browser/index 頁(yè)面通訊,接收數(shù)據(jù)用的。
apps/browser/index.js
我省略了絕大多數(shù)與本文無(wú)關(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 版本開(kāi)始提供的 getOpenerEventChannel 方法,它可以創(chuàng)建一個(gè)與上一個(gè)頁(yè)面的事件通訊通道,這個(gè)我們會(huì)在 handleMessage 中使用。
handlePostMessage 就是被 bindmessage 至 webview 上面的方法,它用于處理從 H5 頁(yè)面中 postMessage 過(guò)來(lái)的消息,由于小程序是將多次 postMessage 的消息放在一起發(fā)送過(guò)來(lái)的,所以,與其它的Webview不同點(diǎn)在于,我們拿到的是一個(gè)數(shù)組: e.detail.data, handlePostMessage 的作用就是遍歷這個(gè)數(shù)組,取出每一條消息,然后交由 handleMessage 處理。
handleMessage 在拿到 message 對(duì)象之后,將 message.action 與 message.data 取出來(lái)(*這里需要注意,這是我們?cè)?H5 里面的設(shè)計(jì)的一種數(shù)據(jù)結(jié)構(gòu),你完全可以在自己的項(xiàng)目中設(shè)計(jì)自己的結(jié)構(gòu)),根據(jù) action 作不同的操作,我在這里面的處理是,當(dāng) action === 'postData' 時(shí),就通過(guò) getOpenerEventChannel 得到的消息通道 this.eventChannel 將數(shù)據(jù)推送給上一級(jí)頁(yè)面,也就是 /sandbox/canvas-by-webapp,但是不需要自己執(zhí)行 navigateBack ,因?yàn)檫@個(gè)需要交由 H5 頁(yè)面去執(zhí)行。
H5 頁(yè)面的實(shí)現(xiàn)
我的 H5 主要就是使用 html2canvas 庫(kù)生成 Canvas 圖(沒(méi)辦法,自己在小程序里面畫(huà)太麻煩了),但是這個(gè)不在本文討論過(guò)程中,我們就當(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() ,來(lái)觸發(fā)一次回退,也就觸發(fā)了 bindmessage 事件。
使用銷毀 webview 實(shí)現(xiàn)實(shí)時(shí)通訊
接下來(lái),咱就開(kāi)始本文的重點(diǎn)了,比較變態(tài)的方式,但是也沒(méi)想到更好的辦法,所以,大家將就著交流吧。
H5 頁(yè)面的改變
wx.miniProgram.postMessage({ data: JSON.stringify({ action: 'postData', data: 'BASE 64 IMAGE STRING' }) }); wx.miniProgram.navigateTo('/apps/browser/placeholder');
H5 頁(yè)面只是將 wx.miniProgram.navigateBack() 改成了 wx.miniProgram.navigateTo('/apps/browser/placeholder') ,其它的事情就先都交由小程序處理了。
/apps/browser/placeholder
這個(gè)頁(yè)面的功能其實(shí)很簡(jiǎn)單,當(dāng)打開(kāi)它了之后,做一點(diǎn)點(diǎn)小操作,立馬回退到上一個(gè)頁(yè)面(就是 webview 所在的頁(yè)面。
Page({ data: { loading: true }, onLoad(options) { const pages = getCurrentPages(); const webviewPage = pages[pages.length - 2]; webviewPage.setData( { shouldReattachWebview: true }, () => { app.wechat.navigateBack(); } ); }, });
我們一行一行來(lái)看:
const pages = getCurrentPages();
這個(gè)可以拿到當(dāng)前整個(gè)小程序的頁(yè)面棧,由于這個(gè)頁(yè)面我們只允許從小程序的 Webview 頁(yè)面過(guò)來(lái),所以,它的上一個(gè)頁(yè)面一定是 webview 所在的頁(yè)面:
const webviewPage = pages[pages.length - 2];
拿到 webviewPage 這個(gè)頁(yè)面對(duì)象之后,調(diào)用它的方法 setData 更新一個(gè)值:
webviewPage.setData( { shouldReattachWebview: true }, () => { app.wechat.navigateBack(); } );
shouldReattachWebview 這個(gè)值為 true 的時(shí)候,表示需要重新 attach 一次 webview,這個(gè)頁(yè)面的事件現(xiàn)在已經(jīng)做完了,回到 webview 所在的頁(yè)面
apps/browser/index.js 頁(yè)面
我同樣只保留最核心的代碼,具體的邏輯,我就直接寫進(jìn)代碼里面了。
Page({ data: { shouldReattachWebview: false, // 是否需要重新 attach 一次 webview 組件 webviewReattached: false, // 是否已經(jīng) attach 過(guò)一次 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,我拿它來(lái)當(dāng)作 key // 這可以保證同一條數(shù)據(jù)只會(huì)被處理一次 const snapKey = app.checksum(data); // 只要未處理過(guò)的數(shù)據(jù),才需要再次數(shù)據(jù) if (canvasData[snapKey] !== true) { if (canvasData[snapKey] === undefined) { // 將數(shù)據(jù)從緩存進(jìn) `snap` 中 // 這也是我自己封裝的一個(gè)方法,可以將數(shù)據(jù)緩存起來(lái),并且只能被讀取一次 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,并過(guò)濾到已經(jīng)處理過(guò)的數(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); // 通過(guò)自己封裝的方法,將 url(也就是Base64字符)保存至相冊(cè) const saved = await app.saveImages(url); // 更新 canvasData 對(duì)象 canvasData[key] = true this.setData({ canvasData }) console.log('saved: ', saved); } catch (error) { app.toast(error.message); return; } } }, })
對(duì)應(yīng)的 index.wxml 文件內(nèi)容如下:
<web-view src="{{src}}" wx:if="{{src}}" bindmessage="handlePostMessage" wx:if="{{!hideWebview}}" />
流程回顧與總結(jié)
- 打開(kāi) webview 頁(yè)面,打開(kāi) h5
- h5 頁(yè)面生成 canvas 圖,并轉(zhuǎn)為 base64 字符
- 通過(guò) wx.miniProgram.postMessage 將 base64 發(fā)送給小程序
- 調(diào)用 wx.miniProgram.navigateTo 將頁(yè)面導(dǎo)向一個(gè)特殊頁(yè)面
- 在特殊頁(yè)面中,將 webview 所在頁(yè)面的 shouldReattachWebview 設(shè)置為 true
- 在特殊頁(yè)面中回退至 webview 所在頁(yè)面
- webview 所在頁(yè)面的 onShow 事件被觸發(fā)
- 在 onShow 事件檢測(cè) shouldReattachWebview 是否為 true,若為 true
- 將 hideWebview 設(shè)置為 true,引起 web-view 組件的銷毀
- handlePostMessage 被觸發(fā),解析所有的 message 之后交給 handleMessage 逐條處理
- handleMessage 發(fā)現(xiàn) action === 'saveCanvas' 的事件,拿到 data
- 根據(jù) data 計(jì)算 checksum ,以 checksum 為 key 緩存下來(lái)數(shù)據(jù),并將這個(gè) checksum 保存到 canvasData 對(duì)象中
- 此時(shí) hideWebview 被 onShow 里面 setData 的回調(diào)中的 setData 重新置為 false,web-view 重新加 attach,H5頁(yè)面重新加載
- webview 重新 attach 之后, this.handleCanvasData 被觸發(fā),
- handleCanvasData 檢測(cè)是否有需要保存的 canvas 數(shù)據(jù),如果有,保存,修改 canvasData 狀態(tài)
整個(gè)流程看舊去很繁瑣,但是寫起來(lái)其實(shí)還好,這里面最主要的是需要注意,數(shù)據(jù)去重,微信的 postMessage 里面拿到的永遠(yuǎn) 都是 H5 頁(yè)面從被打開(kāi)到關(guān)閉的所有數(shù)據(jù)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)的倒計(jì)時(shí)恢復(fù)按鈕點(diǎn)擊功能【可用于協(xié)議閱讀倒計(jì)時(shí)】
這篇文章主要介紹了JS實(shí)現(xiàn)的倒計(jì)時(shí)恢復(fù)按鈕點(diǎn)擊功能,可用于協(xié)議閱讀倒計(jì)時(shí),涉及javascript基于setInterval的時(shí)間定時(shí)觸發(fā)相關(guān)操作技巧,需要的朋友可以參考下2018-04-04intro.js 頁(yè)面引導(dǎo)簡(jiǎn)單用法 分享
這篇文章介紹了intro.js 頁(yè)面引導(dǎo)簡(jiǎn)單用法,有需要的朋友可以參考一下2013-08-08靜態(tài)的動(dòng)態(tài)續(xù)篇之來(lái)點(diǎn)XML
靜態(tài)的動(dòng)態(tài)續(xù)篇之來(lái)點(diǎn)XML...2006-08-08javascript實(shí)現(xiàn)二級(jí)級(jí)聯(lián)菜單的簡(jiǎn)單制作
這篇文章主要介紹了javascript實(shí)現(xiàn)二級(jí)級(jí)聯(lián)菜單的簡(jiǎn)單制作,感興趣的小伙伴們可以參考一下2015-11-11iscroll碰到Select無(wú)法選擇下拉刷新的解決辦法
本文主要介紹iscroll插件在使用中,遇到select下拉框無(wú)法下拉刷新的處理方法,希望能幫到大家。2016-05-05JS函數(shù)參數(shù)的傳遞與同名參數(shù)實(shí)例分析
這篇文章主要介紹了JS函數(shù)參數(shù)的傳遞與同名參數(shù),結(jié)合實(shí)例形式分析了JS函數(shù)參數(shù)的傳遞與同名參數(shù)相關(guān)原理、使用技巧與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03JS實(shí)現(xiàn)訪問(wèn)DOM對(duì)象指定節(jié)點(diǎn)的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)訪問(wèn)DOM對(duì)象指定節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)DOM元素節(jié)點(diǎn)屬性相關(guān)操作技巧,需要的朋友可以參考下2018-04-04js中AppendChild與insertBefore的用法詳細(xì)解析
這篇文章主要是對(duì)js中AppendChild與insertBefore的用法進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12layui實(shí)現(xiàn)數(shù)據(jù)表格點(diǎn)擊搜索功能
這篇文章主要為大家詳細(xì)介紹了layui實(shí)現(xiàn)數(shù)據(jù)表格點(diǎn)擊搜索功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07