"build:harmony": "cross-env NODE_ENV=harmony apiEnv=prod ISHARMONY=true webpack --env.NODE_ENV=harmony",

"dependencies": {
    "@antv/f2": "^3.3.9",
    "@babel/polyfill": "^7.12.1",
    "@babel/runtime": "^7.18.9",
    "@ohos/weex-harmony": "D:/works/weex-master/ohos/weex-openharmony/ohos-weex-harmony-1.0.5.tgz",
    "console": "^0.7.2",
    "core-js": "^3.23.5",
    "crypto-js": "^4.0.0",
    "file-loader": "^5.0.2",
    "gcanvas.js": "0.0.8",
    "phantom-limb": "0.0.1",
    "protobufjs": "^6.10.2",
    "vue": "^2.6.11",
    "weex-bindingx": "0.0.49",
    "weex-vue-render": "^1.0.17",
    "weixin-js-sdk": "^1.6.0",
    "wolfy87-eventemitter": "^5.2.6"
  },
  "devDependencies": {
    "@appworks/doctor": "^0.4.1",
    "@babel/core": "^7.18.9",
    "@babel/plugin-transform-runtime": "^7.18.9",
    "@babel/preset-env": "^7.18.9",
    "@vue/compiler-dom": "^3.4.27",
    "address": "^1.1.2",
    "autoprefixer": "^8.0.0",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^8.0.0",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "clean-webpack-plugin": "^3.0.0",
    "concurrently": "^8.2.2",
    "cross-env": "^7.0.3",
    "css-loader": "^1.0.0",
    "eruda": "^2.11.2",
    "eslint": "^5.12.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^5.1.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "filemanager-webpack-plugin": "^2.0.5",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "fs-extra": "^5.0.0",
    "glob": "^7.1.2",
    "himalaya": "^1.1.0",
    "html-webpack-plugin": "^3.2.0",
    "html-webpack-plugin-for-multihtml": "^2.30.2",
    "ip": "^1.1.5",
    "less": "^3.8.0",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.4.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^5.0.0",
    "patch-package": "^8.0.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.9",
    "postcss-plugin-weex": "^0.1.6",
    "qrcode-terminal": "^0.12.0",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.6.2",
    "script-ext-html-webpack-plugin": "^1.8.5",
    "uglifyjs-webpack-plugin": "^1.2.7",
    "url-loader": "^3.0.0",
    "vconsole": "^3.15.1",
    "vue-loader": "^15.2.6",
    "vue-style-loader": "^4.1.1",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.16.3",
    "webpack-bundle-analyzer": "^4.8.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-middleware": "^3.1.3",
    "webpack-dev-server": "^3.1.5",
    "webpack-hot-middleware": "^2.22.3",
    "webpack-merge": "^4.1.4",
    "weex-vue-loader": "^0.7.0",
    "weex-vue-precompiler": "^0.1.26"
  }

└── weex-example               # 所有项目的集合
    └── src                    # 项目名称，项目是一些html网页按照业务划分的集合，由伙伴定义
       ├── assets              # 字体、样式资源目录
       ├── components          # 组件目录
       ├── images              # 图片资源目录
       ├── pages               # 页面入口目录
       └── web                 # H5页面资源目录                    

case 'harmony': 
      webpackConfig = require('./configs/webpack.harmony.conf');
      break;

import Vue from 'vue';

import weex from 'weex-vue-render';

const VConsole = require('vconsole');

if (!window.location.href.includes('static')) {
    // eslint-disable-next-line no-new
    new VConsole({ theme: 'dark' });
}

weex.init(Vue);

npm install
npm run build:harmony

"modules": [
  {
    "name": "entry",
    "srcPath": "./entry",
    "targets": [
      {
        "name": "default",
        "applyToProducts": [
          "default"
        ]
      }
    ]
  },
  {
      "name": "WebScenekitHsp",
      "srcPath": "./web_scenekit_hsp",
      "targets": [
        {
          "name": "default",
          "applyToProducts": [
            "default"
          ]
        }
      ]
    }
]

"dependencies": {
  "WebSceneKitHsp": "file:../web_scenekit_hsp"
}

// GlobalThis .ets

export class GlobalThis {
  private constructor() {
  }

  private static instance: GlobalThis;
  private _uiContexts = new Map<string, Context>();

  public static getInstance(): GlobalThis {
    if (!GlobalThis.instance) {
      GlobalThis.instance = new GlobalThis();
    }
    return GlobalThis.instance;
  }

  getContext(key: string): Context | undefined {
    return this._uiContexts.get(key);
  }

  setContext(key: string, value: Context): void {
    this._uiContexts.set(key, value);
  }
}
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    GlobalThis.getInstance().setContext("GlobalContext", this.context)
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

import { ExtWebController } from 'WebSceneKitHsp';

...
onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/Index', (err, data) => {
      // 支持业务侧动态配置 将业务模块路径传入init 页面配置文件在每个业务模块根目录
      // 第一个参数为业务模块目录名，和rawfile下保持一致，最后一个参数是初始化Web容器数量
      ExtWebController.init(['frameworkTest_web'], windowStage.getMainWindowSync().getUIContext(), this.context, 10);
      AppStorage.setOrCreate("uiContext", windowStage.getMainWindowSync().getUIContext());
    });
  }

import { ExtWeb } from 'WebSceneKitHsp'
...
build() {
  Row() {
    Column() {
      ExtWeb({ url: 'resource://rawfile/frameworkTest_web/pages/index/entry.html' })
    }
    .width('100%')
  }
  .height('100%')
}

onWindowStageCreate(windowStage: window.WindowStage) {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    ExtWebController.setUA('');
    windowStage.loadContent('pages/Index', (err, data) => {
      // 支持业务侧动态配置 将业务模块路径传入init 页面配置文件在每个业务模块根目录
      // ExtWebController.init('WebSceneConfig.json', windowStage.getMainWindowSync().getUIContext(), this.context, 10);
      ExtWebController.init(['frameworkTest_web'], windowStage.getMainWindowSync().getUIContext(), this.context, 10);
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      AppStorage.setOrCreate("uiContext", windowStage.getMainWindowSync().getUIContext());
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
      AppStorage.setOrCreate<UIContext>("UIContext", windowStage.getMainWindowSync().getUIContext());
    });
  }

public getWebInstanceId(reuse: boolean, url?: string): number {
  ...
  // if the webIdleMap size less than minimumThreshold, new web
  if (this.webIdleMap.size <= this.minimumThreshold) {
    const currentSize: number = this.webIdleMap.size + this.webUsedMap.size;
    this.createNormalWebInstance(this.uiContext as UIContext, currentSize + 1, 2);
  }
  ...
}

build() {
  Row() {
    Column() {
      ExtWeb({ url: this.url })
    }
    .width('100%')
  }
  .height('100%')
}

└── weexProjects                 # 所有项目的集合
    ├── projectName              # 项目名称，项目是一些html网页按照业务划分的集合，由伙伴定义
    ├── urls                     # 当前项目下的的url地址和type类型
    │   ├── url                  # url地址
    │   └── type                 # 对应的类型，在下文介绍                                
    └──preLoad                   # 当前项目需要预加载的项目

...
"projectName": "weexProject",
"urls": [
    {
        "url": "resource://rawfile/frameworkTest_web/pages/index/entry.html",
        "type": 3
    },
    ...
]
...

"projectName": "weexProject",
 "urls": [
    ...
    {
      "url": "resource://rawfile/frameworkTest_web/pages/mapTest1/entry.html",
      "type": 2
    },
    ...
    ]
...

...
{
    "projectName": "测试",
    "urls": [
        {
          "url": "https://www.example.com",
          "type": 3
        }
      ],
    "preLoad": [
        "机票"
      ]
    },
...

...
{
    "projectName": "机票",
    "urls": [
        {
          "url": "https://www.example.com",
          "type": 1
        },
       {
          "url": "https://www.example.com",
          "type": 3
        },
        {
          "url": "https://www.example.com",
          "type": 3
        },
        {
          "url": "https://www.example.com",
          "type": 1
        }
      ],
}
...

└── weexProjects                 # 所有项目的集合
    ├── projectName              # 项目名称，项目是一些html网页按照业务划分的集合，由伙伴定义
    ├── urls                     # 当前项目下的的url地址和type类型
    │   ├── url                  # url地址
    │   └── type                 # 对应的类型，在下文介绍                                
    └──preLoad                   # 当前项目需要预加载的项目

ExtWebController.init(['web'], windowStage.getMainWindowSync().getUIContext(), this.context, 10);

let projects: Map<string, Project> = new Map();
public static parseConfig(context: common.UIAbilityContext, path: string): Promise<void> {
  return new Promise((resolve, reject) => {
    context.resourceManager.getRawFileContent(path).then((data: Uint8Array) => {
      let jsonObject = JSON.parse(ParseUtil.bufferToString(data.buffer)) as Record<string, Array<JsonProject>>;
      let weexProjects = jsonObject.weexProjects as Array<JsonProject>;
      weexProjects.forEach((jsonProject: JsonProject) => {
        let preloadUrls: Array<string> = new Array();
        // 将模块下所有type为1的url存储在preloadUrls中
        jsonProject.urls.forEach((urlParams: UrlParams) => {
          urlConfig.set(urlParams.url, new UrlInfo(urlParams.type, jsonProject.projectName));
          if (urlParams.type === 1) {
            preloadUrls.push(urlParams.url);
          }
        })
        let project: Project = new Project(preloadUrls, jsonProject.preLoad);
        projects.set(jsonProject.projectName, project);
      })

      // 如果项目A依赖B，那么B也要依赖A，否则从B回退A，会重新刷新界面
      projects.forEach((value: Project, key: string) => {
        value.preLoadProjects.forEach((preLoadProjectName: string) => {
          if (!projects.get(preLoadProjectName)?.preLoadProjects.includes(key)) {
            projects.get(preLoadProjectName)?.preLoadProjects.push(key);
          }
        })
      })

      // 如果项目需要依赖自己
      projects.forEach((value: Project, key: string) => {
        if (!value.preLoadProjects.includes(key)) {
          value.preLoadProjects.push(key);
        }
      })

      RouterStorage.getInstance().urlConfig = urlConfig;
      RouterStorage.getInstance().projectsConfig = projects;
      resolve()
    }).catch((error: BusinessError) => {
      ...
    })
  })
}

public preloadTemplate(routerUrl: string) {
  ...
  // 需要预热的模板
  let preLoadProjects: Array<string> | undefined = RouterStorage.getInstance()
    .projectsConfig
    .get(projectName)?.preLoadProjects;

  // 当前预热的模板
  let currentProjects: Map<string, Map<string, string>> = WebManager.getInstance().preloadStatus;

  let addProjects: Array<string> = new Array();
  let deleteProjects: Array<string> = new Array();
  // 获取当前预热模板，如果不包含需要预热模块，则添加进addProjects
  preLoadProjects?.forEach((preLoadProject: string) => {
    if (!currentProjects.has(preLoadProject)) {
      addProjects.push(preLoadProject);
    }
  })
  currentProjects.forEach((value: Map<string, string>, key: string) => {
    if (!preLoadProjects?.includes(key)) {
      deleteProjects.push(key);
    }
  })

  if (preLoadProjects?.length === 0 && deleteProjects.length === 0) {
    return;
  }

  // 删除冗余模版
  WebManager.getInstance().deleteProject(deleteProjects);

  // 预热模版
  WebManager.getInstance().addProject(addProjects);
}

public async addProject(addProjects: Array<string>) {
  let taskUrls: Array<string> = new Array();
  addProjects.forEach((addProjectName: string) => {
    let preloadUrls: Array<string> | undefined = RouterStorage.getInstance()
      .projectsConfig
      .get(addProjectName)?.preloadUrls;
    let projectsStatusMap: Map<string, string> = new Map();
    preloadUrls?.forEach((preloadUrl: string) => {
      projectsStatusMap.set(preloadUrl, Constant.STATUS_INITIAL);
      taskUrls.push(preloadUrl);
    })
    this.preloadStatus.set(addProjectName, projectsStatusMap);
  })

  taskUrls.forEach((url: string) => {
    if (this.templateIdleMap.size === 0) {
      return;
    }
    let webId: number = this.templateIdleMap.keys().next().value;
    let controller: web_webview.WebviewController | undefined = this.webControllerMap.get(webId);
    controller?.clearHistory();
    let builderNode: BuilderNode<BuilderData[]> | undefined = this.templateIdleMap.get(webId);
    if (builderNode) {
      this.templateUsedMap.set(webId, builderNode);
      this.templateIdleMap.delete(webId);
    }
    this.templateUrlMap.set(url, webId);
    url = UrlUtil.addFakeDomain(url);
    controller?.loadUrl(url);
  })
}

public refreshStatus(url: string) {
    let fakeDomain: string = Constant.FAKE_DOMAIN;
    if (url.startsWith(fakeDomain)) {
      url = url.substring(fakeDomain.length);
    }
    let projectName: string = RouterStorage.getInstance().getProjectName(url);
    this.preloadStatus.get(projectName)?.set(url, 'finish');
  }

// GlobalRouter.ets
let params = UrlUtil.getUrlParams(routerUrl);
webManagerInstance.getWebController(webId)?.runJavaScript(`reloadUrl(\"${params}\")`);
if (WebManager.getInstance().isPreloadFinish(routerUrl)) {
  PageModelController.getInstance().loading(false);
}

module.exports = {
  plugins: ['./configs/weexTransform.js']  
}

const weexExtModules = [
    'weexModule',
    'globalEvent',
    'clipboard',
    'navigator',
    'deviceInfo',
    'websocket',
]

function isNeedWeexExtProxy(module) {
    return (weexExtModules.indexOf(module) === -1) ? false : true;
}

module.exports = function({ types: t }) {
    return {
        name: "weexTransform",
        visitor: {
            StringLiteral(path, state) {
            },
            CallExpression(astPath) {
                const node = astPath.node
                const calleePath = astPath.get('callee')
                const callee = calleePath.node
                if (callee.type === 'MemberExpression') {
                    const args = astPath.node.arguments
                    if (
                        args.length === 1 &&
                        t.isStringLiteral(args[0]) &&
                        isNeedWeexExtProxy(args[0].value) &&
                        t.isIdentifier(callee.object) &&
                        callee.object.name === 'weex'
                    ) {
                        if (process.env.ISHARMONY === 'true') {
                            console.log('TestXXX weexTransform.js harmony process.env.ISHARMONY:' + process.env.ISHARMONY);
                            // callee.object = t.identifier('weexExt')

                            const parentPath = astPath.parentPath?.parentPath
                            const parentNode = parentPath?.node
                            if (parentNode && t.isVariableDeclaration(parentNode)) {
                                const key = args[0].value

                                const properties = [
                                    t.objectProperty(
                                        t.identifier(key),
                                        t.identifier(key),
                                        false,
                                        true
                                    )
                                ]
                                const objectPattern = t.objectPattern(properties)

                                const requireExpression = t.CallExpression(
                                    t.identifier('require'),
                                    [t.stringLiteral('@ohos/weex-harmony')]
                                )
                                const replaceNode = t.variableDeclaration('const', [
                                    t.variableDeclarator(objectPattern, requireExpression)
                                ])

                                parentPath.replaceWith(replaceNode)
                            } else {
                                if (parentNode && t.isCallExpression(parentNode)) {
                                    const callee = parentNode.callee
                                    const object = callee.object
                                    const requireModuleName = object.arguments[0].value

                                    const requireExpression = t.callExpression(
                                        t.identifier('require'),
                                        [t.stringLiteral('@ohos/weex-harmony')]
                                    )

                                    const memberExpression = t.memberExpression(
                                        requireExpression,
                                        t.identifier(requireModuleName)
                                    )

                                    parentNode.callee.object = memberExpression
                                }
                            }
                        } else {
                            console.log('TestXXX weexTransform.js not harmony process.env.ISHARMONY:' + process.env.ISHARMONY);
                        }
                    }
                }
            }
        }
    };
};

let weexModule = {
  name: "Weex扩展API",
  // 默认走同步
  // isAsync: 是否异步方式调用native api
  callNative: function (name, paramObj, callback, isAsync = false) {
    // @ts-ignore
    native.run(name, paramObj, callback, isAsync);
  }
}

let clipboard = {
  name: "Weex剪贴板事件",
  getString: function (callback) {
    weexModule.callNative('getString', "", callback);
  },
  setString: function (text) {
    let paramObj = {"message": text};
    weexModule.callNative('setString', paramObj, undefined);
  }
}

let deviceInfo = {
  name: "Weex获取全屏高度",
  enableFullScreenHeight: function (callback) {
    weexModule.callNative('enableFullScreenHeight', null, callback);
  }
}

let navigator = {
  name: "Weex导航事件",
  pop: function (options, callback) {
    weexModule.callNative('navigatorPop', options, callback);
  },
  push: function (options, callback) {
    weexModule.callNative('navigatorPush', options, callback);
  },
  replace: function (options, callback) {
    weexModule.callNative('navigatorReplace', options, callback);
  }
}

let globalEvent = {
  name: "Weex监听全局事件",
  addEventListener: function (eventName, callback) {
    if (callback === undefined) {
      console.error("callback is undefined.");
      return;
    }

    let paramObj = {'eventName': eventName}
    weexModule.callNative('addEventListener', paramObj, callback);
  },
  removeEventListener: function (eventName) {
    let paramObj = {'eventName': eventName}
    weexModule.callNative('removeEventListener', paramObj, undefined);
  }
}

let errorHandlers = [];
let closeHandlers = [];
let openHandlers = [];
let messageHandlers = [];
let socket = null;
const WEB_SOCKET_NO_READY = 'WebSocket is not ready'

// 给error event事件添加一个data属性
function handleError(handlers, errorMsg) {
  const event = new Event('error');
  handlers.forEach(handler => handler(Object.defineProperty(event, 'data', {
    value: errorMsg,
    enumerable: true,
    writable: true
  })));
}

const websocket = {
  WebSocket: function (url, protocols) {
    // 重新创建socket对象，初始化socket
    if (socket) {
      errorHandlers = [];
      closeHandlers = [];
      openHandlers = [];
      messageHandlers = [];
      socket = null;
    }
    socket = new WebSocket(url, protocols !== undefined && protocols !== '' ? protocols : 'wss');

    socket.onopen = function handleOpen(event) {
      openHandlers.forEach(handler => handler(event));
    };

    socket.onmessage = function handleMessage(event) {
      messageHandlers.forEach(handler => handler(event));
    };

    socket.onclose = function handleClose(event) {
      closeHandlers.forEach(handler => handler(event));
    };
  },

  onopen: function (handler) {
    openHandlers.push(handler);
  },

  onmessage: function (handler) {
    messageHandlers.push(handler);
  },

  onerror: function (handler) {
    errorHandlers.push(handler);
  },

  onclose: function (handler) {
    closeHandlers.push(handler);
  },

  send: function (data) {
    if (socket != null) {
      try {
        socket.send(data);
      } catch (e) {
        handleError(errorHandlers, e.message)
      }
    } else {
      handleError(errorHandlers, WEB_SOCKET_NO_READY)
    }
  },

  close: function () {
    if (socket != null) {
      // socket存在即关闭
      try {
        socket.close();
        errorHandlers = [];
        closeHandlers = [];
        openHandlers = [];
        messageHandlers = [];
        socket = null
      } catch (e) {
        handleError(errorHandlers, e.message)
      }
    } else {
      handleError(errorHandlers, WEB_SOCKET_NO_READY)
    }
  }
}


let picker = {
  name: "Weex选择器",
  pick: function (options, callback) {
    weexModule.callNative('pick', { 'options': options }, callback);
  },
  pickDate: function (options, callback) {
    weexModule.callNative('pickDate', { 'options': options }, callback);
  },
  pickTime: function (options, callback) {
    weexModule.callNative('pickTime', { 'options': options }, callback);
  }
}

export {
  clipboard,
  weexModule,
  deviceInfo,
  navigator,
  globalEvent,
  websocket,
  picker
}

"build:harmony": "cross-env NODE_ENV=harmony apiEnv=prod ISHARMONY=true webpack --env.NODE_ENV=harmony",

const weexExtModules = [
    'weexModule',
    'globalEvent',
    'clipboard',
    'navigator',
    'deviceInfo',
    'websocket',
]

let weexModule = {
  name: "Weex扩展API",
  callNative: function (name, paramObj, callback) {
    // @ts-ignore
    native.run(name, paramObj, callback);
  }
}

<template>
  <div>
    <embed
      class="embed-element"
      :id="embedId"
      type="native/video"
    />
  </div>
</template>

<script>
const weexModule = weex.requireModule("weexModule");

export default {
  name: "HlVideoTest",
  props: {
    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 {
      // 此处使用Vue实例的唯一ID来生成embed元素的唯一ID，仅供参考，也可以使用其它方式确保唯一，例如使用时间戳。
      embedId: `video_${this._uid}`, 
      isTransferScheduled: false,
    };
  },
  created() {
    this.transferPropsAndListeners(); // 组件创建时调用
  },
  methods: {
    transferPropsAndListeners() {
      // 原生组件所需的属性和方法，以对象方式传递
      const args = {
        componentId: this.embedId,
        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);
    },
    scheduleTransfer() {
      if (!this.isTransferScheduled) {
        this.isTransferScheduled = true;
        this.$nextTick(() => {
          // 组件属性变化触发重新渲染时，也可以只传递变化了的属性到原生侧，但一定要包含componentId属性，例如传递{componentsId: this.componentId, controls: this.controls}
          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属性变化时重新调用
      }
    },
  },
};
</script>

<style scoped>
.embed-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

transferPropsAndListeners() {
  // 原生组件所需的属性和方法，以对象方式传递
  const args = {
    componentId: this.embedId,
    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);
},

<template>
  <div>
    <embed class="embed-element" :id="embedId" type="native/lottie"/>
  </div>
</template>

export default {
  name: "HlLottie",
   methods: {
    play(callback) {
      weexModule.callNative('lottieHandle', {
        method: 'play',
        name: this.embedId,
      }, callback)
    },
    // 其他方法定义，省略
  },
  // 其他数据定义，省略
}

// 使用Lottie组件， entry.vue 文件
<template>
  <hl-lottie ref="mylottie"/>
  <text class="playBtn" @click="playLottie"/>
</template>

<script>
export default {
  methods: {
    playLottie() {
      this.$refs.mylottie.play(() => {});
    },
  },
}
</script>

const compiler = require('vue-template-compiler')
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const generator = require('@babel/generator').default
const t = require('@babel/types')
const { parse } = require('himalaya')
const path = require('path')

let currentModulePath = ''

// 组件引入基路径，baseUrl的值为引入组件路径的公共部分
const baseUrl = '../src/components/'

/**
 * componentName:该属性的值是导入和注册组件时的组件名称，使用时请遵循Vue组件的命名和使用规范
 * 
 * componentAddress: 组件所在地址
 * 
 * isInPlugin: 是否从三方库引入
 */
const componentMap = [
  {
    componentName: 'HlRichtext',
    componentAddress: 'hl-richtext-base.vue',
    isInPlugin: false
  },
  {
    componentName: 'HlVideo',
    componentAddress: 'hl-video-base.vue',
    isInPlugin: false
  },
  {
    componentName: 'HlLottie',
    componentAddress: 'hl-lottie-base.vue',
    isInPlugin: false
  },
  {
    componentName: 'HlWeb',
    componentAddress: 'hl-web-base.vue',
    isInPlugin: false
  },
  {
    componentName: 'HlTextarea',
    componentAddress: 'hl-textarea-base.vue',
    isInPlugin: false
  },
  {
    componentName: 'HlButton',
    componentAddress: 'hl-button-base.vue',
    isInPlugin: false
  },
  {
    componentName: 'HlSlider',
    componentAddress: 'hl-slider-base.vue',
    isInPlugin: false
  }
]
const componentSet = new Set()

/**
 * 判断是否为windows环境
 * @returns 
 */
function isWin32(){
  if(process.platform === 'win32') {
    return true
  } else {
    return false
  }
}

/**
 * 处理解析标签名，将<hl-video>这种转为HlVideo
 * @param {*} tagName 
 */
function transformTagName(tagName) {
  if(tagName.includes('-')) {
    const nameSplit = tagName.split('-')
    return nameSplit.join('')
  }
  return tagName
}

function hasTargetElement(tagName) {
  let hasElement = false
  let componentName = ''
  componentMap.forEach((item) => {
    if(item.componentName.toLowerCase() === transformTagName(tagName)) {
      hasElement = true
      componentName = item.componentName
    }
  })

  return {
    hasElement,
    componentName
  }
}

/**
 * 遍历html节点，将需要引入的组件添加到componentSet中
 * @param {*} node html节点
 */
function traverseNode(node) {
  if (node.type === 'element') {
    const {hasElement, componentName} = hasTargetElement(node.tagName)
    if (hasElement) {
      componentSet.add(componentName)
    }
    if (node.children) {
      node.children.forEach((child) => {
        traverseNode(child)
      })
    }
  }
}

/**
 * 创建import组件导入节点
 * @param {*} componentName 组件名称
 * @returns 导入的ast节点
 */
function buildImportDeclaration(componentName) {
  let isInPlugin = getIsInPlugin(componentName)
  return t.importDeclaration(
    isInPlugin ? [t.importSpecifier(t.identifier(componentName), t.identifier(componentName), false, true)] : [t.importDefaultSpecifier(t.identifier(componentName))],
    t.stringLiteral(getComponentLoc(componentName))
  )
}

/**
 * 判断当前组件的引入是否是三方库引入
 * @param {*} componentName 
 */
function getIsInPlugin(name) {
  let isInPlugin = false
  componentMap.forEach((item) => {
    if(item.componentName === name) {
      isInPlugin = item.isInPlugin
    }
  })

  return isInPlugin
}

/**
 * 通过组件名称获取组件所在位置
 * @param {*} name 组件名称
 */
function getComponentLoc(name) {
  let address = ''
  let isInPlugin = false
  componentMap.forEach((item) => {
    if(item.componentName === name) {
      address = baseUrl + item.componentAddress
      isInPlugin = item.isInPlugin
    }
  })

  if (isInPlugin) {
    return address
  } else {
    return getAbsPath(address)
  }
}

/**
 * 根据引入的路径获取组件导入的路径
 * @param {*} address 
 * @returns 
 */
function getAbsPath(address){
  const componentAbsolute = path.resolve(__dirname, address)
  if(isWin32()) {
    return path.relative(currentModulePath, componentAbsolute).replace('..\\','').replace(/\\/g,'/')
  } else {
    return path.relative(currentModulePath, componentAbsolute).replace('../','')
  }
}

/**
 * 生产SFC代码
 * @param {*} moduleResoveRet 
 */
function generateCode(moduleResoveRet) {
  let styleTemplate = ''
  let styleAttrs = ''
  let scriptAttrs = ''

  moduleResoveRet.styles.forEach((item) => {
    styleTemplate += item.content
  })

  Object.keys(moduleResoveRet.script.attrs).forEach((item) => {
    if (typeof moduleResoveRet.script.attrs[item] === 'boolean') {
      scriptAttrs += ` ${item}`
    } else {
      scriptAttrs += ` ${item}="${moduleResoveRet.script.attrs[item]}"`
    }
  })

  if(moduleResoveRet.styles.length){
    Object.keys(moduleResoveRet.styles[0].attrs).forEach((item) => {
      if (typeof moduleResoveRet.styles[0].attrs[item] === 'boolean') {
        styleAttrs += ` ${item}`
      } else {
        styleAttrs += ` ${item}="${moduleResoveRet.styles[0].attrs[item]}"`
      }
    })
  }

  const template = `
<template>${moduleResoveRet.template.content}</template>
<script${scriptAttrs}>${moduleResoveRet.script.content}</script>
<style${styleAttrs}>${styleTemplate}</style>
  `
  return template
}

/**
 * 添加components对象
 * @param {*} data 
 */
function addComponentsProperty(data) {
  if (componentSet.size !== 0) {
    componentSet.forEach((value) => {
      if (!data.value.properties.some(item => item.value.name == value)) {
        const newProperty = t.objectProperty(t.identifier(value), t.identifier(value),false, true)
        data.value.properties.push(newProperty)
      }
    })
  }
}

module.exports = function (source) {
  if (process.env.ISHARMONY === 'true') {
    currentModulePath = this.resourcePath
    const moduleResoveRet = compiler.parseComponent(source)
    const { template, script, styles } = moduleResoveRet
    const tempAst = parse(template.content)
    tempAst.forEach((node) => {
      traverseNode(node)
    })

    // 单模块中引入了自定义组件
    if (componentSet.size !== 0) {
      const scriptAst = parser.parse(script.content, {
        sourceType: 'module',
        // 在此添加需要解析的插件
      })

      traverse(scriptAst, {
        Program(path) {
          componentSet.forEach((componentName) => {
            path.unshiftContainer('body', buildImportDeclaration(componentName))
          })
        },
        ExportDefaultDeclaration(path) {
          if (componentSet.size !== 0) {
            if (t.isObjectExpression(path.node.declaration)) {
              const properties = path.node.declaration.properties
              const result = properties.find(item => item.key.name == 'components')
              if (result) {
                addComponentsProperty(result)
              } else {
                const componentsAst = t.objectProperty(t.identifier('components'), t.objectExpression([]))
                properties.push(componentsAst)
                addComponentsProperty(componentsAst)
              }
            }
          }
        }
      })

      // 清除componentSet中的缓存，准备进入下次循环
      componentSet.clear()

      const { code } = generator(scriptAst)
      moduleResoveRet.script.content = code
      source = generateCode(moduleResoveRet)
    }
  }
  return source
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue(\?[^?]+)?$/,     // 配置解析.vue文件
        use: [
          {
            loader: path.resolve(__dirname, 'transform-loader.js'), // 引入自定义loader，transform-loader.js(和配置文件在同一目录) 来解析.vue文件
          }
        ],
      },
    ]
  },
};

//webpack.common.conf.js
module.exports = {
  const webConfig = {
    module: {
      rules: [
        {
          test: /\.vue(\?[^?]+)?$/,
          use: [
          {
            loader: 'vue-loader',      // 使用三方Loader解析.vue文件
            options: {
              postcss: [require('autoprefixer')({ browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8'] })],
              compilerOptions: {
                modules: [
                  {
                    postTransformNode: el => {
                      // to convert vnode for weex components.
                      require('weex-vue-precompiler')()(el)
                    }
                  }
                ]
              }
            }
          },
          {
            loader: path.resolve(__dirname, 'transform-loader.js'), // 引入自定义loader解析.vue文件
          }
          ],
        },
      ]
    },
  }
};

import { sameLayerManager } from 'WebSceneKitHsp/Index';
import { VideoParams } from '../../interfaces/SameLayer';

@Component
export struct NativeVideo {
  @ObjectLink params: VideoParams
  videoController: VideoController = new VideoController();

  build() {
    Column() {
      Video({
        src: this.params.src,
        controller: this.videoController
      })
        .objectFit(ImageFit.Fill)
        .autoPlay(this.params.autoPlay ?? true)
        .muted(this.params.muted ?? false)
        .loop(this.params.loop ?? false)
        .controls(this.params.controls ?? true)
        .onClick((event) => {
          console.log('NativeEmbed video onClick.')
        })
        .onStart(() => {
          console.log('NativeEmbed video onPlay.', this.params.height)
          const callJsOnPlay: Function | undefined = (sameLayerManager.getSameLayerArgs(this.params.componentId) as VideoParams)?.onPlay
          callJsOnPlay && callJsOnPlay('Native Video playing.')
        })
        .onPause(() => {
          console.log('NativeEmbed video onPause.')
          const callJsOnPause: Function | undefined = (sameLayerManager.getSameLayerArgs(this.params.componentId) as VideoParams)?.onPause
          callJsOnPause && callJsOnPause('Native Video paused.')
        })
    }
    .width(this.params.width)
    .height(this.params.height)
  }
}

@Builder
export function NativeVideoBuilder(params: VideoParams) {
  NativeVideo({ params: params })
    .backgroundColor(Color.Green)
}

@Observed
export class VideoParams {
  width: number // 组件宽度
  height: number // 组件高度
  componentId: string // 组件ID
  src: string // 要播放视频的资源地址
  controls?: boolean // 是否显示播放控件
  muted?: boolean // 是否静音
  loop?: boolean
  autoPlay?: boolean
  onPlay?: (res?: string) => void
  onPause?: (res?: string) => void

  constructor() {
    this.width = 0;
    this.height = 0;
    this.componentId = '';
    this.src = '';
  }
}

// LottieAPI.ets
import { LottieManager } from '../../samelayer/utils/LottieManager';

export class LottieAPI {
  lottieHandle(name: string, args: object, successCb: Function, failCb: Function, completeCb: Function) {
    const lottieManager = LottieManager.getInstance();
    switch (args['method']) {
      case 'play': {
        lottieManager.play(args['name'], completeCb);
        break;
      }
   }
}

// CommonAdaapter.ets 中进行注册
export class CommonAdapter {
  init() {
    //...
    ExtWebController.registerCustomFun('lottieHandle', new LottieAPI().lottieHandle)
  }
}

// 省略...
const ABILITY_TAG = 'EntryAbility';
const storage = new LocalStorage();
export default class EntryAbility extends UIAbility {
  onCreate(want: Want) {
    wbLogger.info(ABILITY_TAG, '%{public}s', 'Ability onCreate');
    storage.setOrCreate('want', want);
    GlobalThis.getInstance().setRawFile('spa')
    LocalUpdateManagerInstance.updateMiniOnLaunch(this.context)
    sameLayerManager.registerNativeComponentBuilders('hl-video', NativeVideoBuilder)
    // 省略...
  }

// 需要检测的事件
const EVENTS_MAP = [
  '@touchstart',
  '@touchmove',
  '@touchend',
  '@stopPropagation',
  '@panstart',
  '@panmove',
  '@panend',
  '@horizontalpan',
  '@verticalpan',
  '@swipe',
  '@longpress',
  '@viewappear',
  '@viewdisappear',
  '@keyboard',
]

// 需要检测的属性名
/**
 * 这里解析的是属性，针对于属性写法有两中例如 :paging-enabled 和 paging-enabled 
 * 为了方便解析，在MAP中统一去掉冒号。同时在registerGesture.js文件中的gestureMap中也统一去除冒号
 */
const ATTRS_MAP = [
  'show-scrollbar',
]

<div>
  <template>
     <div>
        <template></template>
      </div>
   </template>
</div>

/**
 * 解析Vue的SFC代码
 */
function resolveVueSFC(source){
  const moduleResoveRet = compiler.parseComponent(source)
  const { template, script, styles } = moduleResoveRet

  // 解析template和script代码
  resolveTemplate(template)

  // 只有当模块中存在绑定指定的事件和属性时，才会解析scriptAst
  if(elementMap.length !== 0) {
    resolveScript(script)
    // 清除缓存，准备进入下次循环
    clearData()
  }

  // 生成SFC代码
  const newCode = generateSFC(template, script, styles)
  return newCode
}

/**
 * 解析template，当前解析template使用的是himalaya，该工具包会将小驼峰解析为全小写
 * 因此需要将hlText转为hl-text
 */
function resolveTemplate(template){
  const templateContent = template.content
  const templateAst = parse(templateContent)

  // 遍历元素，记录驼峰写法的组件名
  isCamelCase(templateContent)

  // 遍历template元素节点，记录绑定事件或属性信息
  traverseTemplateNode(templateAst)

  // 解析paging-enable属性
  parsePagingEnable(templateAst)

  // 只有当模块中存在绑定指定的事件和属性时，才会做组件名还原和将templateAst转为代码字符串
  if(elementMap.length !== 0) {
    // 遍历节点，将himalaya改动的组件名还原
    resetComponentName(templateAst)

    template.content = stringify(templateAst)
  }
}

/**
 * 解析 script
 */
function resolveScript(script) {
  const scriptConent = script.content
  const scriptAst = babelParser.parse(scriptConent, {
    sourceType: 'module',
  })

  // 遍历scriptAst
  traverseNode(scriptAst)
  const { code } = babelGenerator(scriptAst)
  script.content = code
}

/**
 * 将vue三段式组成完整的字符串代码
 */
function generateSFC(template, script, styles){
  const templateCode = generateTemplateCode(template)
  const scriptCode = generateScriptCode(script)
  const styleCode = generateStyleCode(styles)

  return `${templateCode}${scriptCode}${styleCode}`
}

/**
 * 将vue三段式中的template组成完整的字符串代码
 */
function generateTemplateCode(template){
  // 兼容.vue文件中没有template模块情况
  if(!template) return ''
  const templateContent = template.content
  let templateString = ''

  templateString = `<template>${templateContent}</template>`
  return templateString
}

/**
 * 将vue三段式中的script组成完整的字符串代码
 */
function generateScriptCode(script){
  // 兼容.vue文件中没有script模块情况
  if(!script) return ''
  const scriptContent = script.content
  let scriptString = ''

  // 处理<script>开标签上面的 lang module 等属性
  const scriptAttrs = script.attrs
  const scriptAttrsString = resolveOpeningElementAttrs(scriptAttrs)
  scriptString = `<script${scriptAttrsString}>${scriptContent}</script>`

  return scriptString
}

/**
 * 解析<template> <script> <style>三段式中开标签的属性
 */
function resolveOpeningElementAttrs(attrs){
  const attrKeys = Object.keys(attrs)
  let attrsString = ''
  if(attrKeys.length == 0) return ''

  attrKeys.forEach((key) =>{
    if(typeof attrs[key] === 'boolean') {
      // 如果属性值为true 则在开标签的写法为 <script module>
      // 为保持格式一直，在属性前空格
      attrsString += ` ${key}`   
    } else if(typeof attrs[key] === 'string') {
      // 如果属性值为字符串 则在开标签的写法为 <script lang='ts'>
      // 为保持格式一直，在属性前空格
      attrsString += ` ${key}=${attrs[key]}`
    }
  })
  return attrsString
}

/**
 * 将vue三段式中的styles组成完成的字符串代码
 */

function generateStyleCode(styles){
  // styles是一个数组，在vue中<style>标签可以有多个用于作用于同一个组件
  if(styles.length == 0) return ''

  const stylesString = []
  styles.forEach((style) => {
    let styleString = ''
    const styleContent = style.content
    const styleSttrs = style.attrs
    const styleAttrsString = resolveOpeningElementAttrs(styleSttrs)
    styleString = `<style${styleAttrsString}>${styleContent}</style>`
    stylesString.push(styleString)
  })

  return stylesString.join('') 
}

<style src='./src/global/index.css'></style>
<style scoped>
.btn {
  height: 300px;
  width: 400px;
  border: 1px solid green;
  border-radius: 5px;
}
.container {
  height: 100%;
  width: 100%;
  background-color: #fcc;
}
</style>

/**
 * 遍历template中的元素节点
 */
function traverseTemplateNode(templateAst){
  templateAst.forEach((node) => {
    if(node.type === 'element') {
      // 遍历开启pading-enabled状态下的appear/disappear
      traverseAppearOrDisappear(node)

      // 遍历节点扫描指定事件和属性
      parseTemplateNode(node)
    }
  })
}

/**
 * 对单个element元素节点进行解析，其中主要功能：
 * 1、解析元素是否绑定指定属性或事件
 * 2、若绑定则记录绑定事件到数组中并为元素设置唯一id
 * 3、去掉绑定的属性或者事件
 */
function parseTemplateNode(node){
  if(!node) return 
  const { attributes, children } = node
  let isBindEventOrAttrs = false

  // 遍历属性，收集属性和事件信息
  attributes.forEach((attr) => {
    // 遍历事件
    if(EVENTS_MAP.find((item) => attr.key.includes(item))) {
        const modifier = parseModifier(attr.key)
        const { handler, params } = parseEventAttrValue(attr.value)
        eventOrAttrsMap.push({
          isEvent: true,
          name: attr.key,
          modifier,
          handler,
          params,
        })
        isBindEventOrAttrs = true
    }

    // 遍历属性
    if(ATTRS_MAP.find((item) => attr.key.includes(item))) {
      const { handler, isIdentifer } = parseAttrValue(attr.key, attr.value)
      eventOrAttrsMap.push({
        isEvent: false,
        name: attr.key.startsWith(':') ? attr.key.split(':')[1] : attr.key,
        modifier: [],
        handler,
        params: [],
        isIdentifer,
      })
      isBindEventOrAttrs = true
    }
  })

  if(isBindEventOrAttrs) {
    // 为元素设置id
    setClassId(attributes)
    // 去掉事件或，如果不清除原来绑定的事件，则有的事件会触发两次
    node.attributes = attributes.filter((attr) =>{
        return !EVENTS_MAP.find((item) => attr.key.includes(item))
    })
  }

  // 遍历下一个元素节点
  children.forEach((node) => {
    if(node.type === 'element') {
      parseTemplateNode(node)
    }
  })
}

/**
 * elementMap： object[] 该数组用于存放元素和绑定事件(属性)的映射
 * { className, eventOrAttrsMap }
 * className: 为元素设置的id
 * eventOrAttrsMap: 该元素绑定的事件(属性)数组
 */
let elementMap = []
/**
 * 解析事件的属性值
 */
function parseEventAttrValue(attrValue){
  // 当属性值存在即 @touchstart="fnc" 这种格式
  if(attrValue) {
    // 匹配回调函数参数，例如xxx='xxx(index, item)' 这种调用形式，则会匹配index和item参数值
    const regTem = /([a-zA-Z_$][a-zA-Z\d_$]*)\s*(?=[,\)])/g   
    // 如果未匹配到即params为null，则说明不是函数调用形式而是变量引用形式，例如 xxx='xxx'格式
    let params = attrValue.match(regTem)
    // 如果params有值，则handler则会去掉()这种形式，从xxx='xxx(index, item)' 变为xxx='xxx'
    let handler = params ? attrValue.split('(')[0]?.trim() : attrValue

    return {
      handler,
      params
    }
  } else {
    // 当属性值不存在，即@touchstart.stop这种形式
    return {
      handler: '',
      params: []
    }
  }
}

<!---场景一 ---->
<div @touchstart='onTouch'></div>

<!---场景二 ---->
<div @touchstart='onTouch(event, index, item)'></div>

<!---不支持复杂表达式场景，例如: ---->
<div @touchstart='isTrue ? onTouch : onCancelTouch'></div>

<!---场景一 ---->
<div @touchstart='onTouch'></div>
handler: 'onTouch' params: []

<!---场景二 ---->
<div @touchstart='onTouch(event, index, item)'></div>
handler: 'onTouch' params:['event', 'index', 'item']

eventOrAttrsMap.push({
    isEvent: true,      // 是否为事件
    name: attr.key,     // 事件名称
    modifier,           // 标识符
    handler,            // 绑定的函数
    params,             // 函数对应参数
})

<div @touchstart='onstart' @touchmove='onmove' @touchend='onend' :show-scrollbar='true'></div>

/**
 * 解析属性的属性值
 *  :show-scrollbar="showScrollbar"   this.showScrollbar
    :show-scrollbar="true"            true
    :show-scrollbar="false"           false
    show-scrollbar                    null
    show-scrollbar=''                 ''
    show-scrollbar='true'             "true"
    show-scrollbar=' '                ' '
 */
function parseAttrValue(attrKey, attrValue) {
  if(attrKey.startsWith(':')) {
    return  { handler:attrValue, isIdentifer: true }
  } else {
    if(attrValue === null) {
      return { handler: null, isIdentifer: false }
    } else if(attrValue === ''){
      return { handler: '', isIdentifer: false }
    } else {
      return { handler: attrValue, isIdentifer: false }
    }
  }
}

<!-- 静态属性 -->
<div class='container'></div>

<!-- 动态属性 -->
<div :class='myClassName'></div>

eventOrAttrsMap.push({
    isEvent: false,         // 是否为事件，这个字段只是用于区分属性和事件，Loader中用到的地方比较少
    name: attr.key.startsWith(':') ? attr.key.split(':')[1] : attr.key,     // 属性名，统一不加 : 字符
    modifier: [],       // 空数组
    handler,            // 属性值
    params: [],         // 空数组
    isIdentifer,        // 是否为动态属性
})

if(isBindEventOrAttrs) {
    // 为元素设置id
    setClassId(attributes)
    // 去掉事件或，如果不清除原来绑定的事件，则有的事件会触发两次
    node.attributes = attributes.filter((attr) =>{
        return !EVENTS_MAP.find((item) => attr.key.includes(item))
    })
  }

/**
 * 当元素绑定事件或属性后，则为元素设置唯一classID
 */
function setClassId(attributes){
  const className = 'weex-harmony-register-' + moduleHash + '-' + classNameId
  classNameId++

  elementMap.push({
    className,
    eventOrAttrsMap: [...eventOrAttrsMap]
  })

  const classProperty = attributes.find((item) => item.key === 'class')
  if(classProperty) {
    classProperty.value = `${classProperty.value} ${className}`
  } else {
      attributes.push({
          key: 'class',
          value: className
      })
  }

  // 将eventOrAttrsMap清空，方便解析下一个元素节点时使用
  eventOrAttrsMap = []
}

/**
 * 解析 script
 */
function resolveScript(script) {
  const scriptConent = script.content
  const scriptAst = babelParser.parse(scriptConent, {
    sourceType: 'module',
  })

  // 遍历scriptAst
  traverseNode(scriptAst)
  const { code } = babelGenerator(scriptAst)
  script.content = code
}


/**
 * 遍历scriptAst节点
 */
function traverseNode(scriptAst){
  if(!scriptAst) return

  babelTraverse(scriptAst, {
    Program(path) {
      // 在js代码首部添加注册函数导入语句
      path.unshiftContainer('body', buildImportDeclaration())
    },
    ExportDefaultDeclaration(path) {
      // 对export default {} 做增删改操作
      parseDefaultDeclarationNode(path)
    }
  }) 
}

import { weex_harmongy_registerGesture } from '../xxx/registerGesture.js'

/**
 * 对vue默认导出做增删改操作
 */
function parseDefaultDeclarationNode(path){
  if (elementMap.length !== 0) {
    // 解析mounted属性
   parseMounted(path)
   // 添加data数据
   addDataNode(path)
  }
}

/**
 * 解析mounted属性
 */
function parseMounted(path){
  const node = path.node
  if (t.isObjectExpression(node.declaration)) {
    const properties = node.declaration.properties
    const result = properties.find(item => item.key.name == 'mounted')
    if(result) {
        result.body.body.push(...buildHandlerNode())
    } else {
        const mountedNode = t.objectMethod(
            'method',
            t.identifier('mounted'),
            [],
            t.blockStatement(buildHandlerNode())
        )
        properties.push(mountedNode)
    }
  }
}

/**
 * 该函数作用是在mounted(){}生命周期添加 weex_harmongy_registerGesture() 执行语句,具体语句如下：
 *  weex_harmongy_registerGesture([{
      name: "@swipe",
      handler: this.swipe,
      params: [],
      isEvent: true,
      modifier: ['stop']
    },{
      name: "@touchstart",
      handler: this.touchstart,
      params: [],
      isEvent: true,
      modifier: ['stop']
    }], "weex-harmony-register-1");
 */
function buildHandlerNode() {
  // 注册函数执行的表达式节点数组
  const handlerNodeMap = []

  elementMap.forEach((item) => {
    const objectNodes = item.eventOrAttrsMap.map((eventOrAttrs) => {
      // 处理回调函数参数
      const paramsElements = eventOrAttrs.params?.map((param) => {
        return t.stringLiteral(param)
      })

      // 处理事件绑定的修饰符，例如.stop .prevent等
      const modifiers = eventOrAttrs.modifier?.map((modifier) => {
        return t.stringLiteral(modifier)
      })

      // 返回对象表达式 { name: '@touchstart', handler: callback, params: ['item', 'index'], modifier: ['stop'] }
      return t.objectExpression([
        t.objectProperty(
          t.identifier('name'),
          t.stringLiteral(eventOrAttrs.name)
        ),
        t.objectProperty(
          t.identifier('handler'),
          parseHandler(eventOrAttrs)
        ),
        t.objectProperty(
          t.identifier('params'),
          t.arrayExpression(paramsElements)
        ),
        t.objectProperty(
          t.identifier('isEvent'),
          t.booleanLiteral(eventOrAttrs.isEvent)
        ),
        t.objectProperty(
          t.identifier('modifier'),
          t.arrayExpression(modifiers)
        ),
      ])
    })

    // 生成weex_harmongy_registerGesture()表达式节点
    handlerNodeMap.push(t.expressionStatement(
      t.callExpression(t.identifier('weex_harmongy_registerGesture'), [
        t.arrayExpression(objectNodes),
        t.stringLiteral(item.className)
      ])
    ))

    let hasPagingEnabled = false
    elementMap.forEach((item) => {
      item.eventOrAttrsMap.forEach((item) => {
        if (item.name === ':paging-enabled') {
          hasPagingEnabled = true
        }
      })
    })

    if (hasPagingEnabled) {
      let left = t.memberExpression(t.thisExpression(), t.identifier('weexHarmonyDivStyle'))
      let right = t.objectExpression([
        t.objectProperty(
          t.identifier('height'),
          t.templateLiteral([
            t.templateElement({ raw: '', cooked: '' }),
            t.templateElement({ raw: 'rem', cooked: 'rem' }),
          ], [
            t.binaryExpression(
              '/',
              t.memberExpression(t.memberExpression(t.identifier('document'), t.identifier('documentElement')), t.identifier('clientHeight')),
              t.callExpression(
                t.identifier('parseFloat'),
                [t.memberExpression(t.memberExpression(t.memberExpression(t.identifier('document'), t.identifier('documentElement')), t.identifier('style')), t.identifier('fontSize'))]
              )
            )
          ])
        )
      ])
      handlerNodeMap.push(t.expressionStatement(
        t.assignmentExpression('=', left, right)
      ))
    }
  })
  return handlerNodeMap
}

 weex_harmongy_registerGesture([{
      name: "@swipe",
      handler: this.swipe,
      params: [],
      isEvent: true,
      modifier: ['stop']
    },{
      name: "@touchstart",
      handler: this.touchstart,
      params: [],
      isEvent: true,
      modifier: ['stop']
}], "weex-harmony-register-1");

/**
 * 解析paging-enabled属性分两步：
 * 1、感知该属性并为List添加必要属性：style以及classId
 * 2、给List添加父元素div并且div添加动态style属性
 */
function parsePagingEnable(templateAst){
    checkPagingEnabled(templateAst)
    addParentElement(templateAst)
}

/**
 * 感知该属性并为List添加必要属性：style以及classId
 */
function checkPagingEnabled(templateAst){
    if(!templateAst) return
    templateAst.forEach((node) => {
        if(node.type === 'element') {
            if(node.attributes?.find((attr) => attr.key === ':paging-enabled')){
                node.attributes.push({
                    key:'style',
                    value: 'overflow: hidden !important'
                })
                eventOrAttrsMap.push({
                    isEvent: false,
                    name: ':paging-enabled',
                    params: [],
                    handler: ''
                  })
                // 为元素设置id
                setClassId(node.attributes)
            }
        }
        checkPagingEnabled(node.children)
    })
}

/**
 * 判断直接子节点是否设置PagingEnabled属性，如果直接子节点存在该属性，则：
 * 0、如果元素上已经有:style='weexHarmonyDivStyle'，则表示已经对list列表做处理
 * 1、动态去除:paging-enabled属性
 * 2、添加该子元素添加父元素div并设置style属性为动态样式
 */
function parsePagingEnabledNode(node){
    // 如果无子节点直接返回
    const { children } = node
    if(!children || children.length === 0) return 

    // 如果元素上已经有:style='weexHarmonyDivStyle'，则表示已经对list列表做处理
    if(node.attributes?.find((attr) => attr.key === ':style' && attr.value === 'weexHarmonyDivStyle')) return

    let isPagingEnabled = false
    // 遍历直接子节点，判断直接子节点是否存在PagingEnabled属性
    children.forEach((node) => {
      if(node.attributes?.find((attr) => attr.key === ':paging-enabled')) {
        isPagingEnabled = true
      }
    })

    // 如果设置pagingEnabled属性
    if(isPagingEnabled) {
      const nodeArray = []
       node.children.forEach((node) => {
        if(node.attributes?.find((attr) => attr.key === ':paging-enabled')){
          nodeArray.push({
            type:'element',
            tagName: 'div',
            attributes: [{
              key:':style', value: 'weexHarmonyDivStyle'
            }],
            children: [node]
          })
        } else {
          nodeArray.push(node)
        }
      })
      node.children = nodeArray
    }

    children.forEach((node) => {
        if(node.type === 'element') {
            parsePagingEnabledNode(node)
        }
    })
}

<div v-for='(item, index) in item'>
    <div @touchstart='onstart(item, index)' :index='index' :item='item'></div>
<div>

<template>
    <div>
        <template>
            <div>
                <!-- 禁止三层嵌套 -->
            </div>
        </template>
    <div>
</template>
<script>

</script>
<style>

</style>

const gestureMap = new Map([
  ['@touchstart', touchstart],
  ['@touchmove', touchmove],
  ['@touchend', touchend],
  ['@horizontalpan', horizontalpan],
  ['@longpress', longpress],
  ['@panstart', panstart],
  ['@panmove', panmove],
  ['@panend', panend],
  ['@verticalpan', verticalpan],
  ['@swipe', swipe],
  ['@stopPropagation', stopPropagation],
  ['@viewappear',registerViewAppear],
  ['@viewdisappear', registerViewDisAppear],
  [':paging-enabled', padingEnabled],
  ['@keyboard', registerInputKeyboard],
  ['show-scrollbar', showScrollbar],
  ['@appear', registerAppear],
  ['@disappear',registerDisappear]
])

/**
 *  weex_harmongy_registerGesture([{
      name: "@swipe",
      handler: this.swipe,
      params: [],
      isEvent: true,
      modifier: ['stop']
    },{
      name: "@touchstart",
      handler: this.touchstart,
      params: [],
      isEvent: true,
      modifier: ['stop']
    }], "weex-harmony-register-11");
 */
export function weex_harmongy_registerGesture(eventOrAttrsMap, elementId){
  const elements = document.getElementsByClassName(elementId)
  eventOrAttrsMap.forEach((item) => {
    const gestureAPI = gestureMap.get(item.name.split('.')[0])
    if(gestureAPI) {
      gestureAPI(elements, item, elementId)
    }
  })
}

// 阻止冒泡事件
function stopModifier(e){
  e.stopPropagation()
}

// 阻止默认事件
function preventModifier(e){
  e.cancelable && e.preventDefault();
}

const modifierMap = new Map([
  ['stop', stopModifier],
  ['prevent', preventModifier],
])

// 当list开启padingEnabled属性时，注册该事件来实现元素显示时触发回调
function registerAppear(elements, touchEventMap, elementId){
  const elementArray = Array.from(elements)
  const params = touchEventMap.params
  const callback = touchEventMap.handler

  if(elementArray.length === 1) {
    const element = elementArray[0]
    let hasCurrentElement = false
    appearOrDisappearMap.forEach((item) => {
      if(item.elementId === elementId) {
        hasCurrentElement = true
        item.event['appear'] = {
          callback,
          params
        }
      }
    })
    if(!hasCurrentElement) {
      appearOrDisappearMap.push({
        element: element,
        elementId: elementId,
        state: 'disappear',
        event: {
          appear: {
            callback,
            params
          }
        }
      })
    }
  } else {
    // v-for 形式
    elementArray.forEach((element) => {
      let hasCurrentElement = false
      appearOrDisappearMap.forEach((item) => {
        if(item.element === element) {
          hasCurrentElement = true
          item.event['appear'] = {
            callback,
            params
          }
        }
      })
      if(!hasCurrentElement) {
        appearOrDisappearMap.push({
          element: element,
          elementId: elementId,
          state: 'disappear',
          event: {
            appear: {
              callback,
              params
            }
          }
        })
      }
    })
  }
}

/**
 * eventOrAttrsMap: object[] 该数组用于存储单个元素节点绑定的事件或者手势
 * { name, handler, params, isEvent, modifier }
 * name: 绑定的事件或属性名
 * handler: 绑定的事件或属性名对应的回调(属性值)
 * params: 回调函数的参数
 * isEvent: 是否是事件，该字段用于区分属性和事件
 * modifier: [] 当前事件的修饰符(可以有多个)
 * isIdentifer?: 是否是变量属性值，即:paging-enabled这种格式，该字段只有解析属性值时存在，如果是事件则不存在
 */
let eventOrAttrsMap = []

 {
        test: /\.vue(\?[^?]+)?$/,
        use: [{
          loader: 'vue-loader',
          options: {
            postcss: [require('autoprefixer')({ browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8'] })],
            compilerOptions: {
              modules: [
                {
                  postTransformNode: el => {
                    // to convert vnode for weex components.
                    require('weex-vue-precompiler')()(el)
                  }
                }
              ]
            }
          }
        },
        {
          loader: path.resolve(__dirname, 'gesture-loader.js'),
        },
        {
            loader: path.resolve(__dirname, 'transform-loader.js'),
        },
        {
          // 添加到此处
          loader: path.resolve(__dirname, 'virtual-loader.js'),  
        }
        ],
        exclude: config.excludeModuleReg
      }

<template>
  <list
    class="list-wrap"
    virtual="true"
    @scroll="onScroll"
    estimatedItemSize="100"
    bufferScale="1"
  >
    <div ref="list">
      <div ref="content">
        <cell
          class="list-cell"
          v-for="item in originalData"
          :key="item.id"
          ref="items"
          :style="{
            height: (multiple ? item.height * multiple : item.height) + 'px',
          }"
        >
          <text class="itemContent">{{ item.value }}</text>
        </cell>
      </div>
    </div>
  </list>
</template>

const localWebResourceResponse = LocalUpdateManagerInstance.useSandboxCacheResource(url, fakeDomain);
if (localWebResourceResponse != null) {
    return localWebResourceResponse;
}

useSandboxCacheResource(url: string, fakeDomain: string): WebResourceResponse | null {
  const localLastPath = this.localVersionInfo.path;
  if (fakeDomain && localLastPath != '') {
    let path: string | undefined = url?.replace(fakeDomain, '');
    path = path.replace(Constant.URL_HARD_RESOURCE, '');
    if (path && FileUtils.fileExist(localLastPath, path)) {
        return FileUtils.getFileOnResponseWeb(localLastPath, path);
     }
  }
  return null;
}

{"code": 200, "message": "request OK", "data": {"download_url": "http://127.0.0.1/mpharmony/mpharmony.zip", "latest_version": 1}}

{"code": "300", "message": "latest version"}

import { LocalUpdateManagerInstance } from '../../bundleservice/update/LocalUpdateManager';
import { ResultStr, WeexProxyResult } from './apimodel/WeexResult';

export class UpdateApi {
  onCheckForUpdate(name: string, args: object, successCb: Function, failCb: Function, completeCb: Function) {
    const listener = (hasUpdate: boolean) => {
      completeCb(new WeexProxyResult(ResultStr.SUCCESS, [hasUpdate, LocalUpdateManagerInstance.gteLastVersion()]));
    }
    LocalUpdateManagerInstance.onCheckForUpdate(listener);
  }

  applyUpdate(name: string, args: object, successCb: Function, failCb: Function, completeCb: Function) {
    LocalUpdateManagerInstance.applyUpdate();
  }

  onUpdateReady(name: string, args: object, successCb: Function, failCb: Function, completeCb: Function) {
    const listener = (updatedPath: string) => {
      completeCb(new WeexProxyResult(ResultStr.SUCCESS, ''));
    }
    LocalUpdateManagerInstance.onUpdateReady(listener);
  }

  onUpdateFailed(name: string, args: object, successCb: Function, failCb: Function, completeCb: Function) {
    const listener = () => {
      completeCb(new WeexProxyResult(ResultStr.SUCCESS, ''));
    }
    LocalUpdateManagerInstance.onUpdateFailed(listener);
  }
}

const express = require("express")
const cors = require("cors")
const bodyParser = require("body-parser")
const {access, readdirSync, statSync} = require("fs");
const morgan = require("morgan");
const _ = require("lodash")
const fileUpload = require("express-fileupload")
const os = require("os");

const app = express();

app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use(fileUpload({
    createParentPath: true
}))
app.use(cors())
app.use(bodyParser.urlencoded({extended: true}))
app.use(morgan("dev"))
app.use(express.static("uploads"))

app.listen(3000, function () {
    console.log('服务器已启动，监听端口3000。。。');
});


app.post('/upload', async (req, res) => {
    // console.log('req', req.files)
    try {
        if (!req.files) {
            res.send({
                status: false,
                message: 'No file upload'
            })
        } else {
            let avatar = req.files.file
            avatar.mv(`./upload/${avatar.name}`);
            res.end()
        }
    } catch (err) {
        res.status(500).send(err)
    }
})
app.get('/getIPAdress', function (req, res) {
    res.send(`http://${getIPAdress()}`)
    res.end()
})

app.get('/download', function (req, res) {
    var version = req.query.version;

    if (version === "last") {
        version = getLastVersion()
    }
    //检查文件是否存在
    const filePath = `./upload/${version}`
    access(filePath, function (err) {
        if (err) {
            res.send({code: 404, message: '文件不存在！'});
            return;
        }
        res.download(filePath, (err) => {
            if (err){
                console.log("下载中断: " + err)
                return
            }
            console.log("下载成功")
        })

    });
});

app.get('/apis/config', function (req, res) {
    let local_version = req.query.local_version;
    let lastVersion = getLastVersion()
    let version = splitOutLastVersion(lastVersion)
    if (local_version === "lowVersion") {
        local_version = "0"
    }else if (local_version === "last") {
        local_version = version
    }
    if (!(!isNaN(parseFloat(local_version)) && isFinite(local_version))){
        res.send({
            "code": 404, "message": "url错误",
        })
        res.end()
    }
    if (version === local_version) {
        res.send({"code": "300", "message": "latest version"})
    } else if (version > local_version) {
        res.send({
            "code": 200, "message": "request OK",
            "data": {
                "mini_download_url": `http://${getIPAdress()}:3000/download?version=${lastVersion}`,
                "mini_version": version,
                "effective_time": "now"
            }
        })
    }
    res.end()
});

function splitOutLastVersion(version) {
    return version.slice(version.indexOf("_") + 1, version.indexOf(".zip"))
}

function getLastVersion() {
    let dir = readdirSync("./upload")
    dir.sort((a, b) => {
        if (a > b) {
            return -1
        }
        return 1
    })
    for (const file of dir) {
        let stat = statSync(`${__dirname}\\upload\\${file}`)
        if (!stat.isFile()) {
            continue
        }
        return file
    }
    return ""
}

function getIPAdress() {
    let interfaces = os.networkInterfaces();
    for (let devName in interfaces) {
        let iface = interfaces[devName];
        for (let i = 0; i < iface.length; i++) {
            let alias = iface[i];
            if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
                return alias.address;
            }
        }
    }
}

const callback = (val) => {
    console.log("ChannelMessage singlePage1 callback", JSON.stringify(val));
},
const paramPost = {
  type: "demo",
  data: {
      name: "singlePage1",
      age: 18,
  },
};
weexModule.callNative("channelPostMessage", paramPost, callback);

const paramOnMessage = {
    type: "demo",
};
const callback = (val) => {
    console.log(
        "ChannelMessage entry singlePage1 callback !!!!",
        JSON.stringify(val)
    );
};
weexModule.callNative("channelOnMessage", paramOnMessage, callback);

let paramCallback = {
    type: "demo",
    params: {
        name: "singlePage1",
        age: 21,
    },
};
weexModule.callNative("runpostMessageCallback", paramCallback);

const paramClose = {
    type: "demo",
};
weexModule.callNative("channelCloseMessage", paramClose);

let weexModule = {
  name: "Weex扩展API",
  // 默认走同步
  // isAsync: 是否异步方式调用native api
  callNative: function (name, paramObj, callback, isAsync = false) {
    // @ts-ignore
    native.run(name, paramObj, callback, isAsync);
  }
}

const weexModule = weex.requireModule("weexModule");
weexModule.callNative('getNetworkInfo', params, this.callback, isAsync=True);

import {
   codeCache,
   CodeCacheController,
   CodeCacheResponseSettings
} from 'WebSceneKitHsp';

class SchemeCodeCacheController implements CodeCacheController {
  getScheme(): webview.WebCustomScheme {
    return { schemeName: 'scheme1', isSupportCORS: true, isSupportFetch: true, isCodeCacheSupported: false };
  }

  getResponseSettings(url: string): CodeCacheResponseSettings | null {
    if (url.startsWith('scheme1://')) {
      let data: string | number | Resource | ArrayBuffer | undefined;
      data = getContext().resourceManager.getRawFileContentSync(`cache/${url.slice('scheme1://'.length)}`);
      if (data) {
        return {
          headerKey: 'ResponseDataId',
          // 格式：不超过13位的纯数字。JS识别码，JS有更新时必须更新该字段
          headerValue: '0000000000006',
          data: ParseUtil.bufferToString((data as Uint8Array).buffer)
        }
      }
    }
    return null;
  }
}

const schemeCodeCacheController = new SchemeCodeCacheController();
codeCache.registerController(schemeCodeCacheController);

ExtWebController.preRenderUrls([
      new PreRenderUrl('/data/storage/el2/base/haps/entry/files/web.html', true, false),
      new PreRenderUrl('resource://rawfile/frameworkTest_web/pages/index/entry.html?hello=world', false, false),
      new PreRenderUrl('https://www.jd.com/', true, false),
    ]);

<template>
  <div>
    <list class="list-wrap" v-grouping-child-elements="5">
      <div>
        <cell class="list-cell" v-for="(item, smart_index) in lists" :key="item">
          <text class="item" @click="onstart(item, smart_index)">{{
            `${item}--${smart_index}`
          }}</text>
        </cell>
      </div>
      <div>
        <cell class="list-cell" v-for="(item, big_index) in lists_fork" :key="item" v-grouping-child-ignore="true">
          <text class="item" @click="onstart(item, big_index)">{{
            `${item}--${big_index}`
          }}</text>
        </cell>
      </div>
    </list>
  </div>
</template>

<template>
  <div class="container">
    <text class="title">{{ title }}</text>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'My Weex App',
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}
.title {
  font-size: 30px;
}
</style>

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    this.items = data.items; // 更新数据
  })
  .catch(error => console.error(error));

navigator.push({
    url: 'resource://rawfile/pages/navigator_pop/entry.html',
    animated: "true"
  }, () => {
    console.log('跳转成功')
})

.title {
  color: #3498db; /* 自定义颜色 */
}

function setRootFont () {
    const doc = window.document
    const width = doc.documentElement.clientWidth
    const viewportWidth = 750
    const rem = width * 750 / viewportWidth / 10
    doc.documentElement.style.fontSize = rem + 'px'
}
window.addEventListener('resize', setRootFont)