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

news2024/11/22 8:58:03
一、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.coloradmin.cn/o/1057677.html

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

相关文章

蓝队分析研判工具箱V0.81,支持14种哥斯拉流量解密|溯源辅助|佛法搜索|shiro、log4j2解密|各种java反编译...

Part1 前言 大家好,我是ABC_123。“蓝队分析研判工具箱”就是把我平时写的蓝队小工具集合起来形成的,重点解决蓝队分析工作中的一些痛点问题。此0.81版本支持哥斯拉webshell全部14种加密流量的解密,感谢"小黑"的帮助,添…

管道-有名管道

一、有名管道 有名管道与匿名管道的不同: 有名管道提供了一个路径名,并以FIFO的文件形式存在于文件系统中。与匿名管道不同,有名管道可以被不相关的进程使用,只要它们可以访问该路径,就能够通过有名管道进行通信。 FI…

7.wifi开发【智能家居:终】,实践总结:智能开关,智能采集温湿,智能灯。项目运行步骤与运行细节,技术归纳与提炼,项目扩展

一。项目运行步骤与运行细节 1.项目运行步骤(一定有其他的运行方式,我这里只提供一种我现在使用的编译方式) (1)项目运行使用软件与技术: 1.Virtual linux 使用这个虚拟机进行程序的编译 2.Makefile与shl…

构建捡垃圾机器人的 ROS 2 项目

一、说明 本系列是关于学习如何使用 ROS2、Docker 和 Github 设计、设置和维护机器人项目。 先决条件 — ROS2 软件包的基本知识、实现发布者、订阅者、操作并连接它们。 我们之前在 ROS2 中了解了不同的部分。但是,在我们转向实际的基于硬件的项目之前,…

【C++】C++11——C++11介绍、初始化列表、声明、auto、decltype、nullptr、范围for循环

文章目录 C111.C11介绍2.初始化列表2.1{}初始化2.2 std::initializer_list 3.声明3.1auto3.2decltype3.3nullptr 4.范围for循环 C11 1.C11介绍 C11是C编程语言的一个版本,于2011年发布。C11引入了很多新特性,比如:类型…

多线程 - 单例模式

单例模式 ~~ 单例模式是常见的设计模式之一 什么是设计模式 你知道象棋,五子棋,围棋吗?如果,你想下好围棋,你就不得不了解一个东西,”棋谱”,设计模式好比围棋中的 “棋谱”. 在棋谱里面,大佬们,把一些常见的对局场景,都给推演出来了,照着棋谱来下棋,基本上棋力就不会差到哪…

思科:iOS和iOSXe软件存在漏洞

思科警告说,有人试图利用iOS软件和iOSXe软件中的一个安全缺陷,这些缺陷可能会让一个经过认证的远程攻击者在受影响的系统上实现远程代码执行。 中严重程度的脆弱性被追踪为 CVE-2023-20109 ,并以6.6分得分。它会影响启用Gdoi或G-Ikev2协议的软件的所有版本。 国际知名白帽黑客…

CSS鼠标指针表

(机翻)搬运自:cursor - CSS: Cascading Style Sheets | MDN (mozilla.org) 类型Keyword演示注释全局autoUA将基于当前上下文来确定要显示的光标。例如,相当于悬停文本时的文本。default 依赖于平台的默认光标。通常是箭头。none不会渲染光标。链接&状态contex…

最短路径专题2 Dijkstra 最短距离(堆优化版)

题目:样例: 输入 6 6 0 0 1 2 0 2 5 0 3 1 2 3 2 1 2 1 4 5 1 输出 0 2 3 1 -1 -1 思路: 根据题意,数据范围也小,也可以用朴素版的Dijsktra来做,朴素版的Dijsktra我做过了一遍了,可以看以一下我…

【统计学】Top-down自上而下的角度模型召回率recall,精确率precision,特异性specificity,模型评价

最近在学 logistic regression model,又遇见了几个之前的老面孔。 召回率recall, 精确率precision,特异性spcificity,准确率accuracy,True positive rate,false positive rate等等名词在学习之初遇到的困难在于&#x…

Vue3最佳实践 第六章 Pinia,Vuex与axios,VueUse 2(Vuex)

Vuex 状态管理 Vuex 是一种集中管理所有组件中数据的机制。它和Pinia一样都是解决使用 props 和 $emit 事件在组件之间传递数据时,当组件之间频繁传递,层级增加时管理数据就变得困难。Vue 的官方状态管理库已更改为Pinia,Pinia 具有与 Vue 几…

微信小程序-1

微信开发文档 https://developers.weixin.qq.com/miniprogram/dev/framework/ 报错在调试器的console里找 一、结构 Ctrl 放大字体 Ctrl - 缩小 设置 - - - 外观设置 - - - 可以修改喜欢的主题颜色 index.js index.json index.wxml 》 html <view class"box&qu…

【kubernetes】kubernetes中的StatefulSet使用

TOC 1 为什么需要StatefulSet 常规的应用通常使用Deployment&#xff0c;如果需要在所有机器上部署则使用DaemonSet&#xff0c;但是有这样一类应用&#xff0c;它们在运行时需要存储一些数据&#xff0c;并且当Pod在其它节点上重建时也希望这些数据能够在重建后的Pod上获取&…

Python爬虫案例入门教程(纯小白向)——夜读书屋小说

Python爬虫案例——夜读书屋小说 前言 如果你是python小白并且对爬虫有着浓厚的兴趣&#xff0c;但是面对网上错综复杂的实战案例看也看不懂&#xff0c;那么你可以尝试阅读我的文章&#xff0c;我也是从零基础python开始学习爬虫&#xff0c;非常清楚在过程中所遇到的困难&am…

字符编码的了解

前言&#xff1a; 在编写文件读取功能的过程中&#xff0c;我遭遇了一个棘手的乱码难题。经过细致的排查&#xff0c;发现这一问题的根源在于文件的字符编码。为了帮助大家有效地克服编码差异所带来的开发挑战&#xff0c;因此&#xff0c;我收集了字符集编码的相关知识&#x…

想要精通算法和SQL的成长之路 - 旋转链表

想要精通算法和SQL的成长之路 - 旋转链表 前言一. 旋转链表 前言 想要精通算法和SQL的成长之路 - 系列导航 一. 旋转链表 原题链接 由于k的大小可能超过链表长度&#xff0c;因此我们需要根据链表长度取模。那么我们首先需要去计算链表的长度是多少&#xff1a; if (head …

C# GraphicsPath 类学习

先在窗体放2个picturebox&#xff0c; 然后看一下如下代码&#xff1b; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; us…

Pytorch基础:Tensor的transpose方法

相关阅读 Pytorch基础https://blog.csdn.net/weixin_45791458/category_12457644.html?spm1001.2014.3001.5482 在Pytorch中&#xff0c;transpose是Tensor的一个重要方法&#xff0c;同时它也是一个torch模块中的一个函数&#xff0c;它们的语法如下所示。 Tensor.transpo…

window安装压缩版postgresql

环境&#xff1a; window 11 专业版postgresql-16.0-1-windows-x64-binaries.zip 一、下载 1.1 从官网下载 https://www.postgresql.org/download/windows/ 1.2 从百度网盘下载 链接&#xff1a;https://pan.baidu.com/s/1fmQbgWSzX4hN07Lgdzfz0g?pwddzyy 提取码&#…

汇编语言王爽第4版实验8答案(和你想的不一样)

实验8 分析一个奇怪的程序 E:\mywork\asm\p906.asm C:\>edit p906.asm assume cs:codecode segmentmov ax,4c00hint 21h start: mov ax,0 s:nop ; nop的机器码占一个字节nopmov di, offset smov si, offset s2mov ax, cs:[si]mov cs:[di],ax s0:jmp short s s1:mov ax,0in…