6月24日晚19点，OpenTiny B站直播间等你来看~

在前端开发中，div 元素的 style 属性（内联样式）可以使用单引号，但需要遵循 HTML 和 JavaScript 的语法规则。以下是具体说明和示例：1. HTML 中的 style 属性在 HTML 中，属性值默认用双引号包裹，但如果你需要在属性值内使用双引号，可以用单引号包裹整个 style 值，或者对双引号进行转义。示例 1：单引号包裹样式值<div style='color: red; font-size: 16px;'>内容</div> 合法：单引号包裹整个 style 值，内部用分号分隔样式规则。示例 2：双引号包裹样式值（更常见）<div style="color: red; font-size: 16px;">内容</div> 更推荐：HTML 中通常用双引号包裹属性值，样式规则内部用分号分隔。注意事项：如果样式值本身包含单引号，需要转义或改用双引号：<div style="font-family: 'Times New Roman';">内容</div> <!-- 或 --> <div style='font-family: "Times New Roman";'>内容</div> 2. JavaScript 动态设置 style在 JavaScript 中，字符串可以用单引号或双引号，但需注意嵌套引号的转义。示例 1：单引号字符串element.style = 'color: red; font-size: 16px;'; 示例 2：双引号字符串element.style = "color: red; font-size: 16px;"; 示例 3：混合引号（需转义）element.style = "font-family: 'Arial';"; // 合法 element.style = 'font-family: "Arial";'; // 合法 3. CSS-in-JS 或模板字符串（如 React）在 React 或 Vue 等框架中，模板字符串（反引号 `）可以方便地嵌入多行样式：React 示例：<div style={{ color: 'red', fontSize: '16px' }}>内容</div> // 或动态样式： <div style={`color: ${textColor}; font-size: 16px;`}>内容</div> 总结HTML 中：style 属性值可以用单引号或双引号包裹，但需注意嵌套引号的转义。JavaScript 中：字符串引号可自由选择，但需保持一致性。推荐做法：在 HTML 中优先使用双引号包裹属性值，样式规则内部用分号分隔；在 JavaScript 中根据团队规范选择单/双引号。单引号完全合法，但需确保代码风格统一！

5月22日晚19点资深全栈开发者小雨老师将带来《从新手到贡献者：手把手教你融入开源生态》的直播分享，欢迎大家一起加入OpenTiny直播间

连续3天！前端15大导师齐上阵！5月12日起，OpenTiny开源之夏项目宣讲会等你来看~助你赢取活动奖金

TinyVue是一个跨端跨框架的企业级UI组件库，基于renderless无渲染组件设计架构，实现了一套代码同时支持Vue2和Vue3，支持PC和移动端，包含100多个功能丰富的精美组件，可帮助开发者高效开发Web应用。  4月28日晚19点，泽瑞科技前端架构师、鸿蒙开源布道师、阿里友盟KOL将为大家分享如何基于TinyVue组件库定制企业级UI体系，欢迎大家进入直播间一起讨论

TinyVue是一个跨端跨框架的企业级UI组件库，基于renderless无渲染组件设计架构，实现了一套代码同时支持Vue2和Vue3，支持PC和移动端，包含100多个功能丰富的精美组件，可帮助开发者高效开发Web应用。4月22日19点，云计算高级前端开发工程师，TinyVue 项目成员郑志超、申君健老师，将为大家分享 TinyVue 多端模板与模式切换，并与大家介绍 TinyVue 轻量图标库的使用。本次直播将围绕 TinyVue 的最新版本展开。首先，为大家介绍 TinyVue 多端模板架构，接着为大家讲解 Mobile-First 多端模板用法，并通过实际案例向大家演示 UI 效果对比，当然还有图标库分享等着大家。同时，直播过程中还会设置技术答疑环节，欢迎大家积极提问，我们将现场为大家答疑解惑。无论你是技术大牛，还是初学者，相信这场直播都会让你收获满满！直播详情直播时间：2025年4月22日19点直播地址：http://live.bilibili.com/31174756直播讲师：云计算高级前端开发工程师 郑志超、云计算高级前端开发工程师 申君健直播议题：TinyVue多端能力及深色模式介绍TinyVue轻量图标库分享关于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、TinyEditor~ 如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~

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 开始搭建一个订单管理模块，尽量模拟真实业务场景，包含前后端，支持订单的增删改查、文件上传等常用场景，麻雀虽小、五脏俱全。  

 OpenTiny企业级前端开发解决方案，正在寻找热爱分享的技术达人！加入我们的直播讲师团，与众多开发者一起分享你的经验，推动技术普惠，同时打造个人技术影响力！报名链接：https://www.wjx.cn/vm/tw7FOgC.aspx# 

低代码引擎使能开发者定制低代码平台。它是低代码平台的底座，提供可视化搭建页面等基础能力，既可以通过线上搭配组合，也可以通过 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标签，一起参与开源贡献~

OpenTiny 2024 年年度榜单新鲜出炉，一起看看榜上有没有你吧！2025 年 OpenTiny 开源社区也欢迎朋友们一起参与共建~ 

携手共创，致敬不凡！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标签，一起参与开源贡献~