微信小程序webview与h5通过postMessage实现实时通讯的实现

wx.miniProgram.navigateBack()

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);
  }
 },
});

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],
   });
  }
 },
})

wx.miniProgram.postMessage({
 data: JSON.stringify({
  action: 'postData',
  data: 'BASE 64 IMAGE STRING'
 })
});

wx.miniProgram.navigateBack()

wx.miniProgram.postMessage({
 data: JSON.stringify({
  action: 'postData',
  data: 'BASE 64 IMAGE STRING'
 })
});

wx.miniProgram.navigateTo('/apps/browser/placeholder');

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();

const webviewPage = pages[pages.length - 2];

  webviewPage.setData(
   {
    shouldReattachWebview: true
   },
   () => {
    app.wechat.navigateBack();
   }
  );

Page({
 data: {
  shouldReattachWebview: false, // 是否需要重新 attach 一次 webview 组件
  webviewReattached: false,   // 是否已经 attach 过一次 webview 了
  hideWebview: false      // 是否隐藏 webview 组件
 },
 onShow() {
  // 如果 webview 需要重新 attach 
  if (this.data.shouldReattachWebview) {
   this.setData(
    {
     // 隐藏 webview
     hideWebview: true,
    },
    () => {
     this.setData(
      {
       // 隐藏之后立马显示它，此时完成一次 webview 的销毁，拿到了 postMessage 中的数据
       hideWebview: false,
       webviewReattached: true,
      },
      () => {
       // 拿到数据之后，处理 canvasData
       this.handleCanvasData();
      }
     );
    }
   );
  }
 },
 // 当 webview 被销毁时，该方法被触发
 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') {
   // 将数据先缓存进 Snap 中
   const { canvasData } = this.data;
   // app.checksum 是我自己封装的方法，计算任何数据的 checksum，我拿它来当作 key
   // 这可以保证同一条数据只会被处理一次
   const snapKey = app.checksum(data);
   // 只要未处理过的数据，才需要再次数据
   if (canvasData[snapKey] !== true) {
    if (canvasData[snapKey] === undefined) {
     // 将数据从缓存进 `snap` 中
     // 这也是我自己封装的一个方法，可以将数据缓存起来，并且只能被读取一次
     app.snap(snapKey, data);
     // 设置 canvasData 中 snapKey 字段为 `false`
     canvasData[snapKey] = false;
     this.setData({
      canvasData,
     });
    }
   }
  }
 },
 // 当 webview 被重新 attach 之后，canvas 数据已经被保存进 snap 中了，
 handleCanvasData: async function handleCanvasData() {
  const { canvasData } = this.data;
  // 从 canvasData 中拿到所有的 key，并过滤到已经处理过的数据
  const keys = Object.keys(canvasData).filter(key => canvasData[key] === false);

  if (keys.length === 0) {
   return;
  }

  for (let i = 0; i