liveShop/pages/set/cropper.vue

<template>
  <view class="container">
    <web-view
      :webview-styles="webviewStyles"
      @message="handleMessage"
      :src="webviewSrc"
    >
    </web-view>
  </view>
</template>

<script>

export default {
  name: "buuug7-img-cropper",
  data() {
    return {
      webviewStyles: {},
      platform: "",
      webviewSrc:
        "https://zhibo.liuniu946.com/index/hybrid/html/cropper/index.html",
    };
  },

  mounted() {
    const { platform } = uni.getSystemInfoSync();
    this.platform = platform;
    console.log(platform,'获取系统对象');

    if (platform === "windows" || platform === "mac") {
      this.handleH5Message();
    }
	// #ifdef H5
	window.addEventListener("message", this.handleMessage, false);
	// #endif
  },

  methods: {
    handleMessage(event) {
	  console.log('消息传输',event);
	  // uni.navigateBack({
	  // 	delta: 1,
	  // });
      const platform = this.platform;
	  // #ifdef H5
	  if(!event.data.data.type){
		 return; 
	  }
      const data = event.data.data;
	  // #endif
	  // #ifndef H5
	  const data = event.detail.data[0];
	  // #endif
	  console.log(platform,"myself")
      if (platform === "android" || platform === "ios" || platform === 'devtools') {
        const eventChannel = this.getOpenerEventChannel();
        eventChannel.emit("imgCropped", { data: data.dataUrl });
      }
    },
    handleH5Message(e) {
      console.log(`H5Message`);
      window.addEventListener("message", (event) => {
        const data = event.data.data;
        if (data && data.type === "croppedData") {
          const eventChannel = this.getOpenerEventChannel();
          eventChannel.emit("imgCropped", { data: data.dataUrl });
        }
      });
    },
  },
};
</script>

<style></style>