我是如何通过拖拽式快速搞定开发面板的?

[复制链接]
查看3143 | 回复13 | 2024-5-23 09:40:37 | 显示全部楼层 |阅读模式
本帖最后由 jennifer 于 2024-5-23 09:40 编辑

天下武功,唯快不破。当别人还在吭呲吭呲写开发面板时,爱星物联已经实现拖拽式开发面板。如何操作,请往下看

1、登录爱星物联开发平台,选择【面板开发】--【自定义控制面板】

1.png

2、点击创建面板

2.png

3、根据要求,填写相关信息。
3.png

4、我根据提示创建了一个彩灯的面板,刚创建的面板在未发布页面,点击该面板,开始进入面板创作的世界
4.png
5、好似走入一个大型武器库,各式工具一应俱全。开发面板的江湖,你的武力值由你选的工具共同来打造。
5.png

6、小小的举一个例子。左侧通用组件库里的开关,可以轻轻拖拽到中间的画布上,最右侧的样式可以赋予开关颜色和大小。
6.png
刚拖拽过来的开关大小适中,打开时为蓝色

7.png

通过改变颜色和滑块大小,画布上的开关立马同步变化了。操作起来非常快速,便捷。


7、接下来看下属性又如何操作。将左侧的功能拖拽到画布上,右侧的属性会根据该面板适用的产品的物模型来展示可以设置的功能。

8.png
我现在想将这个功能设置为红色的饱和度,右边随便一划拉,2秒钟就弄好了。
9.png

8、这个饱和度颜色太刺眼,想回到最开始的样式怎么办呢?点击撤销,就会复原了。
10-1.png 10-2.png
9、如果不想要某个组件了,可以选择该组件,点击右键,删除组件就是了。除了删除功能,还有复制,粘贴,图层之前变化的功能。
11.png
10、通用组件库很丰富,就不一一举例,感兴趣的童鞋可以自己来体验一番,感受拖拽式的快乐。面板拖拽完成后,怎么看最终效果呢?点击预览。下载测试APP,输入APP注册账号,即可在手机上预览该面板呈现的效果。
12png.png

11、预览效果满意,就可以点击保存,发布啦。
13png.png


12、面板发布后,创建中的产品,就可以选择了
14.png
对于急需验证产品功能的,这个拖拽式自定义控制面板非常合适。几分钟就能搞定功能验证。不需要设计师设计面板,不需要前端工程师来实现面板。快速,高效。
爱星物联的组件库很丰富,今天只是举了几个小例子,更多功能还需你自己来玩。并且我们的组件库还在持续壮大,期待你的体验!
回复

使用道具 举报

jkernet | 2024-5-23 09:44:53 | 显示全部楼层
我竟然自动忽略了"面板"两个字,不过学习了.
回复 支持 反对

使用道具 举报

jennifer | 2024-5-23 09:55:01 | 显示全部楼层
jkernet 发表于 2024-5-23 09:44
我竟然自动忽略了"面板"两个字,不过学习了.

哈哈哈哈,笑死。
回复 支持 反对

使用道具 举报

WT_0213 | 2024-5-23 10:20:51 | 显示全部楼层
回复

使用道具 举报

bzhou830 | 2024-5-23 11:02:57 | 显示全部楼层
jkernet 发表于 2024-5-23 09:44
我竟然自动忽略了"面板"两个字,不过学习了.

还得是刚哥
选择去发光,而不是被照亮
回复 支持 反对

使用道具 举报

1084504793 | 2024-5-23 11:06:14 | 显示全部楼层
回复

使用道具 举报

iiv | 2024-5-23 11:54:23 | 显示全部楼层
jkernet 发表于 2024-5-23 09:44
我竟然自动忽略了"面板"两个字,不过学习了.

我全部忽略了,我只看到如何通过拖拽快速搞定开发
回复 支持 反对

使用道具 举报

lazy | 2024-5-23 14:47:07 | 显示全部楼层
回复

使用道具 举报

望风阁 | 2024-5-27 23:29:12 | 显示全部楼层
赞赞
回复

使用道具 举报

wurong | 2024-7-3 17:00:57 | 显示全部楼层
支持下
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则