@dolphinweex/weex-harmony 0.1.0

package/README.md

@@ -0,0 +1,13 @@
+# weex-harmony
+
+这个是鸿蒙loader包及同层渲染组件封装库
+
+## 同层渲染组件
+封装在components内，并在transform-loader.js进行描述，注意命名规则
+
+在打包配置中添加
+’‘’
+{
+    loader: '@ohos/weex-harmony',
+}
+‘’‘

package/index.js

@@ -0,0 +1,2 @@
+
+module.exports = require('./src/transform-loader.js')

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@dolphinweex/weex-harmony",
+  "version": "0.1.0",
+  "description": "weex harmony adapter",
+  "main": "index.js",
+  "files": [
+    "index.js",
+    "src/"
+  ],
+  "scripts": {},
+  "dependencies": {
+    "fs-extra": "10.0.1",
+    "istanbul-lib-coverage": "3.2.0",
+    "istanbul-lib-report": "3.0.0",
+    "istanbul-reports": "3.1.5",
+    "nyc": "15.1.0",
+    "source-map": "0.7.4",
+    "css-loader": "^0.28.8",
+    "vue-loader": "^15.2.6",
+    "vue-style-loader": "^4.1.1",
+    "vue-template-compiler": "^2.6.11",
+    "himalaya": "^1.1.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^10.0.2",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-component": "^1.1.1",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-stage-0": "^6.24.1",
+    "@dolphinweex/weex-harmony-transform": "0.1.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "keyword": [],
+  "devDependencies": {}
+}

package/src/components/baseSameLayer.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <embed
+      :id="embedId"
+      :type="embedType"
+      :width="embedWidth"
+      :height="embedHeight"
+    />
+  </div>
+</template>
+
+<script>
+const weexModule = weex.requireModule("weexModule");
+
+export default {
+  name: "BaseSameLayer",
+  props: {
+    hosSameLayerArgs: {
+      type: Object,
+      required: true
+    },
+    embedType: {
+      type: String,
+      required: true,
+    },
+    defaultWidth: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    defaultHeight: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      embedId: `embed_${this._uid}`, // 使用Vue实例的唯一ID来生成embed元素的唯一ID
+    };
+  },
+  computed: {
+    embedWidth() {
+      // 如果hosSameLayerArgs.width存在且定义了，则使用该值，否则使用defaultWidth
+      return this.hosSameLayerArgs.width || this.defaultWidth;
+    },
+    embedHeight() {
+      // 如果hosSameLayerArgs.height存在且定义了，则使用该值，否则使用defaultHeight
+      return this.hosSameLayerArgs.height || this.defaultHeight;
+    },
+  },
+  created() {
+    console.log("[sameLayerRendering] web component created.");
+    weexModule.callNative("transferSameLayerArgs", {
+      componentId: this.embedId,
+      ...this.hosSameLayerArgs,
+    });
+  },
+  mounted() {
+    console.log("[sameLayerRendering] web component mounted.");
+    this.addTouchEvent();
+  },
+  beforeDestroy() {
+    console.log("[sameLayerRendering] web component beforeDestroy.");
+    this.removeTouchEvent();
+  },
+  methods: {
+    // 必须给embed元素添加touchstart事件监听，addEventListener的第二个参数监听事件对象置空即可（同层渲染事件处理需要）
+    addTouchEvent() {
+      const embedElement = document.getElementById(this.embedId);
+      if (embedElement) {
+        console.log(
+          "[sameLayerRendering] web component embed addEventListener."
+        );
+        embedElement.addEventListener("touchstart", {});
+      }
+    },
+    removeTouchEvent() {
+      const embedElement = document.getElementById(this.embedId);
+      if (embedElement) {
+        console.log(
+          "[sameLayerRendering] web component embed removeEventListener."
+        );
+        embedElement.removeEventListener("touchstart", {});
+      }
+    },
+  },
+  watch: {
+    hosSameLayerArgs: {
+      deep: true,
+      handler: function (newVal, oldVal) {
+        console.log("[sameLayerRendering] web component update.");
+        weexModule.callNative("transferSameLayerArgs", {
+          componentId: this.embedId,
+          ...newVal,
+        });
+      },
+    },
+  },
+};
+</script>

package/src/components/drag-vertical-list-view.vue

@@ -0,0 +1,86 @@
+<template>
+  <BaseSameLayer
+    :hosSameLayerArgs="hosSameLayerArgs"
+    embedType="native/drag-vertical-list-view"
+    :defaultWidth="300"
+    :defaultHeight="500"
+  ></BaseSameLayer>
+</template>
+  
+  <script>
+import BaseSameLayer from "./baseSameLayer.vue";
+
+export default {
+  data() {
+    return {
+      width: 0,
+      height: 0,
+    };
+  },
+  name: "DragVerticalListView",
+  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,
+        handleOnClick: this.handleOnClick,
+        handleOnDelete: this.handleOnDelete,
+        handleOnDragEnd: this.handleOnDragEnd,
+        handleOnCheck: this.handleOnCheck,
+        handleOnLongPress: this.handleOnLongPress,
+        handleOnSwitchCheck: this.handleOnSwitchCheck,
+        handleOnSwipeItemClick: this.handleOnSwipeItemClick
+      };
+    },
+  },
+  mounted() {
+    this.width = this.$el.clientWidth;
+    this.height = this.$el.clientHeight;
+  },
+
+  methods: {
+    // 自定义拓展其它逻辑
+    handleOnClick(res) {
+      this.$emit("onClickEvent", res);
+    },
+    handleOnDelete(res) {
+      this.$emit("onDeleteEvent", res);
+    },
+    handleOnDragEnd(res) {
+      this.$emit("onDragEndEvent", res);
+    },
+    handleOnCheck(res) {
+      this.$emit("onCheckEvent", res);
+    },
+    handleOnLongPress(res) {
+      this.$emit("onLongPressDragListView", res);
+    },
+    handleOnSwitchCheck(res) {
+      this.$emit("onSwitchCheck", res);
+    },
+    handleOnSwipeItemClick(res) {
+      this.$emit("onSwipeItemClick", res);
+    }
+  },
+};
+</script>
+  

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

@@ -0,0 +1,66 @@
+<template>
+    <BaseSameLayer
+        :hosSameLayerArgs="hosSameLayerArgs"
+        embedType="native/button"
+        :defaultWidth="300"
+        :defaultHeight="120"
+    ></BaseSameLayer>
+</template>
+
+<script>
+import BaseSameLayer from "./baseSameLayer.vue";
+
+export default {
+  name: "HlButton",
+  components: {
+    BaseSameLayer,
+  },
+  props: {
+    hosUniqueProps: {
+      type: Object,
+      required: true,
+    },
+    text: {
+      type: String,
+      required: false,
+    },
+    loading: {
+      type: Boolean,
+      required: true
+    },
+    stateEffect: {
+      type: Boolean,
+      required: true
+    }
+  },
+
+  computed: {
+    hosSameLayerArgs() {
+      return {
+        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
+        text: this.text,
+        loading: this.loading,
+        stateEffect: this.stateEffect,
+        handleOnTap: this.handleOnTap,
+      }
+    }
+  },
+  methods: {
+    // 自定义拓展其它逻辑
+    handleOnTap(res) {
+      console.log("[web] handleOnTap ", res);
+      this.$emit("onTap", res);
+    },
+  },
+  watch: {
+    loading(newText, oldText) {
+      if (newText !== oldText) {
+        this.scheduleTransfer(); // 当loading属性变化时重新调用
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

package/src/components/hl-button.vue

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

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

@@ -0,0 +1,53 @@
+<template>
+  <BaseSameLayer
+      :hosSameLayerArgs="hosSameLayerArgs"
+      embedType="native/image"
+      :defaultWidth="300"
+      :defaultHeight="120"
+  ></BaseSameLayer>
+</template>
+<script>
+
+import BaseSameLayer from "./baseSameLayer.vue";
+
+const weexModule = weex.requireModule('weexModule');
+export default {
+  name: "HlImage",
+  components: {
+    BaseSameLayer,
+  },
+  props: {
+    src: {
+      type: String,
+      required: true,
+    },
+    hosUniqueProps:{
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    save(callback) {
+      console.log("testxxxxx", "image 组件 save 方法被触发")
+      weexModule.callNative('imageSaveHandle', {src: this.src,},callback)
+    },
+    handleLoad(res) {
+      this.$emit("load", res);
+    },
+  },
+  computed: {
+    hosSameLayerArgs() {
+      return {
+        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
+        src: this.src,
+        handleLoad: this.handleLoad,
+      }
+    }
+  },
+  watch: {
+  },
+};
+</script>
+
+<style scoped>
+</style>

package/src/components/hl-image.vue

@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <embed
+        :id="embedId"
+        type="native/image"
+        :width="width"
+        :height="height"
+        :src="src"
+    />
+  </div>
+</template>
+
+<script>
+
+const weexModule = weex.requireModule('weexModule');
+export default {
+  name: "HlImage",
+  props: {
+    src: {
+      type: String,
+      required: true,
+    },
+    resize: {
+      type: String,
+      default: "contain",
+    },
+    placeholder: {
+      type: String,
+      default: "images/loading.gif",
+    },
+    quality: {
+      type: String,
+      default: "original",
+    },
+    width: {
+      type: [Number, String],
+      default: 300,
+    },
+    height: {
+      type: [Number, String],
+      default: 120,
+    },
+  },
+  data() {
+    return {
+      embedId: `image_${this._uid}`, // 使用Vue实例的唯一ID来生成embed元素的唯一ID
+      isTransferScheduled: false, // 添加一个标志来检查是否已经安排了transferPropsAndListeners的调用
+    };
+  },
+  created() {
+    console.log("[weex] hl-image created!");
+    console.log("[weex] embed.width", this.width);
+    console.log("[weex] embed.height", this.height);
+    this.transferPropsAndListeners(); // 组件创建时调用
+  },
+  mounted() {
+    this.addTouchEvent();
+  },
+  beforeDestroy() {
+    this.removeTouchEvent();
+  },
+  methods: {
+    transferPropsAndListeners() {
+      // 构建一个包含所需信息的对象
+      const args = {
+        componentId: this.embedId,
+        width: this.width,
+        height: this.height,
+        src: this.src,
+        resize: this.resize,
+        placeholder: this.placeholder,
+        quality: this.quality,
+        handleLoad: this.handleLoad
+      };
+      // 调用JSbridge方法，传递属性和监听方法到原生组件
+      // @ts-ignore
+      // native.transferSameLayerArgs(args);
+      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;
+        });
+      }
+    },
+    save(callback) {
+      console.log("testxxxxx", "image 组件 save 方法被触发")
+      weexModule.callNative('imageSaveHandle', {src: this.src,},callback)
+    },
+    handleLoad(res) {
+      this.$emit("load", res);
+    },
+  },
+  watch: {
+    // TO-DO 多个属性变化，待修改为一次性传递
+    src(newSrc, oldSrc) {
+      if (newSrc !== oldSrc) {
+        this.scheduleTransfer(); // 当src属性变化时重新调用
+      }
+    },
+    resize(newResize, oldResize) {
+      if (newResize !== oldResize) {
+        this.scheduleTransfer(); // 当resize属性变化时重新调用
+      }
+    },
+    placeholder(newPlaceholder, oldPlaceholder) {
+      if (newPlaceholder !== oldPlaceholder) {
+        this.scheduleTransfer(); // 当placeholder属性变化时重新调用
+      }
+    },
+    quality(newQuality, oldQuality) {
+      if (newQuality !== oldQuality) {
+        this.scheduleTransfer(); // 当quality属性变化时重新调用
+      }
+    },
+    "$attrs.width": {
+      immediate: true,
+      handler(newWidth) {
+        this.width = newWidth || 300; // 当父组件的宽度属性变化时，更新本地宽度值
+      },
+    },
+    "$attrs.height": {
+      immediate: true,
+      handler(newHeight) {
+        this.height = newHeight || 120; // 当父组件的高度属性变化时，更新本地高度值
+      },
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>