1.0.13 • Published 9 days ago
@tslfe/miniapp-engine v1.0.13
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 git@gitlab.tslsmart.com: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: 拷贝组件和属性代码至本地项目或者上传至组件库平台
import {App} from 'miniapp-engine'
let app = new App(el, appConfig);
app.render(options).then((status)=>{
let list = app.search('quota');
app.layer.show('222').then()
list[0].instance.refresh();
list[0].style.left = '0px';
list[0].addEventListener('click', (event)=>{
if(event){
app.layer.show('ddddd');
}
})
}).catch(e=>{
});
1.0.13
9 days ago
1.0.11
1 month ago
1.0.12
1 month ago
1.0.10
3 months ago
1.0.9
4 months ago
1.0.8
5 months ago
1.0.7
5 months ago
1.0.6
5 months ago
1.0.2
8 months ago
1.0.1
9 months ago
1.0.0
10 months ago
1.0.1-0
10 months ago
1.0.5
5 months ago
1.0.4
6 months ago
1.0.3
8 months ago
0.0.10
12 months ago
0.0.11
12 months ago
0.0.12
12 months ago
0.0.13
12 months ago
0.0.14
11 months ago
0.0.15
11 months ago
0.0.3
1 year ago
0.0.9
1 year ago
0.0.8
1 year ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.7
1 year ago
0.0.6
1 year ago
0.0.2
1 year ago