@dolphinweex/weex-harmony 0.1.0

package/src/components/hl-textarea-base.vue

@@ -0,0 +1,40 @@
+<template>
+  <BaseSameLayer
+      :hosSameLayerArgs="hosSameLayerArgs"
+      embedType="native/textarea"
+      :defaultWidth="300"
+      :defaultHeight="120"
+  ></BaseSameLayer>
+</template>
+
+<script>
+import BaseSameLayer from "./baseSameLayer.vue";
+
+export default {
+  name: "HlTextarea",
+  components: {
+    BaseSameLayer,
+  },
+  props: {
+    hosUniqueProps: {
+      type: Object,
+      required: true,
+    },
+    placeholder: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    hosSameLayerArgs() {
+      return {
+        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
+        placeholder: this.placeholder, // 多端支持公共属性
+      };
+    },
+  },
+  methods: {
+    // 自定义拓展其它逻辑
+  },
+};
+</script>

package/src/components/hl-textarea.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <embed
+      :id="embedId"
+      type="native/textarea"
+      :width="width"
+      :height="height"
+      src=""
+    />
+  </div>
+</template>
+
+<script>
+const weexModule = weex.requireModule("weexModule");
+
+export default {
+  name: "HlTextareaTest",
+  props: {
+    placeholder: {
+      type: String,
+      required: true,
+    },
+    width: {
+      type: Number,
+      required: false,
+      default: 300,
+    },
+    height: {
+      type: Number,
+      required: false,
+      default: 120,
+    },
+    backgroundColor: {
+      type: String,
+      required: false,
+    }
+  },
+  data() {
+    return {
+      embedId: `textarea_${this._uid}`, // 使用Vue实例的唯一ID来生成embed元素的唯一ID
+      isTransferScheduled: false, // 添加一个标志来检查是否已经安排了transferPropsAndListeners的调用
+    };
+  },
+  created() {
+    console.log("[weex] hl-textarea created!");
+    this.transferPropsAndListeners(); // 组件创建时调用
+  },
+  mounted() {
+    this.addTouchEvent();
+  },
+  beforeDestroy() {
+    this.removeTouchEvent();
+  },
+  methods: {
+    transferPropsAndListeners() {
+      // 构建一个包含所需信息的对象
+      const args = {
+        componentId: this.embedId,
+        width: this.width,
+        height: this.height,
+        placeholder: this.placeholder,
+        backgroundColor: this.backgroundColor,
+        onChange: this.handleonInput,
+      };
+      // 调用JSbridge方法，传递属性和监听方法到原生组件
+      weexModule.callNative("transferSameLayerArgs", args);
+    },
+    // 必须给embed元素添加touchstart事件监听，addEventListener的第二个参数监听事件对象置空即可（同层渲染事件处理需要）
+    addTouchEvent() {
+      const embedElement = document.getElementById(this.embedId);
+      if (embedElement) {
+        console.log("[weex] hl-textarea-embed addEventListener");
+        embedElement.addEventListener('touchstart', {});
+      }
+    },
+    removeTouchEvent() {
+      const embedElement = document.getElementById(this.embedId);
+      if (embedElement) {
+        console.log("[weex] hl-textarea-embed removeEventListener");
+        embedElement.removeEventListener('touchstart', {});
+      }
+    },
+    scheduleTransfer() {
+      if (!this.isTransferScheduled) {
+        this.isTransferScheduled = true;
+        this.$nextTick(() => {
+          this.transferPropsAndListeners();
+          this.isTransferScheduled = false;
+        });
+      }
+    },
+    handleonInput(res) {
+      console.log("[weex] handleonInput ", res);
+      this.$emit("nativeOnInput", res);
+    }
+  },
+  watch: {
+    text(newText, oldText) {
+      if (newText !== oldText) {
+        this.scheduleTransfer(); // 当text属性变化时重新调用
+      }
+    },
+    width(newWidth, oldWidth) {
+      if (newWidth !== oldWidth) {
+        this.scheduleTransfer(); // 当width属性变化时重新调用
+      }
+    },
+    height(newHeight, oldHeight) {
+      if (newHeight !== oldHeight) {
+        this.scheduleTransfer(); // 当width属性变化时重新调用
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

package/src/components/hl-video-base.vue

@@ -0,0 +1,65 @@
+<template>
+  <BaseSameLayer
+    :hosSameLayerArgs="hosSameLayerArgs"
+    embedType="native/video"
+    :defaultWidth="300"
+    :defaultHeight="250"
+  ></BaseSameLayer>
+</template>
+
+<script>
+import BaseSameLayer from "./baseSameLayer.vue";
+
+export default {
+  name: "HlVideo",
+  components: {
+    BaseSameLayer,
+  },
+  props: {
+    hosUniqueProps: {
+      type: Object,
+      required: true,
+    },
+    src: {
+      type: String,
+      required: true,
+    },
+    controls: {
+      type: Boolean,
+      required: false,
+    },
+    autoPlay: {
+      type: Boolean,
+      required: false,
+    },
+    muted: {
+      type: Boolean,
+      required: false,
+    },
+    loop: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  computed: {
+    hosSameLayerArgs() {
+      // 对象中的键值和原生自定义组件支持的属性和方法保持一致
+      return {
+        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性和方法示例
+        src: this.src, // 多端支持公共属性示例
+        controls: this.controls,
+        autoPlay: this.autoPlay,
+        muted: this.muted,
+        loop: this.loop,
+        onPlay: this.handleOnPlay, // 多端支持公共监听方法示例
+      };
+    },
+  },
+  methods: {
+    handleOnPlay(res) {
+      this.$emit("onPlay", res);
+    },
+    // 自定义拓展其它逻辑
+  },
+};
+</script>

package/src/components/hl-video.vue

@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <embed
+      :id="embedId"
+      type="native/video"
+      :width="width"
+      :height="height"
+      src=""
+    />
+  </div>
+</template>
+
+<script>
+const weexModule = weex.requireModule("weexModule");
+
+export default {
+  name: "HlVideoTest",
+  props: {
+    width: {
+      type: Number,
+      required: false,
+      default: 300,
+    },
+    height: {
+      type: Number,
+      required: false,
+      default: 250,
+    },
+    src: {
+      type: String,
+      required: true,
+    },
+    controls: {
+      type: Boolean,
+      required: false,
+    },
+    autoPlay: {
+      type: Boolean,
+      required: false,
+    },
+    muted: {
+      type: Boolean,
+      required: false,
+    },
+    loop: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      embedId: `video_${this._uid}`, // 使用Vue实例的唯一ID来生成embed元素的唯一ID
+      isTransferScheduled: false, // 添加一个标志来检查是否已经安排了transferPropsAndListeners的调用
+    };
+  },
+  created() {
+    console.log("[weex] hl-video created!");
+    this.transferPropsAndListeners(); // 组件创建时调用
+  },
+  mounted() {
+    console.log("[weex] hl-video mounted!");
+    this.addTouchEvent();
+  },
+  beforeDestroy() {
+    console.log("[weex] hl-video beforeDestroy!");
+    this.removeTouchEvent();
+  },
+  methods: {
+    transferPropsAndListeners() {
+      // 构建一个包含所需信息的对象
+      const args = {
+        componentId: this.embedId,
+        width: this.width,
+        height: this.height,
+        src: this.src, // 要播放视频的资源地址
+        controls: this.controls, // 是否显示播放控件
+        muted: this.muted, // 是否静音
+        loop: this.loop,
+        autoPlay: this.autoPlay,
+        onPlay: this.handleOnPlay,
+        onPause: this.handleOnPause,
+      };
+      // 调用JSbridge方法，传递属性和监听方法到原生组件
+      weexModule.callNative("transferSameLayerArgs", args);
+    },
+    // 必须给embed元素添加touchstart事件监听，addEventListener的第二个参数监听事件对象置空即可（同层渲染事件处理需要）
+    addTouchEvent() {
+      const embedElement = document.getElementById(this.embedId);
+      if (embedElement) {
+        console.log("[weex] hl-video-embed addEventListener");
+        embedElement.addEventListener("touchstart", {});
+      }
+    },
+    removeTouchEvent() {
+      const embedElement = document.getElementById(this.embedId);
+      if (embedElement) {
+        console.log("[weex] hl-video-embed removeEventListener");
+        embedElement.removeEventListener("touchstart", {});
+      }
+    },
+    scheduleTransfer() {
+      if (!this.isTransferScheduled) {
+        this.isTransferScheduled = true;
+        this.$nextTick(() => {
+          this.transferPropsAndListeners();
+          this.isTransferScheduled = false;
+        });
+      }
+    },
+    handleOnPlay(res) {
+      this.$emit("onPlay", res);
+    },
+    handleOnPause(res) {
+      this.$emit("onPause", res);
+    },
+  },
+  watch: {
+    src(newSrc, oldSrc) {
+      if (newSrc !== oldSrc) {
+        this.scheduleTransfer(); // 当src属性变化时重新调用
+      }
+    },
+    muted(newMuted, oldMuted) {
+      if (newMuted !== oldMuted) {
+        this.scheduleTransfer(); // 当muted属性变化时重新调用
+      }
+    },
+    controls(newControls, oldControls) {
+      if (newControls !== oldControls) {
+        this.scheduleTransfer(); // 当controls属性变化时重新调用
+      }
+    },
+    width(newWidth, oldWidth) {
+      if (newWidth !== oldWidth) {
+        this.scheduleTransfer(); // 当width属性变化时重新调用
+      }
+    },
+    height(newHeight, oldHeight) {
+      if (newHeight !== oldHeight) {
+        this.scheduleTransfer(); // 当width属性变化时重新调用
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

package/src/components/hl-web-base.vue

@@ -0,0 +1,85 @@
+<template>
+    <BaseSameLayer
+        :hosSameLayerArgs="hosSameLayerArgs"
+        embedType="native/web"
+        :defaultWidth="300"
+        :defaultHeight="120"
+    ></BaseSameLayer>
+</template>
+
+<script>
+import BaseSameLayer from "./baseSameLayer.vue";
+
+export default {
+  name: "HlWeb",
+  data() {
+    return {
+      width: 0,
+      height: 0
+    }
+  },
+  components: {
+    BaseSameLayer,
+  },
+  props: {
+    hosUniqueProps: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    src: {
+      type: String,
+      required: true,
+    }
+  },
+
+  computed: {
+    hosSameLayerArgs() {
+      return {
+        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
+        src: this.src,
+        width: this.width,
+        height: this.height,
+        pagefinish: this.onPageFinish,
+        pagestart: this.onPageStart,
+        error: this.onError,
+        receivedtitle: this.onReceivedTitle
+      }
+    }
+  },
+  mounted() {
+    this.width = this.$el.clientWidth;
+    this.height = this.$el.clientHeight;
+  },
+  methods: {
+    // 自定义拓展其它逻辑
+    onPageFinish(res) {
+        console.log("[web] pagefinish ", res);
+        this.$emit("pagefinish", res);
+    },
+    onPageStart(res) {
+        console.log("[web] pagestart ", res);
+        this.$emit("pagestart", res);
+    },
+    onError(res) {
+        console.log("[web] onError ", res);
+        this.$emit("error", res);
+    },
+    onReceivedTitle(res) {
+        console.log("[web] onReceivedTitle ", res);
+        this.$emit("receivedtitle", res);
+    }
+  },
+  watch: {
+    loading(newText, oldText) {
+      if (newText !== oldText) {
+        this.scheduleTransfer(); // 当loading属性变化时重新调用
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

package/src/components/mdiea-arc-slider.vue

@@ -0,0 +1,75 @@
+<template>
+  <BaseSameLayer
+    :hosSameLayerArgs="hosSameLayerArgs"
+    embedType="native/mdiea-arc-slider"
+    :defaultWidth="300"
+    :defaultHeight="300"
+  >
+  </BaseSameLayer>
+</template>
+
+<script>
+import BaseSameLayer from "./baseSameLayer.vue";
+
+export default {
+  data() {
+    return {
+      width: 0,
+      height: 0,
+    };
+  },
+  name: "MdieaArcSlider",
+  components: {
+    BaseSameLayer,
+  },
+  props: {
+    hosUniqueProps: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    data: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    progressCounter: {
+      type: Number,
+      default: 0,
+    },
+  },
+  computed: {
+    hosSameLayerArgs() {
+      return {
+        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
+        width: this.width,
+        height: this.height,
+        data: this.data,
+        progressCounter: this.progressCounter,
+        handleOnProgress: this.handleOnProgress,
+      };
+    },
+  },
+  mounted() {
+    this.width = this.$el.clientWidth;
+    this.height = this.$el.clientHeight;
+  },
+
+  methods: {
+    // 自定义拓展其它逻辑
+    handleOnChange(res) {
+      if (res.mode == 1) {
+        //停止滑动
+        this.$emit("slideEnd", res);
+      } else {
+        this.$emit("slideChange", res);
+      }
+    },
+    handleOnProgress(res) {
+      this.$emit("onProgress", res);
+    },
+  },
+};
+</script>

package/src/components/midea-apng-view-base.vue

@@ -0,0 +1,111 @@
+<template>
+  <BaseSameLayer
+    ref="apng"
+    :hosSameLayerArgs="hosSameLayerArgs"
+    embedType="native/midea-apng-view"
+    :defaultWidth="750"
+    :defaultHeight="300"
+  ></BaseSameLayer>
+</template>
+
+<script>
+import BaseSameLayer from "./baseSameLayer.vue";
+const weexModule = weex.requireModule("weexModule");
+
+export default {
+  data() {
+    return {
+      width: 0,
+      height: 0
+    }
+  },
+  name: "MideaApngView",
+  components: {
+    BaseSameLayer,
+  },
+  props: {
+    hosUniqueProps: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    src: {
+      type: String,
+      require: true,
+    },
+    loop: {
+      type: Boolean,
+      require: false,
+      default: false,
+    },
+    auto: {
+      type: Boolean,
+      require: false,
+      default: true,
+    },
+  },
+  computed: {
+    hosSameLayerArgs() {
+      return {
+        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
+        width: this.width,
+        height: this.height,
+        src: this.src,
+        loop: this.loop,
+        auto: this.auto,
+      };
+    },
+  },
+  mounted() {
+    this.width = this.$el.clientWidth;
+    this.height = this.$el.clientHeight;
+  },
+
+  methods: {
+    // 自定义拓展其它逻辑
+    play(params, callback, callbackFail) {
+      weexModule.callNative('apngHandle', {
+        method: 'play',
+        name: this.$refs.apng.embedId,
+        params,
+      }, undefined, callback, callbackFail)
+    },
+    stop(params, callback, callbackFail) {
+      weexModule.callNative('apngHandle', {
+        method: 'stop',
+        name: this.$refs.apng.embedId,
+        params,
+      }, undefined, callback, callbackFail)
+    },
+    resume(params, callback, callbackFail) {
+      weexModule.callNative('apngHandle', {
+        method: 'resume',
+        name: this.$refs.apng.embedId,
+        params,
+      }, undefined, callback, callbackFail)
+    },
+    pause(params, callback, callbackFail) {
+      weexModule.callNative('apngHandle', {
+        method: 'pause',
+        name: this.$refs.apng.embedId,
+        params,
+      }, undefined, callback, callbackFail)
+    },
+    goTo(params, callback, callbackFail) {
+      weexModule.callNative('apngHandle', {
+        method: 'goTo',
+        name: this.$refs.apng.embedId,
+        params,
+      }, undefined, callback, callbackFail)
+    },
+    run(params, callback, callbackFail) {
+      weexModule.callNative('apngHandle', {
+        method: 'run',
+        name: this.$refs.apng.embedId,
+        params,
+      }, undefined, callback, callbackFail)
+    },
+  },
+};
+</script>

package/src/components/midea-barchart-view.vue

@@ -0,0 +1,56 @@
+<template>
+  <BaseSameLayer
+    :hosSameLayerArgs="hosSameLayerArgs"
+    embedType="native/midea-barchart-view"
+    :defaultWidth="300"
+    :defaultHeight="300"
+  ></BaseSameLayer>
+</template>
+
+<script>
+import BaseSameLayer from "./baseSameLayer.vue";
+
+export default {
+  name: "MideaBarchartView",
+  data() {
+    return {
+      width: 0,
+      height: 0
+    }
+  },
+  components: {
+    BaseSameLayer,
+  },
+  props: {
+    hosUniqueProps: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    data: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  computed: {
+    hosSameLayerArgs() {
+      return {
+        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
+        width: this.width,
+        height: this.height,
+        data: this.data,
+      };
+    },
+  },
+  mounted() {
+    this.width = this.$el.clientWidth;
+    this.height = this.$el.clientHeight;
+  },
+
+  methods: {
+  },
+};
+</script>