前端低代码必备: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题去除重复字母
题目: 题解: 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的实验
首先搭好实验环境、 如果没有安装好图形,则需要用yum groups list找到有“GUI”的然后用yum groups " " 把含有GUI的复制到双引号里安装 然后再执行init 5 打开图形 Kickstart 如果dnf用不了改成yum 然后在用yum install httpd -y 安装好http的软件 之后…...
复杂智能软件系统开发
软件开发技术总是伴随着计算技术的时代问题向前发展,随着智能计算时代的到来,软件界需要回应智能软件开发的问题。 大型机时代,软件开发的主要问题是软件开发的效率和质量问题,用机器指令或汇编语言编写软件,效率低、质量差。随着高级程序设计语言的出现及其自动编译技术…...
kickstart自动安装脚本
当安装Linux操作系统时,安装过程会需要回答很多关于设定的问题 这些问题必须手动选择,否则无法进行安装。当只安装1台Linux系统,手动选择设定工作量比较轻松,当安装多台Linux,这些设定需要重复多次,这些重复…...
linux运维一天一个shell命令之grep详解
一、概念 grep 是 Linux 和 Unix 系统中一个非常常用的命令行工具,用于搜索文本文件中的特定模式。它支持正则表达式,并能在文件中快速查找匹配的行 二、正则表达式 1.概念 正则表达式(Regular Expressions,简称 regex 或 reg…...
COMSOL金属氢化物-放氢过程
在此记录下放氢过程的软件设置思路 1、采用的是"达西定律""层流" 物理场,其中"层流"物理场选择了”弱可压缩流动“,这里主要是选择”可压缩流动“的话,算出来的瞬时流量值跟实测差距太大了。 2、设置"达西…...
(四)软件性能测试
1. 性能测试包含的方法有哪些(至少列举5种)? 正确回答通过率:69.0%[ 详情 ] 推荐指数: ★★★★★ 试题难度: 中级 性能测试大致分为以下六类 1、验收性能测试: 通过模拟生产运行的业务压力量…...
萱仔大模型学习记录5-langchain实战
前面我的bertlora微调已经跑出了不错的结果,我也学会了如何在bert上使用Lora进行微调,我后续会补充一个医疗意图识别的项目于这个系列,现在这个医疗意图识别代码还暂时不准备公开。我就继续按照我的计划学习一番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有人推荐的方法,jupyterlab部署在本地的可以用…...
JDFrame 一款比 Java 8 Stream 更灵活的数据处理工具
一、JDFrame 介绍 在大数据处理领域,Apache Spark以其强大的分布式计算能力和丰富的数据处理API而广受好评。然而,在许多日常的软件开发场景中,我们面临的数据量可能并不需要Spark这样的分布式系统来处理。相反,我们更希望有一种…...
《Android系统开发中高级定制专栏导读》
《Android系统开发中高级定制专栏导读》 欢迎来到【Android系统开发中高级定制‘】专栏!在这里,将深入探讨Android系统开发与定制的方方面面,涵盖从系统接口定制、权限管理、系统应用配置、驱动入门配置等多个领域。无论你是刚接触Android系…...
LeetCode 114. 二叉树展开为链表
更多题解尽在 https://sugar.matrixlab.dev/algorithm 每日更新。 组队打卡,更多解法等你一起来参与哦! LeetCode 114. 二叉树展开为链表,难度中等。 DFS 解题思路:先用 DFS 遍历二叉树,将树的结果存放在 List 中&am…...
78.子集
给你一个整数数组 nums ,数组中的元素 互不相同 。返回该数组所有可能的子集(幂集)。 解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 :总 // 注释的都为后来思考不必要的 class Solution {List<List<Integer…...
历史标签如何时间迁移?
本文解析的论文是: 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建立任务,进行初步配置 四. 导入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、数组形式 常用的三个数…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周,有很多同学在写期末Java web作业时,运行tomcat出现乱码问题,经过多次解决与研究,我做了如下整理: 原因: IDEA本身编码与tomcat的编码与Windows编码不同导致,Windows 系统控制台…...
大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用,操作系统:Ubuntu24.04,Neofj版本:2025.04.0。 Apt安装 Neofj可以进行官网安装:Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中,每个页面需要使用ref,onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入,需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端(Windows 使用 Git Bash,Mac/Linux 使用 Terminal)执行命令: ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明: -t rsa&#x…...
Rust 异步编程
Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...
使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析
Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问(基础概念问题) 1. 请解释Spring框架的核心容器是什么?它在Spring中起到什么作用? Spring框架的核心容器是IoC容器&#…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币,另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额,返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
