当前位置: 首页 > news >正文

前端低代码必备:FrontendBlocks 4.0版本重磅发布,助力Uniapp-X原生APP开发

项目介绍

本软件是一款强大的所见即所得前端页面设计器,是低代码开发领域的基础设施,生成的代码不依赖于任何框架,实测可以将前端布局工作的耗时减少80%以上,最关键的是,它实现了人人都可以写前端页面的梦想。
不用写一行代码即可让设计师、前端开发人员轻松设计出前端代码的利器,100%还原设计稿不再是梦。对于Uniapp开发非常友好,可以快速生成组件和页面。
本软件可以生成HTML5代码、按2x生成手机端VUE代码、按1x生成电脑端VUE代码,也可以直接生成JSON串,供其他开发工具(包括自主研发的)进行二次加工。
本软件采用Apache 2.0协议开源,可以免费商用。如有任何问题欢迎反馈,让我们共同建设好该开源项目。突出代码贡献者将会把名字写入README.md中,欢迎贡献。
简而言之:本项目主要用于快速布局,特别适用于个性化定制时的开发,帮你快速把页面的骨架搭出来,摆脱那些琐碎的CSS样式,专注于业务。
当然它也有不适用的场景:大量依赖ElementUI、AndDesign等第三方库的项目。如果你要做一个互联网应用,比如APP、小程序、H5应用、HTML单页,甚至是PC端结构特别复杂的布局时,它就非常有用了。

更新日志

4.0版本支持将设计稿生成为Uniapp-X的uvue代码,可以被直接编译成原生Android(Kotlin)、iOS(Swift)、鸿蒙(ArtTs)代码。不得不说,Uniapp-X是真的很牛,强烈推荐

项目仓库位置

官网
https://www.yumeisoft.com/h-col-149.html

仓库位置
https://gitcode.com/yumeisoft/frontend-blocks

视频教程
https://edu.csdn.net/course/detail/38322

范例

首先像在原型设计软件里一样去设计页面的样式、弹性布局、对齐、元素表达,只需点一点即可
在这里插入图片描述
点击生成Uniapp-X手机端
在这里插入图片描述
生成的代码非常规整
在这里插入图片描述
运行后效果
在这里插入图片描述
开发者选项开启布局边界显示后可以明显看到是由一个一个组件构成的(注:这是Uniapp-X的能力),而非整体是个WebView
在这里插入图片描述
通过查看中间代码index.kt,可以明显看到已经编译成了Kotlin语言
在这里插入图片描述

相关文章:

前端低代码必备:FrontendBlocks 4.0版本重磅发布,助力Uniapp-X原生APP开发

项目介绍 本软件是一款强大的所见即所得前端页面设计器,是低代码开发领域的基础设施,生成的代码不依赖于任何框架,实测可以将前端布局工作的耗时减少80%以上,最关键的是,它实现了人人都可以写前端页面的梦想。 不用写…...

如何将PyCharm 中使用 PDM 管理的 Django 项目迁移到 VS Code 并确保一切正常工作?

嗨,我是兰若姐姐,相信很多小伙伴都遇到过这种情况,使用pycharm用习惯了,想换个编辑器,比如换成vscode,今天就告诉大家,如果轻松切换到vscode 步骤 1:在 VS Code 中打开项目 打开 V…...

认识Android Handler

“Android Handler” 通常指的是 Android 开发中的 Handler 类,它是 Android SDK 的一部分,用于管理消息队列和线程之间的通信。它在 Android 开发中非常有用,特别是在计划消息和可运行对象(Runnables)在未来某个时间点…...

如何在 Ubuntu VPS 上安装 Cassandra 并运行单节点集群

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 介绍 Cassandra,或者说 Apache Cassandra,是一个高度可扩展的开源数据库系统,在多节点设置上能够实…...

Golang | Leetcode Golang题解之第316题去除重复字母

题目&#xff1a; 题解&#xff1a; func removeDuplicateLetters(s string) string {left : [26]int{}for _, ch : range s {left[ch-a]}stack : []byte{}inStack : [26]bool{}for i : range s {ch : s[i]if !inStack[ch-a] {for len(stack) > 0 && ch < stack…...

pxe的实验

首先搭好实验环境、 如果没有安装好图形&#xff0c;则需要用yum groups list找到有“GUI”的然后用yum groups " " 把含有GUI的复制到双引号里安装 然后再执行init 5 打开图形 Kickstart 如果dnf用不了改成yum 然后在用yum install httpd -y 安装好http的软件 之后…...

复杂智能软件系统开发

软件开发技术总是伴随着计算技术的时代问题向前发展,随着智能计算时代的到来,软件界需要回应智能软件开发的问题。 大型机时代,软件开发的主要问题是软件开发的效率和质量问题,用机器指令或汇编语言编写软件,效率低、质量差。随着高级程序设计语言的出现及其自动编译技术…...

kickstart自动安装脚本

当安装Linux操作系统时&#xff0c;安装过程会需要回答很多关于设定的问题 这些问题必须手动选择&#xff0c;否则无法进行安装。当只安装1台Linux系统&#xff0c;手动选择设定工作量比较轻松&#xff0c;当安装多台Linux&#xff0c;这些设定需要重复多次&#xff0c;这些重复…...

linux运维一天一个shell命令之grep详解

一、概念 grep 是 Linux 和 Unix 系统中一个非常常用的命令行工具&#xff0c;用于搜索文本文件中的特定模式。它支持正则表达式&#xff0c;并能在文件中快速查找匹配的行 二、正则表达式 1.概念 正则表达式&#xff08;Regular Expressions&#xff0c;简称 regex 或 reg…...

COMSOL金属氢化物-放氢过程

在此记录下放氢过程的软件设置思路 1、采用的是"达西定律""层流" 物理场&#xff0c;其中"层流"物理场选择了”弱可压缩流动“&#xff0c;这里主要是选择”可压缩流动“的话&#xff0c;算出来的瞬时流量值跟实测差距太大了。 2、设置"达西…...

(四)软件性能测试

1. 性能测试包含的方法有哪些&#xff08;至少列举5种&#xff09;&#xff1f; 正确回答通过率&#xff1a;69.0%[ 详情 ] 推荐指数&#xff1a; ★★★★★ 试题难度&#xff1a; 中级 性能测试大致分为以下六类 1、验收性能测试&#xff1a; 通过模拟生产运行的业务压力量…...

萱仔大模型学习记录5-langchain实战

前面我的bertlora微调已经跑出了不错的结果&#xff0c;我也学会了如何在bert上使用Lora进行微调&#xff0c;我后续会补充一个医疗意图识别的项目于这个系列&#xff0c;现在这个医疗意图识别代码还暂时不准备公开。我就继续按照我的计划学习一番LangChain。 LangChain是一个用…...

安装使用netron

1.安装netron pip install netron2.使用以下命令,然后打开浏览器查看。 netron netron --host 0.0.0.0 --port 6780 netron "model_path" --host 0.0.0.0 --port 67803.在jupyterlab中使用 github有人推荐的方法&#xff0c;jupyterlab部署在本地的可以用…...

JDFrame 一款比 Java 8 Stream 更灵活的数据处理工具

一、JDFrame 介绍 在大数据处理领域&#xff0c;Apache Spark以其强大的分布式计算能力和丰富的数据处理API而广受好评。然而&#xff0c;在许多日常的软件开发场景中&#xff0c;我们面临的数据量可能并不需要Spark这样的分布式系统来处理。相反&#xff0c;我们更希望有一种…...

《Android系统开发中高级定制专栏导读》

《Android系统开发中高级定制专栏导读》 欢迎来到【Android系统开发中高级定制‘】专栏&#xff01;在这里&#xff0c;将深入探讨Android系统开发与定制的方方面面&#xff0c;涵盖从系统接口定制、权限管理、系统应用配置、驱动入门配置等多个领域。无论你是刚接触Android系…...

LeetCode 114. 二叉树展开为链表

更多题解尽在 https://sugar.matrixlab.dev/algorithm 每日更新。 组队打卡&#xff0c;更多解法等你一起来参与哦&#xff01; LeetCode 114. 二叉树展开为链表&#xff0c;难度中等。 DFS 解题思路&#xff1a;先用 DFS 遍历二叉树&#xff0c;将树的结果存放在 List 中&am…...

78.子集

给你一个整数数组 nums &#xff0c;数组中的元素 互不相同 。返回该数组所有可能的子集&#xff08;幂集&#xff09;。 解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 &#xff1a;总 // 注释的都为后来思考不必要的 class Solution {List<List<Integer…...

历史标签如何时间迁移?

本文解析的论文是&#xff1a; Lin, C.; Du, P.; Samat, A.; Li, E.; Wang, X.; Xia, J. Automatic Updating of Land Cover Maps in Rapidly Urbanizing Regions by Relational Knowledge Transferring from GlobeLand30. Remote Sens. 2019, 11, 1397. https://doi.org/10.33…...

Jenkins参数化构建

目录 一. 准备ansible 二. Gitlab新建子项目 三. Jenkins建立任务&#xff0c;进行初步配置 四. 导入nginx主机的公钥 五. 配置ansible执行脚本 六. 构建测试 一. 准备ansible 在jenkins主机中安装ansible [rootjenkins ~]# yum install -y epel-release [rootjenkins…...

函数实例讲解(三)

文章目录 常用的三个数学函数1、绝对值函数ABS2、取整数部分INT3、求余数函数MOD 求极值函数max、min1、Max2、Min 附加条件下求平均数1、AVERAGE2、AVERAGEIF3、AVERAGEIFS VLOOKUP与COLUMN1、VLOOKUP2、COLUMN 查找函数LOOKUP1、基础语法2、向量形式3、数组形式 常用的三个数…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

如何更改默认 Crontab 编辑器 ?

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...