@dolphinweex/weex-harmony 0.1.65 → 0.1.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dolphinweex/weex-harmony",
-  "version": "0.1.65",
+  "version": "0.1.67",
   "description": "weex harmony adapter",
   "main": "index.js",
   "files": [

package/src/components/midea-common-weex-view.vue

@@ -1,24 +1,14 @@
 <template>
   <div>
-    <div
-      style="position: relative"
+    <!-- <text v-if="progressText.length > 0">{{progressText}}</text> -->
+    <iframe
+      :id="embedId"
       v-if="url.length > 0 && pluginType != 'old-h5'"
-      ref="iframeWrapper"
-      @touchstart="handleWrapperTouchStart"
-      @touchmove="handleWrapperTouchMove"
-      @touchend="handleWrapperTouchEnd"
-    >
-      <iframe
-        :id="embedId"
-        :src="url"
-        :style="{
-          backgroundColor: backgroundColor,
-          height: height,
-        }"
-        ref="iframe"
-        @load="onPageFinish"
-      ></iframe>
-    </div>
+      :src="url"
+      :style="{ backgroundColor: backgroundColor, height: height }"
+      ref="iframe"
+      @load="onPageFinish"
+    ></iframe>
 
     <BaseSameLayer
       class="common-view-iframe"
@@ -47,9 +37,7 @@ export default {
       embedId: `embedId_iframe_${
         Date.now().toString(36) + Math.random().toString(36).substring(2)
       }`,
-      height: '100%',
-      _wrapperTouchParams: null, // wrapper触摸参数
-      _parentScroller: null, // 父级scroller元素引用
+      height: "100%",
     };
   },
   components: {
@@ -134,8 +122,11 @@ export default {
       return null;
     };
     this._wrapperEl = findWrapperFromParent(); // 保存容器引用
+    // 优化手势处理性能
+    this._rafId = null;
+    this._pendingGesture = null;
     this._onMessage = (event) => {
-      if (event.data.type === 'IFRAME_CONTENT_HEIGHT') {
+      if(event.data.type==='IFRAME_CONTENT_HEIGHT'){
         const h = Number(event.data.height) || 0;
         if (!h) {
           return;
@@ -148,106 +139,96 @@ export default {
       }else{
         document.getElementsByTagName('iframe')[0].height = event.data.height
       }
+      // 处理iframe手势跨窗口传递冒泡
+      if (event.data.type === 'IFRAME_GESTURE') {
+        const gestureData = event.data;
+        
+        // touchmove 使用RAF节流，其他事件立即处理
+        if (gestureData.eventType === 'touchmove') {
+          this._pendingGesture = gestureData;
+          if (!this._rafId) {
+            this._rafId = requestAnimationFrame(() => {
+              if (this._pendingGesture) {
+                this.handleGestureBubble(this._pendingGesture);
+                this._pendingGesture = null;
+              }
+              this._rafId = null;
+            });
+          }
+        } else {
+          this.handleGestureBubble(gestureData);
+        }
+      }
     };
     window.addEventListener("message", this._onMessage, false);
   },
   methods: {
     onPageFinish() {
-      if (this.$refs['iframe']) {
-        this.$refs['iframe'].contentWindow.$midea_harmony_native =
+      if (this.$refs["iframe"]) {
+        this.$refs["iframe"].contentWindow.$midea_harmony_native =
           window.$midea_harmony_native;
-        this.$refs['iframe'].contentWindow.isIframe = true;
-        this.$refs['iframe'].contentWindow.postMessage(
+        this.$refs["iframe"].contentWindow.isIframe = true;
+        this.$refs["iframe"].contentWindow.postMessage(
           JSON.stringify(window.$midea_harmony_native),
-          '*'
+          "*"
         );
       }
     },
+    handleGestureBubble(gestureData) {
+      const iframeEl = this.$refs.iframe;
+      if (!iframeEl) return;
 
-    handleWrapperTouchStart(e) {
-      // iframe会接收到事件并处理自己的滚动
-      // 找到父级scroller（轮播图容器）或者气他?
-      this._findParentScroller();
-      // 如果找到了父级scroller，手动触发它的touchstart处理QxQ
-      if (this._parentScroller) {
-        this._forwardEventToParent(e, 'touchstart');
-      }
-      const touch = e.touches[0];
-      this._wrapperTouchParams = {
-        startX: touch.pageX,
-        startY: touch.pageY,
-      };
-    },
-
-    handleWrapperTouchMove(e) {
-      if (!this._wrapperTouchParams) return;
-      // iframe正在处理自己的滚动（不阻止）同时转发事件给父级scroller
-      if (this._parentScroller) {
-        this._forwardEventToParent(e, 'touchmove');
-      }
-      const touch = e.touches[0];
-      const offsetX = touch.pageX - this._wrapperTouchParams.startX;
-      const offsetY = touch.pageY - this._wrapperTouchParams.startY;
-      const absX = Math.abs(offsetX);
-      const absY = Math.abs(offsetY);
-
-      if (absX > absY && absX > 10) {
-        console.log('📱 横向滑动：iframe内滚动 + 父级轮播图同时响应');
-      } else if (absY > absX && absY > 10) {
-        console.log('📜 纵向滑动：iframe内容滚动');
-      }
-    },
-
-    handleWrapperTouchEnd(e) {
-      // 转发touchend事件给父级
-      if (this._parentScroller) {
-        this._forwardEventToParent(e, 'touchend');
-      }
-      this._wrapperTouchParams = null;
-    },
-
-    // 查找父级scroller元素
-    _findParentScroller() {
-      if (this._parentScroller) return; 
-      let parent = this.$parent;
-      while (parent) {
-        const el = parent.$el;
-        if (
-          el &&
-          el.classList &&
-          (el.classList.contains('weex-scroller') ||
-            el.classList.contains('weex-slider') ||
-            el.classList.contains('weex-list'))
-        ) {
-          this._parentScroller = el;
-          console.log('✅ 找到父级scroller，将转发事件');
-          return;
-        }
-        parent = parent.$parent;
-      }
-      console.warn('⚠️ 未找到父级scroller');
-    },
+      const rect = iframeEl.getBoundingClientRect();
+      const offsetX = rect.left;
+      const offsetY = rect.top;
+      const pageOffsetX = offsetX + window.pageXOffset;
+      const pageOffsetY = offsetY + window.pageYOffset;
+      
+      // 创建Touch对象并转换坐标
+      const createTouches = (touchesData) => touchesData.map(t => new Touch({
+        identifier: t.identifier,
+        target: iframeEl,
+        clientX: t.clientX + offsetX,
+        clientY: t.clientY + offsetY,
+        screenX: t.screenX,
+        screenY: t.screenY,
+        pageX: t.pageX + pageOffsetX,
+        pageY: t.pageY + pageOffsetY,
+        radiusX: t.radiusX || 0,
+        radiusY: t.radiusY || 0,
+        rotationAngle: t.rotationAngle || 0,
+        force: t.force || 0
+      }));
 
-    // 手动转发事件到父级scroller
-    _forwardEventToParent(originalEvent, eventType) {
-      if (!this._parentScroller) return;
       try {
-        const newEvent = new TouchEvent(eventType, {
+        iframeEl.dispatchEvent(new TouchEvent(gestureData.eventType, {
           bubbles: true,
           cancelable: true,
-          touches: originalEvent.touches,
-          targetTouches: originalEvent.targetTouches,
-          changedTouches: originalEvent.changedTouches,
-          view: window,
-        });
-
-        // 直接触发到父级scroller元素
-        this._parentScroller.dispatchEvent(newEvent);
-      } catch (err) {
-        console.warn('无法转发触摸事件', err);
+          composed: true,
+          touches: createTouches(gestureData.touches),
+          targetTouches: createTouches(gestureData.targetTouches),
+          changedTouches: createTouches(gestureData.changedTouches),
+          ctrlKey: gestureData.ctrlKey,
+          shiftKey: gestureData.shiftKey,
+          altKey: gestureData.altKey,
+          metaKey: gestureData.metaKey
+        }));
+      } catch (e) {
+        console.warn('手势事件冒泡失败:', e);
       }
     },
   },
+  beforeDestroy() {
+    // 清理RAF避免内存泄漏
+    if (this._rafId) {
+      cancelAnimationFrame(this._rafId);
+      this._rafId = null;
+    }
+    // 清理消息监听
+    if (this._onMessage) {
+      window.removeEventListener("message", this._onMessage, false);
+    }
+  },
 };
 </script>