【匠心打造】从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.hqwc.cn/news/124866.html

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

相关文章

uni-app使用iconfont字体图标

先iconfont选择好自己需要的图标 添加至项目 下载字体文件到本地 将下载的文件解压缩到工程目录static文件夹下 定义好iconfont.css文件的font-face声明,修改好引入的url地址 打开App.vue文件 ,引入static下刚才修改的iconfont.css字体图标文件 完成上线的步骤后就可以全局使用…

【软考】PV 操作

#国庆发生的那些事儿# 临界资源: 诸进程间需要互斥方式对其进行共享的资源,如打印机、磁带机等临界区: 每个进程中访问临界资源的那段代码称为临界区信号量: 是一种特殊的变量。 信号量的值与相应资源的使用情况有关: ①: 当信号量的值大于0时,表示当…

【每日一题】买卖股票的最佳时机 IV

文章目录 Tag题目来源题目解读解题思路方法一:动态规划 写在最后 Tag 【动态规划】【数组】【2023-10-04】 题目来源 188. 买卖股票的最佳时机 IV 题目解读 本题与 121. 买卖股票的最佳时机、122. 买卖股票的最佳时机 II、123. 买卖股票的最佳时机 III 题意目的一…

学会安装Redis数据库到服务器或计算机(Windows版)

Redis 是一个基于内存的开源数据库系统,被广泛应用于 Web 应用、消息队列、缓存、实时统计等领域。它支持多种数据结构,包括字符串、哈希表、列表、集合、有序集合等,并提供了多种操作命令。 Redis 的特点如下: 内存存储&#xf…

【C++】多线程的学习笔记(2)——白话文版(bushi

目录 前一篇 本章内容提要 使用mutex锁的原因 mutex锁的概念 mutex的使用教程 锁的声明以及命名 mutex的加锁以及解锁 例子 结果 注意 mutex的其他方式的锁介绍 lock_guard 介绍 例子 运行结果 adopt_lock参数 unique_lock 介绍 try_to_lock defer_lock re…

堆排序——向下调整

之前我们要想实现堆排序,是运用建堆代码来实现的: 向上调整建堆——向下调整排序 那么去我们可不可以只适用一种调整方法(向下调整)就能实现这样的功能呢? 向要只使用向下调整就实现堆排序 首先就是把数组里的值使用…

Linux--socket编程

socket套接字编程 一、服务器和客户端的开发步骤: 1、创建套接字 2、为套接字添加信息(ip地址和端口号) 3、监听网络连接 4、监听到有客户端接入,接受连接(如没有接入,会发生阻塞到) 5、数据…

导出视频里的字幕

导出视频里的字幕 如何利用剪映快速提取并导出视频里的字幕 https://jingyan.baidu.com/article/c35dbcb0881b6fc817fcbcd2.html 如何快速提取视频中的字幕?给大家介绍一种简单高效又免费的提取方法。需要利用到“剪映”,以下是具体的操作步骤和指引&a…

第2篇 机器学习基础 —(1)机器学习方式及分类、回归

前言:Hello大家好,我是小哥谈。机器学习是一种人工智能的分支,它使用算法和数学模型来使计算机系统能够从经验数据中学习和改进,而无需显式地编程。机器学习的目标是通过从数据中发现模式和规律,从而使计算机能够自动进…

SpringMVC(二)@RequestMapping注解

我们先新建一个Module。 我们的依赖如下所示&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaL…

Is This The Intelligent Model(这是智能模型吗)

Is This The Intelligent Model 这是智能模型吗 Ruoqi Sun Academy of Military Science Defense Innovation Institute, Beijing, 100091, China E-mail: ruoqisun7163.com The exposed models are called artificial intelligent models[1-3]. These models rely on knowled…

LOD1.3快速构建 | 多源数据自动化作业、图元和体块模型快速编辑、智能纹理贴图...

2023年&#xff0c;自然资源部先后发布了《实景三维中国建设总体实施方案&#xff08;2023—2025年&#xff09;》、《实景三维中国建设城市三维模型快速构建技术规定&#xff08;征求意见稿&#xff09;》等文件&#xff0c;明确提出&#xff0c;2024年底完成城市三维模型&…