更新记录

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组件。

环境搭建

  1. 创建项目,打开manifest.json,Vue版本选择3。
  2. 导入ksp-layout插件。
  3. 打开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 }
    }
  4. 打开pages/index/index.vue,添加ksp-layout组件,代码代码如下:
    <template>
    <view>
        <ksp-layout></ksp-layout>
    </view>
    </template>
    <script>
    export default {
    data() {
        return {
        };
    },
    onLoad() {
    }
    }
    </script>
  5. 运行项目
  6. 点击页面中的“在编辑器中打开”,将自动跳转至编辑页面
  7. 输入手机号码,验证码登录即可

使用说明

主界面中间是一个iframe,嵌入了本地项目。这样可以修改本地代码的同时又可以通过工具修改界面,时时同步。
打开界面,可以选择根节点,创建组件,设置组件的定位方式,通过鼠标拖动的方式修改组件位置和大小。
你可以点击编辑代码按钮,直接编辑组件的属性,绑定变量,添加事件,完全按照vue的语法。
你也可以直接修改节点样式。

自定义组件

工具本身只提供基础组件库,如果仅仅通过这些组件来开发项目,效率太低,显然是不可取的。
可通过配置的方式,可通过以下方式自己添加组件库。

  1. 编写自己的组件,或者在插件市场下载组件。
  2. 打开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 }
    }
  3. 进入工具页面,添加节点,组件对话框中就多了一个自己的组件。

插槽

你也可以通过插槽的方式添加自己的代码到ksp-layout组件中,方法如下:

  1. 在页面中修改代码如下:
    <ksp-layout>
        <!-- test为插槽名 -->
        <template v-slot:test>
            <view>我是插槽</view>
        </template>
    </ksp-layout>
  2. 回到界面,创建一个节点,插件选择“插槽”,修改对应插槽名test
  3. 你就可以通过界面控制你的插槽

导出

通过以上方式修改的页面数据是保存在云端的,项目上线打包肯定是不行的,你可以通过以下方式导出到本地。

  1. 首先当然要保存数据
  2. 进入首页,在项目列表中选择导出,会导出一个ksp-store的zip文件。
  3. 将ksp-store.zip文件解压到项目uni_modules文件夹中。
  4. 打开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 }
    }
  5. 页面就可以脱离编辑工具正常显示并打包了。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问