@dolphinweex/weex-harmony 0.1.0

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

@@ -0,0 +1,151 @@
+<template>
+  <BaseSameLayer
+    ref="base"
+    :hosSameLayerArgs="hosSameLayerArgs"
+    embedType="native/lottie"
+    :defaultWidth="300"
+    :defaultHeight="120"
+  ></BaseSameLayer>
+</template>
+
+<script>
+import BaseSameLayer from "./baseSameLayer.vue";
+const weexModule = weex.requireModule("weexModule");
+
+export default {
+  name: "HlLottie",
+  components: {
+    BaseSameLayer,
+  },
+  props: {
+    hosUniqueProps: {
+      type: Object,
+      required: true,
+    },
+    sourceJson: {
+      type: String,
+      required: false,
+    },
+    sourceUrl: {
+      type: String,
+      required: false,
+    },
+    loop: {
+      type: [Boolean, Number],
+       required: false,
+    },
+    speed: {
+      type: Number,
+      required: false,
+    },
+    autoplay: {
+      type: Boolean,
+       required: false,
+    },
+  },
+
+  computed: {
+    hosSameLayerArgs() {
+      return {
+        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
+        sourceJson: this.sourceJson,
+        sourceUrl: this.sourceUrl,
+        loop: this.loop,
+        speed: this.speed,
+        autoplay: this.autoplay,
+        onEnterFrame: this.handleEnterFrame,
+        onCreateFinish: this.handleCreateFinish,
+        onLoopComplete: this.handleLoopComplete,
+        onComplete: this.handleComplete,
+      };
+    },
+  },
+
+  methods: {
+    play(callback) {
+      weexModule.callNative('lottieHandle', {
+        method: 'play',
+        name: this.$refs.base.embedId,
+      }, callback)
+    },
+
+    pause() {
+      weexModule.callNative('lottieHandle', {
+        method: 'pause',
+        name: this.$refs.base.embedId,
+      })
+    },
+
+    stop() {
+      weexModule.callNative('lottieHandle', {
+        method: 'stop',
+        name: this.$refs.base.embedId,
+      })
+    },
+
+    togglePause() {
+      weexModule.callNative('lottieHandle', {
+        method: 'togglePause',
+        name: this.$refs.base.embedId,
+      })
+    },
+
+    setSpeed(speed) {
+      weexModule.callNative('lottieHandle', {
+        method: 'setSpeed',
+        name: this.$refs.base.embedId,
+        speed,
+      })
+    },
+
+    setDirection(dir) {
+      weexModule.callNative('lottieHandle', {
+        method: 'setDirection',
+        name: this.$refs.base.embedId,
+        dir,
+      })
+    },
+
+    playFromProgress(from, to, callback) {
+      weexModule.callNative('lottieHandle', {
+        method: 'playFromProgress',
+        name: this.$refs.base.embedId,
+        from, to,
+      }, callback)
+    },
+
+    isAnimationPlaying(callback) {
+      weexModule.callNative('lottieHandle', {
+        method: 'isAnimationPlaying',
+        name: this.$refs.base.embedId,
+      }, callback)
+    },
+  
+    handleCreateFinish() {
+      this.$emit("createFinish");
+    },
+
+    handleEnterFrame() {
+      this.$emit("onEnterFrame");
+    },
+
+    handleLoopComplete() {
+      this.$emit("onLoopComplete");
+    },
+
+    handleComplete() {
+      this.$emit("onComplete");
+    },
+  },
+  watch: {
+    speed(newSpeed, oldSpeed) {
+      if (newSpeed !== oldSpeed) {
+        this.setSpeed(newSpeed);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

package/src/components/hl-lottie.vue

@@ -0,0 +1,214 @@
+<template>
+  <div>
+    <embed
+      :id="embedId"
+      type="native/lottie"
+      :width="width"
+      :height="height"
+    />
+  </div>
+</template>
+
+<script>
+const weexModule = weex.requireModule('weexModule');
+
+export default {
+  name: "HlLottieTest",
+  props: {
+    width: {
+      type: [Number, String],
+      required: true,
+    },
+    height: {
+      type: [Number, String],
+      required: true,
+    },
+    sourceJson: {
+      type: String,
+      required: false,
+    },
+    sourceUrl: {
+      type: String,
+      required: false,
+    },
+    loop: {
+      type: [Boolean, Number],
+       required: false,
+    },
+    speed: {
+      type: Number,
+      required: false,
+    },
+    autoplay: {
+      type: Boolean,
+       required: false,
+    },
+  },
+
+  data() {
+    return {
+      embedId: `lottie_${this._uid}`,
+      isTransferScheduled: false,
+    };
+  },
+  created() {
+    this.transferPropsAndListeners(); 
+  },
+  mounted() {
+    this.addTouchEvent();
+  },
+  beforeDestroy() {
+    this.removeTouchEvent();
+  },
+  methods: {
+    play(callback) {
+      weexModule.callNative('lottieHandle', {
+        method: 'play',
+        name: this.embedId,
+      }, callback)
+    },
+
+    pause() {
+      weexModule.callNative('lottieHandle', {
+        method: 'pause',
+        name: this.embedId,
+      })
+    },
+
+    stop() {
+      weexModule.callNative('lottieHandle', {
+        method: 'stop',
+        name: this.embedId,
+      })
+    },
+
+    togglePause() {
+      weexModule.callNative('lottieHandle', {
+        method: 'togglePause',
+        name: this.embedId,
+      })
+    },
+
+    setSpeed(speed) {
+      weexModule.callNative('lottieHandle', {
+        method: 'setSpeed',
+        name: this.embedId,
+        speed,
+      })
+    },
+
+    setDirection(dir) {
+      weexModule.callNative('lottieHandle', {
+        method: 'setDirection',
+        name: this.embedId,
+        dir,
+      })
+    },
+
+    playFromProgress(from, to, callback) {
+      weexModule.callNative('lottieHandle', {
+        method: 'playFromProgress',
+        name: this.embedId,
+        from, to,
+      }, callback)
+    },
+
+    isAnimationPlaying(callback) {
+      weexModule.callNative('lottieHandle', {
+        method: 'isAnimationPlaying',
+        name: this.embedId,
+      }, callback)
+    },
+  
+    handleCreateFinish() {
+      this.$emit("createFinish");
+    },
+
+    handleEnterFrame() {
+      this.$emit("onEnterFrame");
+    },
+
+    handleLoopComplete() {
+      this.$emit("onLoopComplete");
+    },
+
+    handleComplete() {
+      this.$emit("onComplete");
+    },
+
+    transferPropsAndListeners() {
+      // 构建一个包含所需信息的对象
+      const args = {
+        componentId: this.embedId,
+        width: this.width,
+        height: this.height,
+        sourceJson: this.sourceJson,
+        sourceUrl: this.sourceUrl,
+        loop: this.loop,
+        speed: this.speed,
+        autoplay: this.autoplay,
+        onEnterFrame: this.handleEnterFrame,
+        onCreateFinish: this.handleCreateFinish,
+        onLoopComplete: this.handleLoopComplete,
+        onComplete: this.handleComplete,
+      };
+      // 调用JSbridge方法，传递属性和监听方法到原生组件
+      weexModule.callNative('transferSameLayerArgs', args)
+    },
+    addTouchEvent() {
+      const embedElement = document.getElementById(this.embedId);
+      if (embedElement) {
+        console.log("[weex] hl-lottie-embed addEventListener");
+        embedElement.addEventListener('touchstart', {});
+      }
+    },
+    removeTouchEvent() {
+      const embedElement = document.getElementById(this.embedId);
+      if (embedElement) {
+        console.log("[weex] hl-lottie-embed removeEventListener");
+        embedElement.removeEventListener('touchstart', {});
+      }
+    },
+    scheduleTransfer() {
+      if (!this.isTransferScheduled) {
+        this.isTransferScheduled = true;
+        this.$nextTick(() => {
+          this.transferPropsAndListeners();
+          this.isTransferScheduled = false;
+        });
+      }
+    },
+  },
+  watch: {
+    width(newWidth, oldWidth) {
+      if (newWidth !== oldWidth) {
+        this.scheduleTransfer();
+      }
+    },
+    height(newHeight, oldHeight) {
+      if (newHeight !== oldHeight) {
+        this.scheduleTransfer();
+      }
+    },
+    speed(newSpeed, oldSpeed) {
+      if (newSpeed !== oldSpeed) {
+        this.scheduleTransfer();
+        this.setSpeed(newSpeed)
+      }
+    },
+    loop(newLoop, oldLoop) {
+      if (newLoop !== oldLoop) {
+        this.scheduleTransfer();
+      }
+    },
+    autoplay(newAutoplay, oldAutoplay) {
+      if (newAutoplay !== oldAutoplay) {
+        this.scheduleTransfer();
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

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

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

package/src/components/hl-richtext.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <embed
+      :id="embedId"
+      type="native/richtext"
+      :width="width"
+      :height="height"
+      src=""
+    />
+  </div>
+</template>
+
+<script>
+const weexModule = weex.requireModule("weexModule");
+
+export default {
+  name: "HlRichtextTest",
+  props: {
+    text: {
+      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: `richtext_${this._uid}`, // 使用Vue实例的唯一ID来生成embed元素的唯一ID
+      isTransferScheduled: false, // 添加一个标志来检查是否已经安排了transferPropsAndListeners的调用
+    };
+  },
+  created() {
+    console.log("[weex] hl-richtext created!");
+    this.transferPropsAndListeners(); // 组件创建时调用
+  },
+  mounted() {
+    this.addTouchEvent();
+  },
+  beforeDestroy() {
+    this.removeTouchEvent();
+  },
+  methods: {
+    transferPropsAndListeners() {
+      // 构建一个包含所需信息的对象
+      const args = {
+        componentId: this.embedId,
+        width: this.width,
+        height: this.height,
+        text: this.text,
+        backgroundColor: this.backgroundColor,
+        onClick: this.handleOnClick,
+      };
+      // 调用JSbridge方法，传递属性和监听方法到原生组件
+      weexModule.callNative("transferSameLayerArgs", args);
+    },
+    // 必须给embed元素添加touchstart事件监听，addEventListener的第二个参数监听事件对象置空即可（同层渲染事件处理需要）
+    addTouchEvent() {
+      const embedElement = document.getElementById(this.embedId);
+      if (embedElement) {
+        console.log("[weex] hl-richtext-embed addEventListener");
+        embedElement.addEventListener("touchstart", {});
+      }
+    },
+    removeTouchEvent() {
+      const embedElement = document.getElementById(this.embedId);
+      if (embedElement) {
+        console.log("[weex] hl-richtext-embed removeEventListener");
+        embedElement.removeEventListener("touchstart", {});
+      }
+    },
+    scheduleTransfer() {
+      if (!this.isTransferScheduled) {
+        this.isTransferScheduled = true;
+        this.$nextTick(() => {
+          this.transferPropsAndListeners();
+          this.isTransferScheduled = false;
+        });
+      }
+    },
+    handleOnClick(res) {
+      console.log("[weex] handleOnClick ", res);
+      this.$emit("nativeOnClick", 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-slider-base.vue

@@ -0,0 +1,75 @@
+<template>
+  <BaseSameLayer
+      :hosSameLayerArgs="hosSameLayerArgs"
+      embedType="native/slider"
+      :defaultWidth="300"
+      :defaultHeight="120"
+  ></BaseSameLayer>
+</template>
+
+
+<script>
+import BaseSameLayer from "./baseSameLayer.vue";
+
+export default {
+  name: "HlSlider",
+  components: {
+    BaseSameLayer,
+  },
+  props: {
+    hosUniqueProps:{
+      type: Object,
+      required: true,
+    },
+    value: {
+      type: Number,
+      required: true,
+    },
+    min: {
+      type: Number,
+      require: true,
+    },
+    max:{
+      type: Number,
+      required: true,
+    },
+    step: {
+      type: Number,
+      required: true,
+    },
+  },
+
+  computed: {
+    hosSameLayerArgs() {
+      return {
+        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
+        value: this.value,
+        min: this.min,
+        max: this.max,
+        step: this.step,
+        handleOnChange: this.handleOnChange,
+      }
+    }
+  },
+  created() {
+    console.log("[web] hl-slider created!");
+  },
+  methods: {
+    // 自定义拓展其它逻辑
+    handleOnChange(res) {
+      console.log("[web] handleOnChange ", res);
+      this.$emit("onChange", res);
+    },
+  },
+  watch: {
+    step(newStep, oldStep) {
+      if (newStep !== oldStep) {
+        this.scheduleTransfer(); // 当step属性变化时重新调用
+      }
+    }
+  },
+};
+</script>
+
+<style scoped>
+</style>

package/src/components/hl-slider.vue

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <embed
+        :id="embedId"
+        type="native/slider"
+        :width="width"
+        :height="height"
+    />
+  </div>
+</template>
+
+<script>
+const weexModule = weex.requireModule("weexModule");
+
+export default {
+  name: "HlSlider",
+  props: {
+    width: {
+      type: Number,
+      required: false,
+      default: 300,
+    },
+    height: {
+      type: Number,
+      required: false,
+      default: 120,
+    },
+    value: {
+      type: Number,
+      required: 1
+    },
+    min: {
+      type: Number,
+      require: 0
+    },
+    max:{
+      type: Number,
+      required: 100,
+    },
+    step: {
+      type: Number,
+      required: 1,
+    },
+  },
+  data() {
+    return {
+      embedId: `slider_${this._uid}`, // 使用Vue实例的唯一ID来生成embed元素的唯一ID
+      isTransferScheduled: false, // 添加一个标志来检查是否已经安排了transferPropsAndListeners的调用
+    };
+  },
+  destroyed() {
+    // TO-DO embed监听移除实现
+  },
+  created() {
+    console.log("[weex] hl-slider created!");
+    this.transferPropsAndListeners(); // 组件创建时调用
+  },
+  methods: {
+    transferPropsAndListeners() {
+      console.log("[weex] transferPropsAndListeners ", this.onChange);
+      // 构建一个包含所需信息的对象
+      const args = {
+        componentId: this.embedId,
+        width: this.width,
+        height: this.height,
+        value: this.value,
+        min:this.min,
+        max:this.max,
+        step:this.step,
+        onChange: this.handleonChange,
+      };
+      // 调用JSbridge方法，传递属性和监听方法到原生组件
+      native.transferSameLayerArgs(args);
+    },
+    scheduleTransfer() {
+      if (!this.isTransferScheduled) {
+        this.isTransferScheduled = true;
+        this.$nextTick(() => {
+          this.transferPropsAndListeners();
+          this.isTransferScheduled = false;
+        });
+      }
+    },
+    handleonChange(res) {
+      console.log("[weex] handleonChange ", res);
+      this.$emit("onChange", res);
+    },
+  },
+  watch: {
+    value(oldValue, newValue) {
+      if (newValue !== oldValue) {
+        this.scheduleTransfer(); // 当value属性变化时重新调用
+      }
+    },
+    min(newText, oldText) {
+      if (newText !== oldText) {
+        this.scheduleTransfer(); // 当min属性变化时重新调用
+      }
+    },
+    max(newText, oldText) {
+      if (newText !== oldText) {
+        this.scheduleTransfer(); // 当max属性变化时重新调用
+      }
+    },
+    width(newWidth, oldWidth) {
+      if (newWidth !== oldWidth) {
+        this.scheduleTransfer(); // 当width属性变化时重新调用
+      }
+    },
+    height(newHeight, oldHeight) {
+      if (newHeight !== oldHeight) {
+        this.scheduleTransfer(); // 当height属性变化时重新调用
+      }
+    },
+    step(newStep, oldStep) {
+      if (newStep !== oldStep) {
+        this.scheduleTransfer(); // 当step属性变化时重新调用
+      }
+    }
+
+  },
+};
+</script>
+
+<style scoped>
+</style>