基于 vue 的移动端页面可视化搭建工具思路「终于解决」

基于 vue 的移动端页面可视化搭建工具思路「终于解决」首先我承认我标题党了。。。与其说是可视化搭建工具,不如说是可视化生成页面配置工具,即用拖拽的方式生成页面配置,再通过框架的动态组件的方式,基于配置,生成页面。 现在的公司,一个个都开始整自己的组件库,组件库搭建好以后,通过业务积累、聚合基础组件及抽象部分业务代码,又会产出复用性…

大家好,欢迎来到IT知识分享网。

前言

首先我承认我标题党了。。。与其说是可视化搭建工具,不如说是可视化生成页面配置工具,即用拖拽的方式生成页面配置,再通过框架的动态组件的方式,基于配置,生成页面。

现在的公司,一个个都开始整自己的组件库,组件库搭建好以后,通过业务积累、聚合基础组件及抽象部分业务代码,又会产出复用性比较高的区块库,而可视化搭建,就是基于区块库来实现的。

先说个缺点,比较难应对逻辑复杂的场景以及多变的产品需求。。。

背景介绍

日常开发中发现公司很多小的项目长得都差不多,甚至有些页面就是把其他页面的各个模块换个数据,堆在一起就出了一个新页面,且在运营活动页中尤为常见,而这种大同小异的活动页,如果能让运营自己拖拖拽拽就搭出来,岂不美吱吱。

方案设计

首先想了一下,页面应该是这个结构的

基础结构

整个逻辑应该是这样的

  • 左边列表点一下,组件会出现在中间的位置
  • 中间多个组件可以拖拽进行排序
  • 可能有些组件需要嵌套,需要实现通过拖拽,可以把子组件塞到容器组件里的功能
  • 从中间点击单个组件,可以在右侧展开该组件的配置项
  • 右侧修改后,中间实时呈现效果

页面效果

简单页面撸完如下

基础页面

左侧是基于一个配置文件,生成的组件列表。

中间是嵌套了一个 iframe,与外部通过 postMessage 通信。(本来想画个 iphone6 长相的手机,结果画了半天还是有点像 5s)

右侧是配置组件的位置,效果后面贴图。

拖拽部分使用 vuedraggable 实现,好用到爆炸。

再来个动态图

动态图

可以看到基本功能都已经实现了,右侧的配置位置可以处理 String、Number、Boolean、Array、Object 类型的数据

小结

项目还只是个半成品,主要是一个思路,其实配置生成后还可以做很多,比如

  • 配置中的数据填充由后端实现
  • 基于配置,可通过多个框架实现最终的页面,只需要根据约定设定组件名,并将数据通过 props 传递给组件即可,vue、react 甚至小程序,都可以基于配置生成页面。

大家有其他的想法可以一起讨论哈

丢个 Gayhub 地址,代码略丑,觉得有点意思的话麻烦给个 star:

github.com/Lzzzzzq/vue…

参考文章

《有赞美业店铺装修前端解决方案》

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/9391.html

(0)
上一篇 2023-02-09 19:00
下一篇 2023-02-09 21:00

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信