-
TinyEngine 低代码引擎使能开发者定制低代码平台。它是低代码平台的底座,提供可视化搭建页面等基础能力,既可以通过线上搭配组合,也可以通过创建cli工程进行二次开发,实时定制出自己的低代码平台。适用于多场景的低代码平台开发,如:资源编排、服务端渲染、模型驱动、移动端、大屏端、页面编排等。社区贡献者观默评价它:“基于 Vue3,利用 DSL 实现从 schema 生成源码,支持多框架集成,且拥有强大的插件系统,能实现各种定制化开发的需求”。如果你正在寻找一款趁手的低代码引擎或者你对低代码开发感兴趣,那你不妨来试试 TinyEngine。本期直播将通过实战分享,手把手带你完成项目搭建、组件库部署与注册并开发一款简单的插件。直播详情:
-
给Web开发者的HarmonyOS指南02-布局样式本系列教程适合鸿蒙 HarmonyOS 初学者,为那些熟悉用 HTML 与 CSS 语法的 Web 前端开发者准备的。本系列教程会将 HTML/CSS 代码片段替换为等价的 HarmonyOS/ArkUI 代码。开发环境准备DevEco Studio 5.0.3HarmonyOS Next API 15布局基础对比在Web开发中,我们使用CSS来控制元素的布局和样式。而在HarmonyOS的ArkUI中,我们使用声明式UI和链式API来实现相同的效果。本文将对比两种框架在布局方面的异同。盒子模型在Web开发中,CSS盒子模型包含内容(content)、内边距(padding)、边框(border)和外边距(margin)。在ArkUI中,这些概念依然存在,只是写法有所不同,容易上手。HTML/CSS代码:<div class="box"> 盒子模型 </div> <style> .box { box-sizing: border-box; /* 内容 */ width: 150px; height: 100px; /* 内边距 */ padding: 10px; /* 边框 */ border: 10px solid pink; /* 底部外边距 */ margin-bottom: 10px; } </style> ArkUI代码:Text('盒子模型') .width(150) .height(100) .padding(10) .border({ width: 10, style: BorderStyle.Solid, color: Color.Pink }) .margin({ bottom: 10 }) 背景色和文字颜色在Web开发中,我们使用 background-color 和 color 属性来设置背景色和文字颜色。在ArkUI中,我们使用 backgroundColor 和 fontColor 方法。HTML/CSS代码:<div class="box"> 背景色、文字色 </div> <style> .box { /* 背景色 */ background-color: #36d; /* 文字色 */ color: #fff; } </style> ArkUI代码:Text('背景色、文字色') .backgroundColor('#36d') .fontColor('#fff') 内容居中在Web开发中,我们使用 display: flex 配合 justify-content 和 align-items 实现内容居中。在ArkUI中,我们可以使用 Column 或 Row 组件配合 justifyContent 和 alignItems 属性。HTML/CSS代码:<div class="box"> 内容居中 </div> <style> .box { display: flex; justify-content: center; align-items: center; } </style> ArkUI代码:Column() { Text('内容居中') } .backgroundColor('#36D') .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) .width(150) .height(100) .padding(10) 圆角在Web开发中,我们使用border-radius属性来设置圆角。在ArkUI中,我们使用borderRadius方法。HTML/CSS代码:<div class="box"> 圆角 </div> <style> .box { border-radius: 10px; } </style> ArkUI代码:Text('圆角') .width(150) .height(100) .backgroundColor('#36D') .borderRadius(10) 阴影效果在Web开发中,我们使用box-shadow属性来设置阴影效果。在ArkUI中,我们使用shadow方法。HTML/CSS代码:<div class="box"> 阴影 </div> <style> .box { box-shadow: 0 6px 50px rgba(0, 0, 0, 0.5); } </style> ArkUI代码:Text('阴影') .width(150) .height(100) .backgroundColor('#F5F5F5') .shadow({ offsetX: 0, offsetY: 6, radius: 50, color: 'rgba(0, 0, 0, 0.5)', }) 布局容器和轴向基本容器在Web开发中,我们使用<div>作为通用容器。在ArkUI中,我们主要使用Column和Row组件,注意 alignItems 需区分轴向。HTML/CSS代码:<div class="column"> <!-- 垂直方向布局 --> </div> <div class="row"> <!-- 水平方向布局 --> </div> <style> .column { display: flex; flex-direction: column; align-items: center; } .row { display: flex; flex-direction: row; align-items: center; } </style> ArkUI代码:Column() { // 垂直方向布局,交叉轴水平居中 } .alignItems(HorizontalAlign.Center) Row() { // 水平方向布局,交叉轴垂直居中 } .alignItems(VerticalAlign.Center) 关键区别总结样式应用方式:HTML/CSS:使用选择器和属性声明样式ArkUI:使用链式API直接在组件上设置样式布局容器:HTML:使用 <div> 等标签,配合CSS实现布局ArkUI:使用专门的布局组件如 Column、Row 等组件,配合样式属性布局单位使用:HTML/CSS:使用 px、em、rem、百分比等单位ArkUI:使用 px、vp、lpx 、百分比等单位,使用数字单位 vp 可省略样式继承:HTML/CSS:通过CSS选择器实现样式继承ArkUI:没有样式继承学习建议理解链式API:熟悉ArkUI的链式API调用方式掌握常用样式方法的命名规则布局思维转变:从CSS盒模型思维转向组件化思维理解ArkUI的布局容器特性样式设置习惯:养成使用链式API设置样式的习惯注意样式方法的参数格式组件嵌套:合理使用组件嵌套实现复杂布局注意组件的父子关系总结作为Web开发者,迁移到 HarmonyOS 开发需要适应新的布局和样式设置方式。概念其实非常相似,通过理解这些差异,并掌握ArkUI的组件化开发方式,Web开发者可以快速上手HarmonyOS开发。希望这篇 HarmonyOS 教程对你有所帮助,期待您的 👍点赞、💬评论、🌟收藏 支持。
-
给Web开发者的HarmonyOS指南01-文本样式本系列教程适合 HarmonyOS 初学者,为那些熟悉用 HTML 与 CSS 语法的 Web 前端开发者准备的。本系列教程会将 HTML/CSS 代码片段替换为等价的 HarmonyOS/ArkUI 代码。开发环境准备DevEco Studio 5.0.3HarmonyOS Next API 15页面结构 HTML 与 ArkUI在 Web 开发中,HTML 文档结构由<html>、<head>和<body>等标签组成,其中<body>标签包含了页面中所有可见的内容。而在 HarmonyOS 的 ArkUI 框架中,使用@Entry和@Component装饰器定义组件,并通过build()方法定义页面内容。基本结构对比HTML文档结构:<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>页面标题</title> </head> <body> <!-- 页面内容放这里 --> </body> </html> ArkUI组件结构:@Entry @Component struct MyComponent { build() { // 页面内容放这里 } } 文本处理对比在Web开发中,我们习惯使用各种HTML标签来表示不同语义的文本内容,例如标题、段落、强调等。而在HarmonyOS的ArkUI中,文本处理方式有所不同,主要依赖 Text 组件和 Span 组件。基本概念对比HTML概念HarmonyOS/ArkUI概念语义化标签 (h1-h6, p等)无需语义化标签,统一使用Text组件标签嵌套组件链式调用和嵌套样式通过CSS设置样式通过链式API设置内联样式直接在组件后链式调用样式方法文本显示对比下面通过具体示例对比HTML和ArkUI的文本显示方式:1. 标题和段落HTML代码:<h1>我是一级标题</h1> <h2>我是二级标题</h2> <h3>我是三级标题</h3> <h4>我是四级标题</h4> <h5>我是五级标题</h5> <h6>我是六级标题</h6> <p>我是一个段落<br>我被换行了</p> ArkUI代码:// 鸿蒙系统中没有语义化标签的概念 // 所有文本都使用Text组件,通过样式区分不同级别 Text('我是一级标题') .fontSize(32) // 通过字体大小区分标题级别 .fontWeight(FontWeight.Bold) Text('我是二级标题') .fontSize(24) .fontWeight(FontWeight.Bold) // 以此类推... // 段落和换行 Text('我是一个段落\n我被换行了') // 注意:在ArkUI中使用\n实现换行,而不是<br>标签 2. 文本样式HTML代码:<p>我是<strong>加粗</strong>的</p> <p>我是<em>倾斜</em>的</p> <p>我是<del>删除线</del>的</p> <p>我是<ins>下划线</ins>的</p> ArkUI代码:// 在ArkUI中,样式化的文本使用Text和Span组合实现 Text() { Span('我是') Span('加粗') .fontWeight(FontWeight.Bold) // 对应HTML的<strong> Span('的文本') } Text() { Span('我是') Span('倾斜') .fontStyle(FontStyle.Italic) // 对应HTML的<em> Span('的文本') } Text() { Span('我是') Span('删除线') .decoration({ type: TextDecorationType.LineThrough }) // 对应HTML的<del> Span('的文本') } Text() { Span('我是') Span('下划线') .decoration({ type: TextDecorationType.Underline }) // 对应HTML的<ins> Span('的文本') } 布局容器在HTML中,我们使用 <div> 作为通用容器来组织内容。在ArkUI中,主要使用 Column 和 Row 等容器。HTML代码:<div class="column"> <!-- 内容放这里 --> </div> <style> * { margin: 0; padding: 0; /* 为了与 ArkUI 盒子模型保持一致,所有 HTML 元素的 CSS 盒模型被设置为 border-box */ box-sizing: border-box; } .column{ display: flex; flex-direction: column; gap: 10px; width: 100%; height: 100%; align-items: center; } </style> ArkUI代码:// 默认为纵向排列的容器,类似于CSS的flex-direction: column Column({ space: 10 }) { // space参数设置子组件之间的间距,类似CSS的gap // 内容放这里 } .width('100%') // 设置宽度,链式API调用 .height('100%') // 设置高度 .alignItems(HorizontalAlign.Center) // 水平对齐方式,类似CSS的align-items 关键区别总结组件化思维:HTML使用标签表示不同语义ArkUI使用组件表示UI元素,不强调语义样式应用方式:HTML/CSS分离内容和样式ArkUI使用链式API直接在组件上设置样式布局方式:HTML依赖CSS盒模型和FlexboxArkUI内置容器组件如Column、Row实现布局语法结构:HTML使用开闭标签和属性ArkUI使用TypeScript语法和方法链学习建议理解组件化思维:将HTML标签概念转变为组件概念掌握ArkUI基础组件:Text:文本组件Span:文本片段Column:纵向容器Row:横向容器链式API调用习惯:样式设置通过链式方法调用而非CSS属性布局思维转变:使用容器组件的嵌套来实现复杂布局总结作为Web开发者,迁移到HarmonyOS开发需要转变思维模式,从标签和CSS的分离到组件和链式API的结合。虽然语法不同,但概念是相通的。只要掌握了基本对应关系,Web开发者能够快速适应HarmonyOS开发。希望这篇 HarmonyOS Next 教程对你有所帮助,期待您的 👍点赞、💬评论、🌟收藏 支持。
-
TinyPro 是一个开源的开发框架,用项目作者曾令卡的话来说,“可能没有那么高大上,但是很实用”。只需要一行命令,就能用它搭建一个包含前后端的后台管理系统,非常适合缺乏专业开发人员的公司使用。TinyPro 使用最新技术栈,前端基于 Vue3+TypeScript,后端基于 NestJS,支持组件粒度的权限管理、页签模式、多级菜单、多种布局方式、个性化主题、国际化、Mock 数据等丰富的特性,开箱即用。 此外,还支持在线方式快速配置角色、用户、菜单、权限、国际化词条,无需写代码,用户使用成本低,没有开发基础的设计师、产品经理也能操作。TinyPro 支持多种构建工具,如 Vite、Webpack、Rspack、Farm 等,开发者友好。对该项目感兴趣的朋友,3 月 28 日,来开源中国的视频号“OSC开源社区”直播间以及OpenTiny的“OpenTiny社区”B站直播间,手把手教你基于 TinyPro,从 0 开始搭建一个订单管理模块,尽量模拟真实业务场景,包含前后端,支持订单的增删改查、文件上传等常用场景,麻雀虽小、五脏俱全。
-
低代码引擎使能开发者定制低代码平台。它是低代码平台的底座,提供可视化搭建页面等基础能力,既可以通过线上搭配组合,也可以通过 cli 创建个人工程进行二次开发,实时定制出自己的低代码平台。适用于多场景的低代码平台开发,如:资源编排、服务端渲染、模型驱动、移动端、大屏端、页面编排等。3月6日19点,云计算前端开发工程师,TinyEngine 项目成员胡靖老师,将为大家分享 TinyEngine 低代码引擎 v2.2 版本更新情况。本次直播将围绕 TinyEngine 的最新版本展开。首先,会为大家带来版本更新亮点的概览,让大家快速了解本次更新的精彩之处;接着,将深入解析备受瞩目的嵌套路由特性,带大家一探究竟;当然,除了嵌套路由,本次更新还有许多其他新特性和优化,也会一一为大家介绍,让大家全面了解新版本的强大之处。最后,还为大家准备了升级指南,帮助大家轻松完成版本升级,同时,直播过程中还会设置技术答疑环节,欢迎大家积极提问,我们将现场为大家答疑解惑。无论你是技术大牛,还是初学者,相信这场直播都会让你收获满满!直播详情直播主题直播分享:TinyEngine 低代码引擎 v2.2 版本特性介绍直播亮点1. 版本更新亮点概览2. 嵌套路由特性深度解析3. 其他新特性与优化介绍4. 升级指南与技术答疑直播讲师胡靖,云计算前端开发工程师,TinyEngine团队成员直播时间2025年3月6日19点——19点45分直播地址线上:http://live.bilibili.com/31174756关于OpenTiny欢迎加入 OpenTiny 开源社区。添加微信小助手:opentiny-official 一起参与交流前端技术~OpenTiny 官网:https://opentiny.designOpenTiny 代码仓库:https://github.com/opentinyTinyVue 源码:https://github.com/opentiny/tiny-vueTinyEngine 源码: https://github.com/opentiny/tiny-engine欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~ 如果你也想要共建,可以进入代码仓库,找到 good first issue标签,一起参与开源贡献~
-
🎉 欢迎参与2025年 OpenTiny 开源社区用户调研征集 🎉📣 调研背景随着 OpenTiny 开源项目的不断发展,我们一直致力于为开发者提供高质量的 Web 前端开发解决方案。为了更好地满足用户需求,提升项目的实用性和易用性,我们决定发起一项用户调研活动,诚挚邀请您参与。🔍 调研目的了解用户需求:收集您在使用 OpenTiny 开源项目过程中的需求、问题和建议,以便我们更好地改进和优化。提升用户体验:通过您的反馈,我们将找出项目中的不足,并努力提升项目的性能、稳定性和易用性。促进社区发展:您的参与和建议将有助于 OpenTiny 开源项目的成长和发展,共同构建一个繁荣的开源社区。📋 调研内容您目前使用的开源项目。您对OpenTiny 文档教程的诉求。您对 OpenTiny 项目的期望和改进建议。您希望我们在未来版本中增加或优化的功能。💡 如何参与填写问卷:进入https://www.wjx.cn/vm/rsK8GO1.aspx (或扫描二维码)填写我们的调研问卷,分享您的想法和建议。参与讨论:加入我们的开源社区[添加小助手:opentiny-official],在指定的讨论区发表您的看法和建议。🎁 奖励机制所有参与调研的用户都将获得 OpenTiny 官方颁发的电子感谢证书。部分优秀建议的提交者并参与贡献的朋友将获得 OpenTiny 项目的特别贡献者荣誉。🔗 联系方式如有任何疑问或建议,请随时通过以下方式与我们联系:邮箱:opentiny@huawei.comGitHub仓库:https://github.com/opentiny加入社区:opentiny-official💖 感谢您的参与您的宝贵意见对于 OpenTiny 开源项目的成长至关重要。我们期待收到您的反馈,并共同努力打造一个更加优秀的开源 Web 前端开发解决方案!关于OpenTiny欢迎加入 OpenTiny 开源社区。添加微信小助手:opentiny-official 一起参与交流前端技术~OpenTiny 官网:https://opentiny.designOpenTiny 代码仓库:https://github.com/opentinyTinyVue 源码:https://github.com/opentiny/tiny-vueTinyEngine 源码: https://github.com/opentiny/tiny-engine欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~ 如果你也想要共建,可以进入代码仓库,找到 good first issue标签,一起参与开源贡献~
-
携手共创,致敬不凡!2024年,OpenTiny持续在前端开源领域扎根,每一位开发者都是推动项目共同前行的宝贵力量。从bug修复,到技术探讨;从参与开源活动,到输出技术文章;从使用项目,到参与共建,每一步跨越,都凝聚了开发者的智慧与汗水。致敬所有在OpenTiny社区里默默付出、积极贡献、引领创新的杰出个人,我们正式启动"OpenTiny年度贡献者评选"活动!快为你喜爱的人气贡献者投票吧~人气贡献者评选名单公布:年度贡献者投票评选时间:2024年12月25日-2024年12月31日投票规则:每人每天可回答3次,每次最多可投2票,最终投票结果选取前5名投票入口:cid:link_2 关于OpenTiny欢迎加入 OpenTiny 开源社区。添加微信小助手:opentiny-official 一起参与交流前端技术~OpenTiny 官网:cid:link_4OpenTiny 代码仓库:cid:link_3TinyVue 源码:cid:link_1TinyEngine 源码: cid:link_0欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~ 如果你也想要共建,可以进入代码仓库,找到 good first issue标签,一起参与开源贡献~
-
携手共创,致敬不凡!2024年,OpenTiny持续在前端开源领域扎根,每一位开发者都是推动项目共同前行的宝贵力量。从bug修复,到技术探讨;从参与开源活动,到输出技术文章;从使用项目,到参与共建,每一步跨越,都凝聚了开发者的智慧与汗水。致敬所有在OpenTiny社区里默默付出、积极贡献、引领创新的杰出个人,我们正式启动“OpenTiny年度贡献者评选”活动!欢迎各位开发者踊跃报名~活动详情活动简介: 本次活动主要是通过社区评选+开发者投票形式开展,入选开发者后续可获得相应活动礼品。本次活动一共设置 4 类奖项。“人气共建者”、“人气创作者”、“社区活跃达人” 三类奖项通过投票评选获奖选手,本次投票共选出 5 名获奖选手。按照名次顺序依次给予相应奖励。“优秀共建者”则由社区自主根据实际情况评选 2-3 位,获得 FreeBuds6i 蓝牙耳机及荣誉证书活动奖品:活动时间:年度贡献者征集时间:2024年12月19日-2024年12月24日年度贡献者投票评选时间:2024年12月25日-2024年12月31日报名入口:cid:link_2 关于OpenTiny欢迎加入 OpenTiny 开源社区。添加微信小助手:opentiny-official 一起参与交流前端技术~OpenTiny 官网: cid:link_4OpenTiny 代码仓库: cid:link_3TinyVue 源码: cid:link_1TinyEngine 源码: cid:link_0欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~ 如果你也想要共建,可以进入代码仓库,找到 good first issue标签,一起参与开源贡献~
-
2024华为云开源开发者论坛重磅来袭!大会以“开放创新,释放云上生产力”为主题,融合AI、Serverless、前端、时序数据库、边缘计算、批量调度等多个维度,协助生态合作伙伴、企业、个人和高校开发者通过开源力量打造多场景多领域,提升技术活力及产业生产力。本次前端技术论坛汇聚7位行业专家,精心准备7个专题分享。议题内容深入业务,聚焦实践,希望与开发者共同探讨在业务选型/业务开发过程中所遇到的问题及解决方案。与开发者一同打开新思路,碰撞思想火花,共绘前端未来。活动亮点:1、行业大牛齐聚一堂:本次前端技术分论坛汇聚组件库、低代码、图表库等多个行业专家,同时包含开源项目企业合作伙伴、技术总监等,帮助开发者带来前沿开源前端技术分享,揭秘项目中的开发故事,与大家进行深入地互动交流2、实战案例重点分析:除了理论探讨,实践经验也是必不可少,本次前端分论坛设计了丰富地实战案例分享环节。来自一线开发团队的专家们将分享他们在项目中遇到的挑战及解决方案,帮助大家更好地将前端开源技术应用到实际工作中。3、开源项目发版解读本次技术论坛,TinyEngine重磅发布2.0版本,TinyCharts也将带来复杂图表库引擎的解读。在这里工程师们将展示项目的最新进展,帮助还在做技术选型或者遇到项目开发难题的开发者们拓展新思路。提供更多可能性~4、全天参会,午宴交流:本次论坛活动全天参与,即可与行业大牛深入沟通,一起参与午间聚餐,结识开源小伙伴~活动议程
-
致开发者: 华为云开源开发者论坛将于12月7日(周六)9点30分在上海静安香格里拉酒店正式召开,我们诚挚邀请你报名参与本次线下开发者论坛。报名成功,现场即可领取活动伴手礼,同时中午包含大会午餐。本次活动议题融入AI、Serverless、前端、时序数据库、边缘计算、批量调度等多个维度,大前端技术论坛也将从业务的实际案例出发,与大家共同探讨前端开源技术。因此希望与各位开发者齐聚上海,共赴开源盛典,共筑前端未来。活动报名链接:cid:link_0(欢迎大家扫码或点击链接参与报名~)议程内容如下:
-
低代码引擎使能开发者定制低代码平台。它是低代码平台的底座,提供可视化搭建页面等基础能力,既可以通过线上搭配组合,也可以通过 cli 创建个人工程进行二次开发,实时定制出自己的低代码平台。适用于多场景的低代码平台开发,如:资源编排、服务端渲染、模型驱动、移动端、大屏端、页面编排等。 11 月 21 日 17 点,华为云前端工程师,云计算用户体验部体验技术团队 TinyEngine 项目成员姚赟老师,将为大家带来 #茶思一小时 #TinyEngine 低代码引擎揭秘系列第 6 讲。本期主题为:构建多元共生的生态空间,TinyEngine 生态的融合之道。姚赟老师将带大家了解 TinyEngine 低代码引擎的生态构成、技术架构、生态发展趋势等方向的内容,并通过与大家分享 TinyEngine 的生态协同方式,帮助开发者探索更多低代码发展可能性。直播详情直播主题构建多元共生的生态空间:TinyEngine 生态的融合之道直播亮点直播亮点TinyEngine 生态构成1)TInyEngine 生态概览2)生态中心的技术枢纽3)生态工具链的技术优化4)生态伙伴的技术协同5)生态社区的技术交流TinyEngine 生态技术架构1)schema 协议2)物料资产包协议3)注册表4)原子化TinyEngine 生态发展趋势与未来展望1)生态市场2)AI 辅助开发3)OpenTiny next直播讲师姚赟,华为云前端开发工程师直播时间2024 年 11 月 21 日 17 点——18 点 30 分直播地址线上:http://live.bilibili.com/31174756线下:深圳华为坂田基地 A9 咖啡厅关于 OpenTiny欢迎加入 OpenTiny 开源社区。添加微信小助手:opentiny-official 一起参与交流前端技术~OpenTiny 官网:https://opentiny.design/OpenTiny 代码仓库:https://github.com/opentiny/TinyVue 源码:https://github.com/opentiny/tiny-vueTinyEngine 源码: https://github.com/opentiny/tiny-engine欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~如果你也想要共建,可以进入代码仓库,找到 good first issue 标签,一起参与开源贡献~
-
用的是ArkTs,要求这三个模式不能同时打开,要怎么做
-
谈谈 Vite 与 Webpack 在设计思路上的差异,以及你觉得哪种更好