<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TeaVM：Java到JavaScript/WebAssembly的编译器</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans SC', sans-serif;
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
}
.poster-container {
width: 720px;
min-height: 960px;
margin: 0 auto;
background: linear-gradient(135deg, #f5f7fa 0%, #e4eaf5 100%);
padding: 40px;
position: relative;
overflow: hidden;
}
.background-accent {
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(65, 105, 225, 0.1) 0%, rgba(220, 20, 60, 0.1) 100%);
filter: blur(80px);
z-index: 0;
}
.accent-1 {
top: -100px;
right: -100px;
}
.accent-2 {
bottom: -100px;
left: -100px;
}
.content {
position: relative;
z-index: 1;
}
.header {
text-align: center;
margin-bottom: 30px;
}
.title {
font-size: 42px;
font-weight: 700;
color: #1a73e8;
margin-bottom: 15px;
line-height: 1.2;
}
.subtitle {
font-size: 24px;
color: #5f6368;
font-weight: 500;
}
.section {
background: white;
border-radius: 16px;
padding: 25px;
margin-bottom: 25px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}
.section-title {
font-size: 24px;
font-weight: 700;
color: #1a73e8;
margin-bottom: 15px;
display: flex;
align-items: center;
}
.section-title .material-icons {
margin-right: 10px;
}
.two-column {
display: flex;
gap: 20px;
margin-bottom: 25px;
}
.column {
flex: 1;
}
.feature-list {
list-style-type: none;
}
.feature-item {
margin-bottom: 12px;
display: flex;
align-items: flex-start;
}
.feature-item .material-icons {
color: #1a73e8;
margin-right: 10px;
font-size: 20px;
flex-shrink: 0;
}
.code-block {
background-color: #f5f7fa;
border-radius: 8px;
padding: 15px;
font-family: monospace;
font-size: 14px;
overflow-x: auto;
margin-bottom: 15px;
}
.highlight {
background: linear-gradient(transparent 60%, rgba(26, 115, 232, 0.2) 40%);
padding: 0 4px;
}
.footer {
text-align: center;
margin-top: 30px;
color: #5f6368;
font-size: 14px;
}
.image-container {
display: flex;
justify-content: center;
margin: 20px 0;
}
.image-container img {
max-width: 100%;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="poster-container">
<div class="background-accent accent-1"></div>
<div class="background-accent accent-2"></div>
<div class="content">
<div class="header">
<h1 class="title">TeaVM：Java到JavaScript/WebAssembly的编译器</h1>
<p class="subtitle">让Java代码在浏览器中运行</p>
</div>
<div class="image-container">
<img src="https://sfile.chatglm.cn/moeSlide/image/91/915d13fa.jpg" alt="Java标志" style="max-width: 300px;">
</div>
<div class="two-column">
<div class="column section">
<h2 class="section-title">
<i class="material-icons">info</i>
什么是TeaVM？
</h2>
<ul class="feature-list">
<li class="feature-item">
<i class="material-icons">check_circle</i>
<span>将<span class="highlight">JVM字节码</span>翻译成JavaScript和WebAssembly的AOT编译器</span>
</li>
<li class="feature-item">
<i class="material-icons">check_circle</i>
<span>与GWT相似，但<span class="highlight">不需要Java源代码</span>，只需要class文件</span>
</li>
<li class="feature-item">
<i class="material-icons">check_circle</i>
<span>支持Java、Kotlin和Scala等基于JVM的语言</span>
</li>
</ul>
</div>
<div class="column section">
<h2 class="section-title">
<i class="material-icons">stars</i>
TeaVM的优势
</h2>
<ul class="feature-list">
<li class="feature-item">
<i class="material-icons">speed</i>
<span>预分析所有函数，只编译必须的部分</span>
</li>
<li class="feature-item">
<i class="material-icons">bolt</i>
<span>生成高效的js代码，有时候比GWT生成的更快</span>
</li>
<li class="feature-item">
<i class="material-icons">code</i>
<span>提供Java环境下的JS API和DOM API</span>
</li>
<li class="feature-item">
<i class="material-icons">integration_instructions</i>
<span>已经与Maven和Eclipse进行了集成</span>
</li>
<li class="feature-item">
<i class="material-icons">account_tree</i>
<span>生成代码调用关系图</span>
</li>
<li class="feature-item">
<i class="material-icons">bug_report</i>
<span>支持Java端和浏览器端调试</span>
</li>
</ul>
</div>
</div>
<div class="section">
<h2 class="section-title">
<i class="material-icons">build</i>
如何使用TeaVM？
</h2>
<h3 style="margin-bottom: 10px; color: #1a73e8;">方法一：使用Maven archetype创建项目</h3>
<div class="code-block">
mvn -DarchetypeCatalog=local \<br>
-DarchetypeGroupId=org.teavm \<br>
-DarchetypeArtifactId=teavm-maven-webapp \<br>
-DarchetypeVersion=0.6.1 archetype:generate<br>
<br>
mvn clean install
</div>
<h3 style="margin-bottom: 10px; color: #1a73e8;">方法二：使用Flavour archetype创建项目</h3>
<div class="code-block">
mvn archetype:generate \<br>
-DarchetypeGroupId=org.teavm.flavour \<br>
-DarchetypeArtifactId=teavm-flavour-application \<br>
-DarchetypeVersion=0.2.1<br>
<br>
mvn package
</div>
</div>
<div class="image-container">
<img src="https://sfile.chatglm.cn/moeSlide/image/9b/9b37928c.jpg" alt="Java和JavaScript对比" style="max-width: 500px;">
</div>
<div class="section">
<h2 class="section-title">
<i class="material-icons">category</i>
应用场景
</h2>
<ul class="feature-list">
<li class="feature-item">
<i class="material-icons">web</i>
<span><strong>Web应用开发</strong>：使用Java开发Web应用，无需学习JavaScript</span>
</li>
<li class="feature-item">
<i class="material-icons">devices</i>
<span><strong>桌面应用的Web化</strong>：将现有Java应用移植到Web平台</span>
</li>
<li class="feature-item">
<i class="material-icons">phone_android</i>
<span><strong>跨平台开发</strong>：结合HTML5和Web技术，让Java应用运行在多种设备上</span>
</li>
</ul>
</div>
<div class="footer">
<p>更多信息：</p>
<p>GitHub：<a href="https://github.com/konsoletyper/teavm" style="color: #1a73e8;">https://github.com/konsoletyper/teavm</a></p>
<p>官方网站：<a href="http://teavm.org" style="color: #1a73e8;">http://teavm.org</a></p>
</div>
</div>
</div>
</body>
</html>
登录后可参与表态
讨论回复
1 条回复
QianXun (QianXun)
#1
02-17 15:12
登录后可参与表态