前端_标签_开发者

博客(3.8k)
视频(3)
论坛(0)
云声(0)
代码示例(0)

[技术干货] freemarker运算符函数等指令

其它指令1.3.2.1 运算符1 、算数运算符 FreeMarker表达式中完全支持算术运算,FreeMarker支持的算术运算符包括:+, - , * , / , %2、逻辑运算符逻辑运算符有如下几个: 逻辑与:&& 逻辑或:|| 逻辑非:! 逻辑运算符只能作用于布尔值,否则将产生错误3 、比较运算符表达式中支持的比较运算符有如下几个: 1 =或者==:判断两个值是否相等. 2 !=:判断两个值是否不等. 3 >或者gt:判断左边值是否大于右边值 4 >=或者gte:判断左边值是否大于等于右边值 5 <或者lt:判断左边值是否小于右边值 6 <=或者lte:判断左边值是否小于等于右边值注意: =和!=可以用于字符串,数值和日期来比较是否相等,但=和!=两边必须是相同类型的值,否则会产生错误,而且FreeMarker是精确比较,"x","x ","X"是不等的.其它的运行符可以作用于数字和日期,但不能作用于字符串,大部分的时候,使用gt等字母运算符代替>会有更好的效果,因为 FreeMarker会把>解释成FTL标签的结束字符,当然,也可以使用括号来避免这种情况,如:<#if (x>y)>1.3.2.2 空值处理1 、判断某变量是否存在使用 “??” 用法为:variable??,如果该变量存在,返回true,否则返回false例：为防止stus为空报错可以加上判断如下： <#if stus??> <#list stus as stu> ...... </#list> </#if>2 、缺失变量默认值使用 “!” 使用!要以指定一个默认值，当变量为空时显示默认值。例： ${name!''}表示如果name为空显示空字符串。如果是嵌套对象则建议使用（）括起来。例： ${(stu.bestFriend.name)!''}表示，如果stu或bestFriend或name为空默认显示空字符串。1.3.2.3 内建函数内建函数语法格式：变量+?+函数名称1 、和到某个集合的大小${集合名?size}2 、日期格式化显示年月日: ${today?date} 显示时分秒：${today?time} 显示日期+时间：${today?datetime} <br> 自定义格式化： ${today?string("yyyy年MM月")}3 、内建函数cmap.put("point", 102920122);point是数字型，使用${point}会显示这个数字的值，不并每三位使用逗号分隔。如果不想显示为每三位分隔的数字，可以使用c函数将数字型转成字符串输出${point?c}4 、将json字符串转成对象一个例子：其中用到了 assign标签，assign的作用是定义一个变量。<#assign text="{'bank':'工商银行','account':'10101920201920212'}" /> <#assign data=text?eval /> 开户行：${data.bank} 账号：${data.account}1.3.2.4 完整的模板上边测试的模板内容如下，可自行进行对照测试。<!DOCTYPE html> <html> <head> <meta charset="utf‐8"> <title>Hello World!</title> </head> <body> Hello ${name}! <br/> <table> <tr> <td>序号</td> <td>姓名</td> <td>年龄</td> <td>钱包</td> </tr> <#list stus as stu> <tr> <td>${stu_index + 1}</td> <td <#if stu.name =='小明'>style="background:red;"</#if>>${stu.name}</td> <td>${stu.age}</td> <td >${stu.mondy}</td> </tr> </#list> </table> <br/><br/> 输出stu1的学生信息：<br/> 姓名：${stuMap['stu1'].name}<br/> 年龄：${stuMap['stu1'].age}<br/> 输出stu1的学生信息：<br/> 姓名：${stu1.name}<br/> 年龄：${stu1.age}<br/> 遍历输出两个学生信息：<br/> <table> <tr> <td>序号</td> <td>姓名</td> <td>年龄</td> <td>钱包</td> </tr> <#list stuMap?keys as k> <tr> <td>${k_index + 1}</td> <td>${stuMap[k].name}</td> <td>${stuMap[k].age}</td> <td >${stuMap[k].mondy}</td> </tr> </#list> </table> </br> <table> <tr> <td>姓名</td> <td>年龄</td> <td>出生日期</td> <td>钱包</td> <td>最好的朋友</td> <td>朋友个数</td> <td>朋友列表</td> </tr> <#if stus??> <#list stus as stu> <tr> <td>${stu.name!''}</td> <td>${stu.age}</td> <td>${(stu.birthday?date)!''}</td> <td>${stu.mondy}</td> <td>${(stu.bestFriend.name)!''}</td> <td>${(stu.friends?size)!0}</td> <td> <#if stu.friends??> <#list stu.friends as firend> ${firend.name!''}<br/> </#list> </#if> </td> </tr> </#list> </#if> </table> <br/> <#assign text="{'bank':'工商银行','account':'10101920201920212'}" /> <#assign data=text?eval /> 开户行：${data.bank} 账号：${data.account} </body> </html>1.3.3 静态化测试在cms中使用freemarker将页面生成html文件，本节测试html文件生成的方法：1 、使用模板文件静态化定义模板文件，使用freemarker静态化程序生成html文件。2 、使用模板字符串静态化定义模板字符串，使用freemarker静态化程序生成html文件。1.3.3.1 使用模板文件静态化在test下创建测试类，并且将main下的resource/templates拷贝到test下，本次测试使用之前我们在main下创建的模板文件。//基于模板生成静态化文件 @Test public void testGenerateHtml() throws IOException, TemplateException { //创建配置类 Configuration configuration=new Configuration(Configuration.getVersion()); //设置模板路径 String classpath = this.getClass().getResource("/").getPath(); configuration.setDirectoryForTemplateLoading(new File(classpath + "/templates/")); //设置字符集 configuration.setDefaultEncoding("utf‐8"); //加载模板 Template template = configuration.getTemplate("test1.ftl"); //数据模型 Map<String,Object> map = new HashMap<>(); map.put("name","高級程序员"); //静态化 String content = FreeMarkerTemplateUtils.processTemplateIntoString(template, map); //静态化内容 System.out.println(content); InputStream inputStream = IOUtils.toInputStream(content); //输出文件 FileOutputStream fileOutputStream = new FileOutputStream(new File("d:/test1.html")); int copy = IOUtils.copy(inputStream, fileOutputStream); }1.3.3.2 使用模板字符串静态化//基于模板字符串生成静态化文件 @Test public void testGenerateHtmlByString() throws IOException, TemplateException { //创建配置类 Configuration configuration=new Configuration(Configuration.getVersion()); //模板内容，这里测试时使用简单的字符串作为模板 String templateString="" + "<html>\n" + " <head></head>\n" + " <body>\n" + " 名称：${name}\n" + " </body>\n" + "</html>"; //模板加载器 StringTemplateLoader stringTemplateLoader = new StringTemplateLoader(); stringTemplateLoader.putTemplate("template",templateString); configuration.setTemplateLoader(stringTemplateLoader); //得到模板 Template template = configuration.getTemplate("template","utf‐8"); //数据模型 Map<String,Object> map = new HashMap<>(); map.put("name","高級程序员"); //静态化 String content = FreeMarkerTemplateUtils.processTemplateIntoString(template, map); //静态化内容 System.out.println(content); InputStream inputStream = IOUtils.toInputStream(content); //输出文件 FileOutputStream fileOutputStream = new FileOutputStream(new File("d:/test1.html")); IOUtils.copy(inputStream, fileOutputStream); }

tea_year 发表于2025-10-16 17:47:07 2025-10-16 17:47:07 最后回复云聪明 2025-10-27 13:15:29
17 2

前端 webpack Vue
[技术干货] FreeMarker基础

FreeMarker基础1.3.1 核心指令1.3.1.1 数据模型Freemarker静态化依赖数据模型和模板，下边定义数据模型：下边方法形参map即为freemarker静态化所需要的数据模型，在map中填充数据：@RequestMapping("/test1") public String freemarker(Map<String, Object> map){ //向数据模型放数据 map.put("name","高級程序员"); Student stu1 = new Student(); stu1.setName("小明"); stu1.setAge(18); stu1.setMoney(1000.86f); stu1.setBirthday(new Date()); Student stu2 = new Student(); stu2.setName("小红"); stu2.setMondy(200.1f); stu2.setAge(19); //stu2.setBirthday(new Date()); List<Student> friends = new ArrayList<>(); friends.add(stu1); stu2.setFriends(friends); stu2.setBestFriend(stu1); List<Student> stus = new ArrayList<>(); stus.add(stu1); stus.add(stu2); //向数据模型放数据 map.put("stus",stus); //准备map数据 HashMap<String,Student> stuMap = new HashMap<>(); stuMap.put("stu1",stu1); stuMap.put("stu2",stu2); //向数据模型放数据 map.put("stu1",stu1); //向数据模型放数据 map.put("stuMap",stuMap); //返回模板文件名称 return "test1"; }1.3.1.2 List指令本节定义freemarker模板，模板中使用freemarker的指令，关于freemarker的指令需要知道：1、注释，即<#‐‐和‐‐>，介于其之间的内容会被freemarker忽略2、插值（Interpolation）：即${..}部分,freemarker会用真实的值代替${..}3、FTL指令：和HTML标记类似，名字前加#予以区分，Freemarker会解析标签中的表达式或逻辑。4、文本，仅文本信息，这些不是freemarker的注释、插值、FTL指令的内容会被freemarker忽略解析，直接输出内容。在test1.ftl模板中使用list指令遍历数据模型中的数据：<table> <tr> <td>序号</td> <td>姓名</td> <td>年龄</td> <td>钱包</td> </tr> <#list stus as stu> <tr> <td>${stu_index + 1}</td> <td>${stu.name}</td> <td>${stu.age}</td> <td>${stu.mondy}</td> </tr> </#list> </table>输出：Hello 高級程序员! 序号姓名年龄钱包 1 小明 18 1,000.86 2 小红 19 200.说明： index：得到循环的下标，使用方法是在stu后边加"index"，它的值是从 0 开始1.3.1.3 遍历Map数据1 、数据模型使用map指令遍历数据模型中的stuMap。2 、模板输出stu1的学生信息：<br/> 姓名：${stuMap['stu1'].name}<br/> 输出stu1的学生信息：<br/> 姓名：${stuMap.stu1.name}<br/> 年龄：${stuMap.stu1.age}<br/> 遍历输出两个学生信息：<br/> <table> <tr> <td>序号</td> <td>姓名</td> <td>年龄</td> <td>钱包</td> </tr> <#list stuMap?keys as k> <tr> <td>${k_index + 1}</td> <td>${stuMap[k].name}</td> <td>${stuMap[k].age}</td> <td >${stuMap[k].mondy}</td> </tr> </#list> </table>3 、输出输出stu1的学生信息：姓名：小明年龄： 18 输出stu1的学生信息：姓名：小明年龄： 18 遍历输出两个学生信息：序号姓名年龄钱包 1 小红 19 2 00. 2 小明 18 1 ,000.1.3.1.4 if指令if 指令即判断指令，是常用的FTL指令，freemarker在解析时遇到if会进行判断，条件为真则输出if中间的内容，否则跳过内容不再输出。1 、数据模型：使用list指令中测试数据模型。2 、模板：<table> <tr> <td>姓名</td> <td>年龄</td> <td>钱包</td> </tr> <#list stus as stu> <tr> <td <#if stu.name =='小明'>style="background:red;"</#if>>${stu.name}</td> <td>${stu.age}</td> <td >${stu.mondy}</td> </tr> </#list> </table>通过阅读上边的代码，实现的功能是：如果姓名为“小明”则背景色显示为红色。3 、输出：通过测试发现姓名为小明的背景色为红色。

tea_year 发表于2025-10-16 17:46:12 2025-10-16 17:46:12 最后回复云聪明 2025-10-27 13:15:25
13 2

前端 Vue
[技术干货] FreeMarker 研究

Freemarker研究FreeMarker 是一款模板引擎：即一种基于模板和要改变的数据，并用来生成输出文本(HTML网页，电子邮件，配置文件，源代码等)的通用工具。它不是面向最终用户的，而是一个Java类库，是一款程序员可以嵌入他们所开发产品的组件。模板编写为FreeMarker Template Language (FTL)。它是简单的，专用的语言，不是像PHP那样成熟的编程语言。那就意味着要准备数据在真实编程语言中来显示，比如数据库查询和业务运算，之后模板显示已经准备好的数据。在模板中，你可以专注于如何展现数据，而在模板之外可以专注于要展示什么数据。1 FreeMarker 研究1.1 FreeMarker介绍1 、freemarker是一个用Java开发的模板引擎常用的java模板引擎还有哪些？Jsp、Freemarker、Thymeleaf 、Velocity 等。2 、模板+数据模型=输出freemarker并不关心数据的来源，只是根据模板的内容，将数据模型在模板中显示并输出文件（通常为html，也可以生成其它格式的文本文件）1 、数据模型数据模型在java中可以是基本类型也可以List、Map、Pojo等复杂类型。2 、来自官方的例子：（https://freemarker.apache.org/docs/dgui_quickstart_basics.html）数据模型：模板：输出： 1.2 FreeMarker快速入门freemarker作为springmvc一种视图格式，默认情况下SpringMVC支持freemarker视图格式。需要创建Spring Boot+Freemarker工程用于测试模板。1.2.1 创建测试工程创建一个freemarker 的测试工程专门用于freemarker的功能测试与模板的测试。pom.xml如下<?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:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <parent> <artifactId>framework-parent</artifactId> <groupId>com.lxw</groupId> <version>1.0-SNAPSHOT</version>  </parent> <modelVersion>4.0.0</modelVersion> <artifactId>test-freemarker</artifactId> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-freemarker</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </dependency> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-io</artifactId> </dependency> <dependency> <groupId>com.squareup.okhttp3</groupId> <artifactId>okhttp</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> </dependencies> </project>1.2.2 配置文件配置application.yml和 logback-spring.xml，从cms工程拷贝这两个文件，进行更改， logback-spring.xml无需更改，application.yml内容如下：server: port: 8888 spring: application: name: test-freemarker freemarker: charset: UTF-8 #suffix: cache: false settings: template_update_delay: 0 #检查模板更新延迟时间，设置为 0 表示立即检查，如果时间大于 0 会有缓存不方便进行模板测试1.2.3 创建模型类在freemarker的测试工程下创建模型类型用于测试package com.yh.pojo; import lombok.Data; import lombok.ToString; import java.util.Date; import java.util.List; @Data @ToString public class Student { private String name;//姓名 private int age;//年龄 private Date birthday;//生日 private Float money;//钱包 private List<Student> friends;//朋友列表 private Student bestFriend;//最好的朋友 } 1.2.4 创建模板在 src/main/resources下创建templates，此目录为freemarker的默认模板存放目录。在templates下创建模板文件test1.ftl，模板中的${name}最终会被freemarker替换成具体的数据。<!DOCTYPE html> <html> <head> <meta charset="utf‐8"> <title>Hello World!</title> </head> <body> Hello ${name}! </body> </html>1.2.5 创建controller创建Controller类，向Map中添加name，最后返回模板文件。package com.lxw.test.freemarker.controller; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.client.RestTemplate; import java.util.Map; @RequestMapping("/freemarker") @Controller public class FreemarkerController { @Autowired RestTemplate restTemplate; @RequestMapping("/test1") public String freemarker(Map<String, Object> map){ map.put("name","高級程序员"); //返回模板文件名称 return "test1"; } }1.2.6 创建启动类@SpringBootApplication public class FreemarkerTestApplication { public static void main(String[] args) { SpringApplication.run(FreemarkerTestApplication.class,args); } }1.2.7 测试请求：http://localhost:8088/freemarker/test1屏幕显示：Hello 高級程序员!

tea_year 发表于2025-10-16 17:44:46 2025-10-16 17:44:46 最后回复云聪明 2025-10-27 13:15:21
8 2

前端
[问题求助] 开过局的AP怎样重开

早几年买的AP，今天在仓库发现还在百来个，86面板的AP,用坤灵重扫码显示为已帮定其他帐号，已试了80多个了，都是帮同一个帐号，现在要怎么处理才能重新去用上。

yd_225144753 发表于2025-10-13 20:50:03 2025-10-13 20:50:03 最后回复福州司马懿 2025-10-27 10:43:44
48 4

前端
华为全联接大会2025最新剧透！OpenTiny邀请你一起来开发者展岛~

关于 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 标签，一起参与开源贡献~

OpenTiny 发表于2025-09-15 16:48:53 2025-09-15 16:48:53 最后回复 OpenTiny 0
8 0

开源 OpenTiny 前端开发者
[产品体验官] 【开发者体验活动】OpenTiny NEXT 前端智能化解决方案应用实践，快来体验吧~

活动介绍：OpenTiny 是华为云开源的企业级前端智能应用解决方案，通过本次产品体验官活动，您可以了解当前OpenTiny项目中的 TinyRobot、Web Agent、NEXT SDK 三个产品，了解其智能化能力，并实现应用的智能化改造，从而让AI智能体代替人操作Web应用，助力用户更高效地完成业务目标。活动时间：2025.9.8-2025.10.14活动流程：1、访问体验环境：Chrome、VSCode2、按照实操流程进行体验，可参考实操手册3、将体验完成截图发送至评论区，同时说明体验感受奖品示例：序号礼包名称介绍1200元开发者礼包1开发者定制双肩包（黑武士款）开发者定制渔夫帽（2025款）开发者定制鼠标垫大号（2025款）2200元开发者礼包2开发者定制冲锋衣（M-3XL）开发者定制渔夫帽（2025款）开发者定制鼠标垫大号（2025款）活动说明：1、完成体验请在本活动评论区，截图体验完成的实际截图，并说明体验感受。2、如果有任何关于OpenTiny NEXT的体验建议，请提交至云声建议平台（填写时，关联产品/功能选择Codelabs) 并标明以【OpenTiny NEXT体验】为开头，比如【OpenTiny NEXT体验】整体上手体验不错，建议考虑XXX场景，实现接入智能化能力。3、所有参与活动的开发者需要完成实际体验，有任何问题欢迎联系OpenTiny小助手【请备注：体验官活动】。 4、活动完成后，根据开发者体验反馈，抽取5位幸运用户，获得价值200元开发者礼包。（本次活动以高价值建议、体验完整性等因素为主要抽选标准）5、提交体验感受时，可以围绕体验流程、操作步骤、问题建议等方向进行展开，建议内容表述清晰，有操作截图或链接等详细描述。6、兑换礼品以仓库现有礼品为准，不可以指定，如遇商品缺货，将随机换成其他等价值礼品发放。关于 OpenTiny欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～OpenTiny 官网：https://opentiny.designOpenTiny 代码仓库：cid:link_4TinyVue 源码：cid:link_3TinyEngine 源码： cid:link_1欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor~如果你也想要共建，可以进入代码仓库，找到 good first issue 标签，一起参与开源贡献~

OpenTiny 发表于2025-09-05 15:46:05 2025-09-05 15:46:05 最后回复 zekelove 2025-10-27 12:17:56
857 13

开源 OpenTiny 前端开发者
[业务动态] TinyEngine2.7版本发布！注册表功能重大更新，布局配置更简洁~

欢迎朋友们一键star项目~ 让我们一起走的更远！源码地址：https://github.com/opentiny/tiny-engine

OpenTiny 发表于2025-07-24 16:26:17 2025-07-24 16:26:17 最后回复 OpenTiny 2025-07-24 16:26:17
12 0

开源低代码 OpenTiny 前端开发者
直播分享|从零开始读懂TinyEngine代码结构，理清设计意图

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

OpenTiny 发表于2025-06-23 17:35:44 2025-06-23 17:35:44 最后回复 OpenTiny 0
4 0

开源低代码 OpenTiny 前端
[技术干货] 前端 div 内嵌的style使用的引号

在前端开发中，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 中根据团队规范选择单/双引号。单引号完全合法，但需确保代码风格统一！

林欣 发表于2025-06-23 10:31:37 2025-06-23 10:31:37 最后回复林欣 2025-07-09 16:38:02
441 5

前端
[分享交流] 直播分享|从新手到贡献者：手把手教你融入开源生态

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

OpenTiny 发表于2025-05-20 14:46:15 2025-05-20 14:46:15 最后回复 OpenTiny 2025-05-20 14:46:15
24 0

开源 OpenTiny 前端开发者
[热门活动] 连续3天！15大导师齐上阵！OpenTiny开源之夏项目宣讲会等你来~

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

OpenTiny 发表于2025-05-12 15:37:41 2025-05-12 15:37:41 最后回复 OpenTiny 0
10 0

开源 OpenTiny 前端开发者
[热门活动] 直播预告|TinyVue 组件库高级用法：定制你的企业级UI体系

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

OpenTiny 发表于2025-04-27 16:52:52 2025-04-27 16:52:52 最后回复 OpenTiny 2025-04-27 16:52:52
8 0

开源 OpenTiny 前端开发者 Vue
[技术干货] 直播分享|TinyVue 多端实战与轻量图标库分享

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标签，一起参与开源贡献~

OpenTiny 发表于2025-04-21 17:15:15 2025-04-21 17:15:15 最后回复福州司马懿 2025-04-27 09:55:49
54 2

开源 OpenTiny 前端开发者 Vue
[技术干货] 直播预告|新手从搭建到二开TinyEngine低代码引擎

TinyEngine 低代码引擎使能开发者定制低代码平台。它是低代码平台的底座，提供可视化搭建页面等基础能力，既可以通过线上搭配组合，也可以通过创建cli工程进行二次开发，实时定制出自己的低代码平台。适用于多场景的低代码平台开发，如：资源编排、服务端渲染、模型驱动、移动端、大屏端、页面编排等。社区贡献者观默评价它：“基于 Vue3，利用 DSL 实现从 schema 生成源码，支持多框架集成，且拥有强大的插件系统，能实现各种定制化开发的需求”。如果你正在寻找一款趁手的低代码引擎或者你对低代码开发感兴趣，那你不妨来试试 TinyEngine。本期直播将通过实战分享，手把手带你完成项目搭建、组件库部署与注册并开发一款简单的插件。直播详情：

OpenTiny 发表于2025-04-01 10:10:03 2025-04-01 10:10:03 最后回复林欣 2025-04-03 13:58:19
19 1

开源低代码 OpenTiny 前端开发者
[技术干货] 给Web开发者的HarmonyOS指南02-布局样式

给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 教程对你有所帮助，期待您的 👍点赞、💬评论、🌟收藏支持。

苏杰豪 发表于2025-03-26 22:59:55 2025-03-26 22:59:55 最后回复 DS小龙哥 2025-04-21 10:01:35
133 3

前端 HarmonyOS

推荐直播

热门标签

Java Python 数据结构数据库 Linux 机器学习网络任务调度 MySQL JavaScript