【匠心打造】从0打造uniapp 可视化拖拽设计 c

【匠心打造】从0打造uniapp 可视化拖拽设计 c_o 第十篇

一、click one for uniapp置顶：

全部免费开源 (你商业用途也没关系，不过可以告诉我公司名或者项目名，放在官网上好看点。哈哈-_-)

二、写在之前

距离上一篇更新已经大约4个月了，公司的事情，自己的一些琐事一直没时间来更新。

好消息是：最近闲下来一两周基础的框架已经完善的差不多了。剩下的只是复用组件和搭建组件了。

三、架构方向和定位

设计端：用于拖拽设计(uniapp实现)

服务端：用户实现json转换成页面。（java实现（后续会提供python，go，nodejs），当然最终客户端给的是一个json，也支持任何其他服务端语言对接转换）

转换的框架库：

uview2.x （第一个版本会加入）、

colorui，uni官方的组件框架（后续加入）

定位：

1、在线UI拖拽实现 (辅助前端或者后端解决80%的页面问题，最终用户肯定还是会根据页面需求去修修改改。细微调整。)

2、店铺装修模板

3、产品设计使用模板

四、自定义属性和手写属性

因为css的属性样式实在太多，该版本不会一个一个展示出来，只会展示常用属性。看着那浩如繁星的属性，还不如自己手写。

五、设计逻辑和基础属性

1、控件全部自定义实现

此处以uswiper举例

在fields.js中引入

import uswiper from './compoment/uswiper'//轮播图

uswiper中显示的就是这个的样式了

其中怎么显示他的预览样式和方法呢？

    uswiper: {title: "轮播",tabs: [{name: "常用风格", props: [{type: "style", value: "1", sources: [{label: "默认", value: "1", url: " /d4443b71e13c4fb29023c8a0d187222e.png",properties: [{ showTitle: false }, { autoplay: true }, { circular: true }, { show_dot: false }, { show_zb: true }, { show_num: false }, { indicatorStyle: "" }, { previousMargin: "" }, { nextMargin: "" }]},{label: "带文字", value: "2", url: " /fe4ddbeda92e498c82b7465b8b5278a2.png",properties: [{ showTitle: true }, { autoplay: true }, { circular: true }, { show_dot: false }, { show_zb: true }, { show_num: false }, { indicatorStyle: "" }, { previousMargin: "" }, { nextMargin: "" }]},{label: "点位", value: "3", url: "https://dev.mzhkit.com/qyyimgs/f32555a5b024467694a9fa7ad0902ebe.png",properties: [{ showTitle: false }, { autoplay: true }, { circular: true }, { show_dot: true }, { show_zb: true }, { show_num: false }, { indicatorStyle: "" }, { previousMargin: "" }, { nextMargin: "" }]},{label: "数字", value: "4", url: " 5318817aa6ae4d97b2a44c98e402a6ef.png",properties: [{ showTitle: false }, { autoplay: true }, { circular: true }, { show_dot: false }, { show_zb: true }, { show_num: true }, { indicatorStyle: "{'right':'5%'}" }, { previousMargin: "" }, { nextMargin: "" }]},{label: "卡片", value: "5", url: " 034d50f2753f4ab9a2313d13a548949c.png",properties: [{ zb_stype: "1" }, { showTitle: false }, { autoplay: true }, { circular: true }, { show_dot: false }, { show_zb: false }, { show_num: false }, { indicatorStyle: "" }, { previousMargin: "30" }, { nextMargin: "30" }]},]}]},{name: "详细参数", params: true, props: [{label: "显示title", field: "showTitle", type: "select", value: false, sources: [{ label: "是", value: true },{ label: "否", value: false }]},{label: "自动播放", field: "autoplay", type: "select", value: false, sources: [{ label: "是", value: true },{ label: "否", value: false }]},{label: "轮询播放", field: "circular", type: "select", value: true, sources: [{ label: "是", value: true },{ label: "否", value: false }]},{label: "显示指标", field: "show_zb", type: "select", value: true, sources: [{ label: "是", value: true },{ label: "否", value: false }]},{label: "指标样式", field: "zb_stype", parent_id: "5", type: "select", value: "1", sources: [{ label: "横向", value: "1" },{ label: "点位", value: "2" },{ label: "数字", value: "3" }]},{label: "指标位置", field: "indicatorStyle", type: "textarea", value: "", height: "100"},{label: "组件高度", field: "height", value: "130",type:"number", tips: "px"},// tips:"{'top':'xrpx/x%','left':'xrpx/x%'...}]},{ name: "样式" },]},

title：标题

tabs：右侧有多少个属性面板

props：属性值(具体的属性值，可自行配置，参考控件本身的属性值)

最终效果如图所示