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