【匠心打造】从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:属性值(具体的属性值,可自行配置,参考控件本身的属性值)

最终效果如图所示

其中控件所需的json格式,点击此处也可以弹出来。也在上述json中进行配置。后端按此json格式返回即可(因为人力记忆有限,这样做之后,后端也方便)。

后续导出的时候,会按照用户的自定义习配置去导出,例如 click one for uniapp 请求服务端习惯代码是 this.$http.get / post  当然你的习惯可能是 this.xx.xxx 导出也批量替换。当然替换之后,能否运行,可能还需要用户自己在mian.js中 加入自己的代码。

六、click one for uniapp能做什么?

能不能导出taro,Flutter er(dart),android(java),ios(swift) 是否可行?在作者看来是可行的。当然需要用户非常非常熟悉这两端的代码,在导出的json中进行转换生成即可(当然效果肯定也不是100%)。

当然,如果使用者特别精通两端。可以自行配置支持的属性和方式。

作者swift不是特别精通,理想中的最终版本可能会支持 Flutter ,android ,taro,swift(看发展,实在没这个精力。哈哈。)

七:关于生态规划和发布时间/收费问题

作者会默认加入三大框架和一些插件市场比较优秀的好看的模板组件(让用户可免费使用)。

今年肯定会发布一个初始版本,希望大家踊跃stat,哈哈。

完全开源,永久免费。

也会提供服务端搭建好的版本(用git上的源码搭建)线上版本,永久不存在任何社区版和公司版。官网线上版本也和git完全保持一致。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/93517.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Excel·VBA分列、字符串拆分

看到一篇博客《VBA,用VBA进行分列(拆分列)的2种方法》,使用VBA对字符串进行拆分 目录 Excel分列功能将字符串拆分为二维数组,Split函数举例 将字符串拆分为一维数组,正则表达式举例 Excel分列功能 Sub 测…

ffmpeg Operation not permitted

在ffmpeg合并视频的时候报这个错,一开始以为权限问题,后来发现是文件不安全,加 -safe 0 修改后代码: def mer_mp4(*args, save_path):tmp Path(args[0]) / Path(args[0]).parent / Path(video.txt)f open(tmp, w)for mp4 in a…

在线OJ项目核心思路

文章目录 在线OJ项目核心思路1. 项目介绍2.预备知识理解多进程编程为啥采用多进程而不使用多线程?标准输入&标准输出&标准错误 3.项目实现题目API实现相关实体类定义新增/修改题目获取题目列表 编译运行编译运行流程 4.统一功能处理 在线OJ项目核心思路 1. 项目介绍 …

docker portainer部署

拉取镜像 docker pull portainer/portainer安装镜像 # 启动镜像, -v /var/run/docker.sock:/var/run/docker.sock:将主机上的 /var/run/docker.sock 文件挂载到容器的相同位置,使得 Portainer 可以通过 Docker API 访问主机上的 Docker 引擎。 docker …

决策树C4.5算法的技术深度剖析、实战解读

目录 一、简介决策树(Decision Tree)例子: 信息熵(Information Entropy)与信息增益(Information Gain)例子: 信息增益比(Gain Ratio)例子: 二、算…

跟着顶级科研报告IPCC学绘图:温度折线/柱图/条带/双y轴

复现IPCC气候变化过程图 引言 升温条带Warming stripes(有时称为气候条带,目前尚无合适且统一的中文释义)是数据可视化图形,使用一系列按时间顺序排列的彩色条纹来视觉化描绘长期温度趋势。 在IPCC报告中经常使用这一方案 IPCC是…

【PostgreSQL】【存储管理】表和元组的组织方式

外存管理负责处理数据库与外存介质(PostgreSQL8.4.1版本中只支持磁盘的管理操作)的交互过程。在PostgreSQL中,外存管理由SMGR(主要代码在smgr.c中)提供了对外存的统一接口。SMGR负责统管各种介质管理器,会根据上层的请求选择一个具体的介质管理器进行操作…

凉鞋的 Godot 笔记 105. 第一个通识:编辑-测试 循环

105. 第一个通识:编辑-测试 循环 在这一篇,我们简单聊聊此教程中所涉及的一个非常重要的概念:循环。 我们在做任何事情都离不开某种循环,比如每天的 24 小时循环,一日三餐循环,清醒-睡觉循环。 在学习一…

首发Orin N芯片,腾势追赶「智驾第一梯队」

张祥威 编辑 | 德新 英伟达最新一代芯片—— Orin N,腾势拿下 首发。 9月26日,腾势N7推出「高快智驾包」。官方描述中,这一选装将“基于新一代NIVIDIA DRIVE ORIN的 高性能平台”,可以实现高速NOA。 此前,腾势的…

从零手搓一个【消息队列】实现虚拟主机的核心功能

文章目录 一、虚拟主机设计二、实现虚拟主机1, 创建 VirtualHost 类2, VirtualHost() 构造方法3, exchangeDeclare() 创建交换机4, exchageDelete() 删除交换机5, queueDeclare() 创建队列6, queueDelete() 删除队列7, queueBind() 创建绑定8, queueUnBind() 删除绑定9, basicP…

C#实现十大经典排序算法:冒泡排序、选择排序、插入排序、希尔排序、归并排序、堆排序、计数排序、桶排序、基数排序

以下是使用C#实现十大经典排序算法的示例代码: 1. 冒泡排序(Bubble Sort) void BubbleSort(int[] array) {int n = array.Length;for (int i = 0; i < n - 1; i++){for (int j = 0; j < n - i - 1; j++){if (array[j] > array[j + 1]){int temp = array[j];array…

软考 系统架构设计师系列知识点之软件架构风格(4)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之软件架构风格&#xff08;3&#xff09; 这个十一注定是一个不能放松、保持“紧”的十一。由于报名了全国计算机技术与软件专业技术资格&#xff08;水平&#xff09;考试&#xff0c;11月4号就要考试&#xff0c;因此…

vscode 注释插件koroFileHeader

https://blog.51cto.com/u_15785499/5664323 https://blog.csdn.net/weixin_67697081/article/details/129004675

2020ICPC银川(A E G J K)

2020ICPC银川(A E G J K) 2020ICPC银川 A. Best Player&#xff08;模拟&#xff09; 在某一维方向上无法区分的点显然另两维坐标相同 &#xff0c; 那么在当前维度上能区分的点个数就是本质不同的另两维坐标组成的点对的个数 &#xff0c; 用set维护一下即可。 #include&l…

YoloV5实时推理最短的代码

YoloV5实时推理最简单代码 import cv2 import torch# 加载YOLOv5模型 model torch.hub.load(ultralytics/yolov5, yolov5s)# 使用CPU或GPU进行推理 device cuda if torch.cuda.is_available() else cpu model.to(device)# 打开摄像头&#xff08;默认摄像头&#xff09; cap…

vue pc端/手机移动端 — 下载导出当前表格页面pdf格式

一、需求&#xff1a;在手机端/pc端实现一个表格页面&#xff08;缴费单/体检报告单等&#xff09;的导出功能&#xff0c;便于用户在本地浏览打印。 二、实现&#xff1a;之前在pc端做过预览打印的功能&#xff0c;使用的是print.js之类的方法让当前页面直接唤起打印机的打印预…

【好玩的开源项目】Docker部署cook菜谱工具

【好玩的开源项目】Docker部署cook菜谱工具 一、cook菜谱工具介绍二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍 三、本地环境检查3.1 检查Docker服务状态3.2 检查Docker版本 四、下载cook镜像五、部署cook菜谱工具5.1 创建cook容器5.2 查看容器状态5.3 检查容器日志 六、…

Oracle is和as 关键字学习

之前写的Oracle存储过程中都有is和as关键字&#xff1b;下面学习这二个关键字&#xff1b; Oracle中is可用于以下情况&#xff1a; 判断某个值是否为null。在Oracle中&#xff0c;null表示一个未知或不适用的值。因此&#xff0c;我们需要使用is null或is not null语句来检查某…

JS合并2个远程pdf

要在HTML和JavaScript中读取远程PDF文件的矢量数据并合并两个PDF文件&#xff0c;您可以使用pdf-lib和Axios库。以下是使用pdf-lib和Axios在HTML和JavaScript中读取和合并远程PDF文件的步骤&#xff1a; 1. 引入 首先&#xff0c;确保您在HTML文件中引入了pdf-lib和Axios库。…

MySQL的索引问题

1、关于索引 1.1 首先来看一下的关于对索引的理解 索引是一个单独的、存储在磁盘上的数据库结构&#xff0c;包含着对数据表里所有记录的引用指针。使用索引可以快速找出在某个或多个列中有一特定值的行&#xff0c;所有MySQL列类型都可以被索引&#xff0c;对相关列使用索引…