minapp-engine

低代码组件开发指南

注意事项：

1. tsl.config.js type=studio
2. studio/index.js 需要导出组件
3. package.json/sideEffects = true
4. webpack配置(externals) 默认已经排除:vue/echarts/three/axios，采用window全局的对应定义

step 1: 创建独立的组件项目，或者从gitlab仓库克隆

git clone [email protected]:terminus-tacos/tacos-fe/miniapp-component-example.git

项目结构说明

  src: 组件的测试代码目录【非必须】
  studio: 低代码组件代码目录【必须】
    |-- index: 组件入口文件
  studio-attribute: 组件的自定义属性代码目录【非必须】
    |-- index: 组件属性入口文件
  tsl.config.js: 组件编译配置文件【必须】

step 2: 定义组件 在studio目录下创建独立的组件模块文件，eg: html.js。示例代码：

import { defineComponent } from "miniapp-engine";
import styles from "./index.less";
import vueComponent from "./component.vue";
import { createApp } from "vue";

export default defineComponent({
  events: [{ key: "three-click", name: "点击孪生设备" }],
  setup(props, context) {
    console.log(props, context);
    const app = createApp(vueComponent);
    return { app };
  },
  /**
   * 渲染
   */
  render() {
    // this.bindAttribute();
    // this.bindStyle();
  },

  /**
   * 创建元素
   * @param callback
   */
  create(setup) {
    let container = document.createElement("div");
    container.className = "html-component";
    setup.app.mount(container);
    return container;
  },
  beforeUnmount(setup) {
    setup.app.unmount();
  }
});

step 3: 导出低代码组件 在studio下的index.js中导出组件

import Html from "./html";
import { defineExporter } from "miniapp-engine";

export default defineExporter({
  "html-div": Html
});

step 4: 打包组件 进入项目根目录，在控制台运行以下脚本：

npx tsl-cli compile -m umd

脚本执行完毕后会在项目根目录，自动生成 dist 文件夹，其中包含 [package.json name]-component-[package.json version].js 和 [package.json name]-attribute-[package.json version].js

step 5: 拷贝组件和属性代码至本地项目或者上传至组件库平台