更新记录
1.0.7(2022-05-26)
添加锁定节点 添加键盘控制上下左右
1.0.6(2022-05-24)
修改了组件的添加方式 新增保存节点功能
1.0.5(2022-05-14)
优化登录流程
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
× | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.4.6 app-vue | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | × | × | × | × | × |
功能介绍
这是一款低代码工具,实现了可视化编辑页面,程序基本功能已经开发完成,但还有许多细节要完善。
体验地址
注意:目前版本还不稳定,很多设定随时可能推翻,数据随时可能删挡。欢迎大家来提意见,不喜欢勿喷。
开发目的
经常写前端页面,最烦的就是写界面了,为了几个简单的布局,定义一堆的class,总未class命名头疼。 因为有代码洁癖,有时为几个class的命名,要想上几个小时。 一直羡慕Cocos Creater有可视化的编辑工具,平时写APP又不能用那玩意,最后决定想自己写一个。
特点
目前市场上有不少低代码工具,但可用性并不高,大多都是在他们平台编辑界面,最后导出代码,进行打包,
想要添加自己的业务逻辑都比较难,遇到复杂的项目根本做不了,仅仅只能当作玩具玩玩。
而这款工具是运用vue3的动态渲染函数实现的,通过可视化界面编辑页面,最终导出的是一个组件,然后嵌入到你的页面中。
你可以利用你的代码控制组件的显示,实现各种业务逻辑。
软件本身只包含基础组件库,但是组件库是可以无限扩展的,可通过配置自定义组件库,原则上,插件市场的组件都可以配置进来,
后续我也会开发一套自己的富UI组件。
环境搭建
- 创建项目,打开manifest.json,Vue版本选择3。
- 导入ksp-layout插件。
- 打开main.js,修改代码如下:
import { createSSRApp } from 'vue' import App from './App' import layout from "./uni_modules/ksp-layout"; export function createApp() { const app = createSSRApp(App) app.use(layout); return { app } }
- 打开pages/index/index.vue,添加ksp-layout组件,代码代码如下:
<template> <view> <ksp-layout></ksp-layout> </view> </template> <script> export default { data() { return { }; }, onLoad() { } } </script>
- 运行项目
- 点击页面中的“在编辑器中打开”,将自动跳转至编辑页面
- 输入手机号码,验证码登录即可
使用说明
主界面中间是一个iframe,嵌入了本地项目。这样可以修改本地代码的同时又可以通过工具修改界面,时时同步。
打开界面,可以选择根节点,创建组件,设置组件的定位方式,通过鼠标拖动的方式修改组件位置和大小。
你可以点击编辑代码按钮,直接编辑组件的属性,绑定变量,添加事件,完全按照vue的语法。
你也可以直接修改节点样式。
自定义组件
工具本身只提供基础组件库,如果仅仅通过这些组件来开发项目,效率太低,显然是不可取的。
可通过配置的方式,可通过以下方式自己添加组件库。
- 编写自己的组件,或者在插件市场下载组件。
- 打开main.js文件,修改代码如下(你也可以单独提取配置文件):
import { createSSRApp } from 'vue' import App from './App' import layout from "./uni_modules/ksp-layout"; import myCustom from "./components/my-custom.vue"; export function createApp() { const app = createSSRApp(App) app.use(layout, { components: { "my-custom": { group: "自定义组件", component: myCustom, description: "自定义组件", hasText: false } } }); return { app } }
- 进入工具页面,添加节点,组件对话框中就多了一个自己的组件。
插槽
你也可以通过插槽的方式添加自己的代码到ksp-layout组件中,方法如下:
- 在页面中修改代码如下:
<ksp-layout> <!-- test为插槽名 --> <template v-slot:test> <view>我是插槽</view> </template> </ksp-layout>
- 回到界面,创建一个节点,插件选择“插槽”,修改对应插槽名test
- 你就可以通过界面控制你的插槽
导出
通过以上方式修改的页面数据是保存在云端的,项目上线打包肯定是不行的,你可以通过以下方式导出到本地。
- 首先当然要保存数据
- 进入首页,在项目列表中选择导出,会导出一个ksp-store的zip文件。
- 将ksp-store.zip文件解压到项目uni_modules文件夹中。
- 打开main.js文件,将引入的ksp-layout组件注释掉,引入导出的ksp-store组件,修改代码如下:
import { createSSRApp } from 'vue' import App from './App' // import layout from "./uni_modules/ksp-layout"; import layout from "./uni_modules/ksp-store"; import myCustom from "./components/my-custom.vue"; export function createApp() { const app = createSSRApp(App) app.use(layout, { components: { "my-custom": { group: "自定义组件", component: myCustom, description: "自定义组件", hasText: false } } }); return { app } }
- 页面就可以脱离编辑工具正常显示并打包了。