Continental-AG/conti-docs
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
68284ae3cce7f59ca67cbd7667e2117191a7551d
conti-docs/tech-selection/Flutter-vs-UniApp-deck.standalone.html
T

1213 lines
443 KiB
HTML
Raw Normal View History

docs: add README for TeleNeoWeb font usage and requirements
2026-08-26 17:04:22 +08:00
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>App 技术栈介绍 — T-Systems</title>
<style>
/* ============================================================
Telekom Scale design tokens — 取自
unpkg.com/@telekom/design-tokens/dist/telekom/css/telekom-design-tokens.all.css
============================================================ */
:root{
--tk-magenta:#e20074; --tk-magenta-hover:#c00063; --tk-magenta-press:#9e0051;
--tk-text:#000000; --tk-text-add:hsla(0,0%,0%,.65); --tk-text-dis:hsla(0,0%,0%,.4);
--tk-inverted:#ffffff;
--tk-canvas:#ffffff; --tk-canvas-subtle:#fbfbfb;
--tk-surface-subtle:#efeff0; --tk-surface-hl:#242426;
--tk-link:#2238df;
--tk-info:#2238df; --tk-info-subtle:#d3d7f9;
--tk-success:#008653; --tk-success-subtle:#ccf0e1;
--tk-danger:#d91308; --tk-warning:#b63d00;
--tk-neutral:#8e8e93; --tk-neutral-subtle:#e5e5e7;
--tk-r-sm:.25rem; --tk-r:.5rem; --tk-r-lg:.75rem; --tk-r-pill:62.4375rem;
--tk-sh-raised:0 8px 32px 0 hsla(0,0%,0%,.1), 0 4px 8px 0 hsla(0,0%,0%,.1);
--tk-sh-float:0 12px 48px 0 hsla(0,0%,0%,.1), 0 6px 12px 0 hsla(0,0%,0%,.1);
--tk-font:'TeleNeoWeb','PingFang SC','Microsoft YaHei','Noto Sans SC','Hiragino Sans GB',sans-serif;
--tk-mono:'SF Mono','Cascadia Mono','Consolas','Menlo',monospace;
}
/* TeleNeoWeb 是授权品牌字体，公开包里不含文件。
放进 assets/fonts/ 即生效，缺失则静默回退。见 assets/fonts/README.md */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#1a1a1c}
body{font-family:var(--tk-font);color:var(--tk-text);-webkit-font-smoothing:antialiased}
/* ---------- 舞台：固定 1280×720，等比缩放 ---------- */
#viewport{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#stage{width:1280px;height:720px;background:var(--tk-canvas);position:relative;overflow:hidden;
transform-origin:center center;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 24px 96px rgba(0,0,0,.5)}
#deck{position:absolute;inset:0}
.holder{position:absolute;inset:0}
.slide{position:absolute;inset:0;padding:56px 72px 64px;display:flex;flex-direction:column;
background:var(--tk-canvas);opacity:0;transform:translateX(48px);pointer-events:none;
transition:opacity .3s ease,transform .32s cubic-bezier(.4,0,.2,1)}
.slide.active{opacity:1;transform:none;pointer-events:auto}
.slide.before{transform:translateX(-48px)}
@media (prefers-reduced-motion:reduce){.slide{transition:opacity .01s}}
/* ---------- 页眉页脚 ---------- */
#chrome{position:absolute;inset:0;pointer-events:none;z-index:20;opacity:0;transition:opacity .25s}
#chrome.on{opacity:1}
#brand{position:absolute;top:26px;left:72px;display:flex;align-items:center;gap:10px;
font-size:15px;font-weight:700;letter-spacing:.01em}
#brand::before{content:"";width:5px;height:19px;background:var(--tk-magenta);border-radius:1px}
#meta{position:absolute;top:28px;right:72px;font-size:13px;font-weight:500;color:var(--tk-text-dis);
display:flex;align-items:center;gap:14px}
#meta .num{font-variant-numeric:tabular-nums;color:var(--tk-text-add);font-weight:700}
/* 进度条独立于页眉：分隔页/封面隐藏页眉，但进度条始终可见 */
#bar{position:absolute;left:0;bottom:0;height:3px;background:var(--tk-magenta);width:0;z-index:21;
transition:width .32s cubic-bezier(.4,0,.2,1),opacity .25s}
#bar.off{opacity:0}
/* ---------- 排版原语 ---------- */
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
color:var(--tk-magenta);margin-bottom:10px}
h1{font-size:54px;font-weight:800;line-height:1.14;letter-spacing:-.01em}
h2{font-size:38px;font-weight:800;line-height:1.16;letter-spacing:-.005em}
h3{font-size:23px;font-weight:800;line-height:1.28}
h4{font-size:17px;font-weight:800;line-height:1.35}
.lead{font-size:19px;font-weight:400;line-height:1.5;color:var(--tk-text-add)}
.sub{font-size:16px;line-height:1.55;color:var(--tk-text-add);margin-top:12px;max-width:1010px}
.body{font-size:15px;line-height:1.6}
.hd{margin-bottom:26px;flex-shrink:0}
.bd{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.bd.top{justify-content:flex-start}
em{font-style:normal;color:var(--tk-magenta);font-weight:700}
strong{font-weight:700}
code{font-family:var(--tk-mono);font-size:.88em;background:var(--tk-surface-subtle);
padding:1px 6px;border-radius:var(--tk-r-sm)}
.note{font-size:12.5px;line-height:1.5;color:var(--tk-text-dis);margin-top:16px;flex-shrink:0}
.note b{color:var(--tk-text-add);font-weight:700}
/* ---------- 封面 / 分隔 / 断言 ---------- */
.cover{justify-content:center;padding-left:96px}
.cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--tk-magenta)}
.cover .kicker{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--tk-magenta);margin-bottom:22px}
.cover h1{max-width:900px}
.cover .foot{position:absolute;left:96px;bottom:64px;display:flex;align-items:flex-end;
justify-content:space-between;width:calc(100% - 168px)}
.cover .co{font-size:26px;font-weight:800;letter-spacing:.005em}
.cover .co span{color:var(--tk-magenta)}
.divider{justify-content:center;background:var(--tk-canvas-subtle)}
.divider::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--tk-magenta)}
.divider .no{font-size:132px;font-weight:800;line-height:.9;color:var(--tk-magenta);
letter-spacing:-.03em;margin-bottom:16px}
.divider h2{font-size:46px;max-width:820px}
.divider .pts{margin-top:28px;display:flex;gap:10px;flex-wrap:wrap;max-width:840px}
.divider .pts span{font-size:13.5px;font-weight:500;color:var(--tk-text-add);
border:1px solid var(--tk-neutral-subtle);background:#fff;padding:6px 14px;border-radius:var(--tk-r-pill)}
.statement{justify-content:center;align-items:flex-start}
.statement .big{font-size:42px;font-weight:800;line-height:1.3;max-width:1060px;letter-spacing:-.005em}
.statement .big em{color:var(--tk-magenta)}
/* ---------- 卡片 ---------- */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--tk-canvas-subtle);border:1px solid var(--tk-neutral-subtle);
border-radius:var(--tk-r-lg);padding:20px 22px;display:flex;flex-direction:column}
.card.hi{background:#fff;border-color:var(--tk-magenta);box-shadow:var(--tk-sh-raised)}
.card.ok{background:var(--tk-success-subtle);border-color:#9fdcc2}
.card .n{font-size:12px;font-weight:800;color:var(--tk-magenta);letter-spacing:.08em;margin-bottom:8px}
.card h4{margin-bottom:8px}
.card p{font-size:13.5px;line-height:1.55;color:var(--tk-text-add)}
.card p+p{margin-top:7px}
/* ---------- 表格 ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--tk-neutral-subtle);vertical-align:top;line-height:1.45}
thead th{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
color:var(--tk-text-dis);border-bottom:2px solid var(--tk-text);padding-bottom:8px}
tbody tr:last-child td{border-bottom:none}
td.k{font-weight:700;width:1%;white-space:nowrap}
.col-f{color:var(--tk-text);font-weight:700}
.col-f.mark{color:var(--tk-magenta)}
.col-u{color:var(--tk-text-add)}
table.compact th,table.compact td{padding:7px 12px;font-size:13px}
table.tiny th,table.tiny td{padding:5.5px 11px;font-size:12.5px}
/* 表格密集的几页收一档行高 */
.slide.dense table.tiny th,.slide.dense table.tiny td{padding:3.5px 10px;font-size:12px;line-height:1.4}
.slide.dense table.compact th,.slide.dense table.compact td{padding:5px 11px;font-size:12.5px;line-height:1.4}
.slide.dense .hd{margin-bottom:14px}
.slide.dense .card{padding:11px 14px}
.slide.dense .card p{font-size:12.5px;line-height:1.5}
.slide.dense .quote{font-size:13.5px;line-height:1.55}
.slide.dense .brow{margin-bottom:6px}
/* ---------- 条形图 ---------- */
.chart{display:flex;flex-direction:column;gap:20px}
.cgroup .ctitle{font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
color:var(--tk-text-dis);margin-bottom:11px;display:flex;align-items:baseline;gap:12px}
.cgroup .ctitle .x{color:var(--tk-magenta);font-size:14px;letter-spacing:0;text-transform:none}
.brow{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.brow .bl{width:96px;flex-shrink:0;font-size:13.5px;font-weight:700;text-align:right}
.brow .bt{flex:1;height:26px;background:var(--tk-surface-subtle);border-radius:var(--tk-r-sm);overflow:hidden}
.brow .bf{height:100%;width:0;border-radius:var(--tk-r-sm);
transition:width .75s cubic-bezier(.25,.8,.35,1) .12s}
.slide.active .brow .bf{width:var(--w)}
.bf.f{background:var(--tk-magenta)}
.bf.u{background:var(--tk-neutral)}
.bf.g{background:var(--tk-success)}
.brow .bv{width:104px;flex-shrink:0;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.brow .bv.dim{color:var(--tk-text-add);font-weight:700}
/* ---------- 大数字 ---------- */
.stats{display:flex;gap:20px}
.stat{flex:1;background:var(--tk-canvas-subtle);border:1px solid var(--tk-neutral-subtle);
border-radius:var(--tk-r-lg);padding:18px 20px}
.stat .v{font-size:42px;font-weight:800;line-height:1;color:var(--tk-magenta);
font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat .v small{font-size:19px;font-weight:800;margin-left:3px}
.stat .l{font-size:12.5px;line-height:1.45;color:var(--tk-text-add);margin-top:9px}
/* 案例页的大数字与图片并排，收窄一档 */
.case .stat{padding:11px 16px}
.case .stat .v{font-size:34px}
.case .stat .v small{font-size:16px}
.case .stat .l{font-size:12px;margin-top:7px}
/* ---------- chip ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:13.5px;font-weight:500;padding:7px 14px;border-radius:var(--tk-r-pill);
border:1px solid var(--tk-neutral-subtle);background:#fff;white-space:nowrap}
.chip.f{border-color:var(--tk-magenta);color:var(--tk-magenta);font-weight:700;background:#fff}
.chip.n{background:var(--tk-surface-subtle);border-color:transparent}
.chip.d{color:var(--tk-text-dis)}
/* ---------- 引用块 ---------- */
.quote{border-left:4px solid var(--tk-magenta);padding:4px 0 4px 18px;font-size:15.5px;
line-height:1.6;color:var(--tk-text)}
.quote.warn{border-left-color:var(--tk-warning)}
.quote.ok{border-left-color:var(--tk-success)}
.quote .src{display:block;font-size:12.5px;color:var(--tk-text-dis);margin-top:8px}
/* ---------- 架构栈图 ----------
每一列 = 一条技术路线 / 一个框架：代码层 → 中间层 → 绘制层。
.sb 用等分栅格排层，各列的 .sh / .sf 高度锁死，
这样「界面由谁绘制」在四列里落在同一条水平线上，可以横着扫。
.on 用洋红点出这一层，全篇图示的主语都是它。 */
.stacks{display:flex;gap:14px;align-items:stretch;min-height:400px}
.stk{flex:1;display:flex;flex-direction:column;border:1px solid var(--tk-neutral-subtle);
border-radius:var(--tk-r-lg);overflow:hidden;background:#fff;min-width:0}
.stk.on{border-color:var(--tk-magenta);box-shadow:var(--tk-sh-raised)}
.stk .sh{padding:10px 12px;background:var(--tk-surface-subtle);text-align:center;min-height:58px;
display:flex;flex-direction:column;justify-content:center}
.stk.on .sh{background:var(--tk-magenta);color:#fff}
.stk .sh .no{font-size:11px;font-weight:800;letter-spacing:.12em;opacity:.55;display:block}
.stk .sh .nm{font-size:14.5px;font-weight:800;margin-top:2px;display:block;line-height:1.25}
.stk .sb{flex:1;padding:14px 12px;display:grid;grid-template-rows:1fr 16px 1fr 16px 1fr}
.stk .sb.four{grid-template-rows:1fr 16px 1fr 16px 1fr 16px 1fr}
.lyr{border-radius:var(--tk-r-sm);padding:6px 9px;text-align:center;font-size:12.5px;line-height:1.35;font-weight:700;
display:flex;flex-direction:column;align-items:center;justify-content:center}
.lyr .t{font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--tk-text-dis);
text-transform:uppercase;display:block;margin-bottom:3px}
.lyr.code{background:var(--tk-surface-subtle)}
.lyr.mid{background:#fff;border:1px dashed var(--tk-neutral-subtle);color:var(--tk-text-add);font-weight:500}
.lyr.draw{background:var(--tk-canvas-subtle);border:1px solid var(--tk-neutral-subtle)}
.stk.on .lyr.draw{background:#fce6f1;border-color:var(--tk-magenta);color:var(--tk-magenta-press)}
.lyr.draw .t{color:inherit;opacity:.65}
.dn{display:flex;align-items:center;justify-content:center;color:var(--tk-text-dis);font-size:12px;line-height:1}
.stk .sf{padding:9px 12px;border-top:1px solid var(--tk-neutral-subtle);min-height:60px;
font-size:11.5px;line-height:1.45;color:var(--tk-text-add);background:var(--tk-canvas-subtle);
display:flex;align-items:center}
.stk.on .sf{color:var(--tk-text);background:#fff}
/* ---------- 开源分层 ---------- */
.layers{display:flex;gap:24px}
.lcol{flex:1}
.lcol .lh{font-size:15px;font-weight:800;margin-bottom:10px;padding-bottom:7px;border-bottom:2px solid var(--tk-text)}
.layer{padding:11px 14px;border-radius:var(--tk-r);margin-bottom:7px;font-size:13.5px;font-weight:700;
display:flex;justify-content:space-between;align-items:center;gap:10px}
.layer .tag{font-size:11px;font-weight:800;letter-spacing:.04em;padding:3px 9px;border-radius:var(--tk-r-pill);white-space:nowrap}
.layer.open{background:var(--tk-success-subtle);color:#04543a}
.layer.open .tag{background:var(--tk-success);color:#fff}
.layer.closed{color:#5f5f63;
background:repeating-linear-gradient(45deg,#efeff0,#efeff0 7px,#e0e0e3 7px,#e0e0e3 14px)}
.layer.closed .tag{background:var(--tk-surface-hl);color:#fff}
/* ---------- 互斥示意 ---------- */
.dead{display:flex;align-items:center;gap:22px}
.dead .side{flex:1;background:#fff;border:2px solid var(--tk-neutral-subtle);border-radius:var(--tk-r-lg);padding:18px}
.dead .side h4{margin-bottom:9px}
.dead .side .req{font-size:13px;line-height:1.55;color:var(--tk-text-add)}
.dead .side .verdict{margin-top:12px;font-size:13px;font-weight:800;padding:8px 12px;border-radius:var(--tk-r);
background:var(--tk-surface-subtle)}
.dead .side.a .verdict{color:var(--tk-magenta-press);background:#fce6f1}
.dead .side.b .verdict{color:#7a2900;background:#fdeade}
.dead .x{width:88px;flex-shrink:0;text-align:center}
.dead .x .sym{font-size:44px;font-weight:800;color:var(--tk-danger);line-height:1}
.dead .x .lb{font-size:12.5px;font-weight:800;color:var(--tk-danger);margin-top:6px}
/* ---------- 成本堆叠条 ---------- */
.cost{display:flex;height:70px;border-radius:var(--tk-r);overflow:hidden;border:1px solid var(--tk-neutral-subtle)}
.cost .seg{display:flex;flex-direction:column;align-items:center;justify-content:center;
border-right:1px solid #fff;padding:0 8px;text-align:center}
.cost .seg:last-child{border-right:none}
.cost .seg .p{font-size:19px;font-weight:800;line-height:1}
.cost .seg .t{font-size:11.5px;line-height:1.3;margin-top:6px;font-weight:500}
.cost .s1{background:var(--tk-surface-subtle);color:var(--tk-text-add)}
.cost .s2{background:var(--tk-success-subtle);color:#04543a}
.cost .s3{background:#fce6f1;color:var(--tk-magenta-press)}
.cost .s4{background:#f9d5e7;color:var(--tk-magenta-press)}
.costlegend{display:flex;gap:26px;margin-top:16px;font-size:13px}
.costlegend div{display:flex;align-items:center;gap:8px;color:var(--tk-text-add)}
.costlegend .ar{font-size:15px;font-weight:800}
.costlegend .up{color:var(--tk-magenta)}
.costlegend .dn{color:var(--tk-success)}
/* ---------- 案例图片 ---------- */
.case{display:flex;gap:30px;align-items:stretch;flex:1;min-height:0}
.case .txt{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0}
.case .shots{display:flex;gap:12px;align-items:center;flex-shrink:0}
.shot{width:150px;border-radius:12px;overflow:hidden;border:1px solid var(--tk-neutral-subtle);
box-shadow:var(--tk-sh-raised);background:#fff}
.shot img{width:100%;display:block}
.shot .cap{font-size:10.5px;line-height:1.35;padding:7px 8px;color:var(--tk-text-add);
background:#fff;text-align:center;font-weight:500}
/* ---------- 证据分级 A / B / C ---------- */
.grade{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
border-radius:var(--tk-r-sm);font-size:11.5px;font-weight:800;flex-shrink:0}
.grade.a{background:var(--tk-magenta);color:#fff}
.grade.b{background:var(--tk-info);color:#fff}
.grade.c{background:var(--tk-neutral);color:#fff}
.legend{display:flex;gap:18px;font-size:12.5px;color:var(--tk-text-add);align-items:center;flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:7px}
/* ---------- 缩略图总览 ---------- */
#deck.grid-mode{--ts:.18;display:grid;grid-template-columns:repeat(5,1fr);gap:13px;padding:22px;
overflow-y:auto;background:var(--tk-surface-subtle);align-content:start}
#deck.grid-mode .holder{position:relative;inset:auto;aspect-ratio:16/9;overflow:hidden;cursor:pointer;
border-radius:6px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.14);
outline:2px solid transparent;transition:outline-color .12s}
#deck.grid-mode .holder:hover{outline-color:var(--tk-neutral)}
#deck.grid-mode .holder.cur{outline-color:var(--tk-magenta)}
#deck.grid-mode .holder::after{content:attr(data-n);position:absolute;right:4px;bottom:3px;z-index:3;
font-size:9px;font-weight:800;color:var(--tk-text-dis);background:rgba(255,255,255,.9);
padding:1px 4px;border-radius:3px}
#deck.grid-mode .slide{width:1280px;height:720px;inset:auto;top:0;left:0;opacity:1;transform:scale(var(--ts));
transform-origin:0 0;pointer-events:none;transition:none}
#deck.grid-mode::-webkit-scrollbar{width:9px}
#deck.grid-mode::-webkit-scrollbar-thumb{background:var(--tk-neutral);border-radius:5px}
/* ---------- 提示 ---------- */
#hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:30;
background:rgba(36,36,38,.9);color:#fff;font-size:12px;font-weight:500;padding:8px 18px;
border-radius:var(--tk-r-pill);white-space:nowrap;opacity:0;transition:opacity .4s;pointer-events:none}
#hint.on{opacity:1}
#hint b{color:#f61488;font-weight:800}
</style>
</head>
<body>
<div id="viewport">
<div id="stage">
<div id="deck">
<!-- ══════════════ 1 · 封面 ══════════════ -->
<div class="holder"><section class="slide cover" data-ch="">
<div class="kicker">技术方案说明</div>
<h1>App 技术栈介绍</h1>
<p class="lead" style="margin-top:26px;max-width:760px">Flutter 与 uni-app / uni-app x 的技术路线、生态与落地情况</p>
<div class="foot">
<div class="co">T<span>-</span>Systems</div>
<div style="font-size:13px;color:var(--tk-text-dis);text-align:right;line-height:1.6">2026 年 8 月</div>
</div>
</section></div>
<!-- ══════════════ 2 · 目录 ══════════════ -->
<div class="holder"><section class="slide" data-ch="目录">
<div class="hd"><div class="eyebrow">目录</div><h2>本次介绍分五个部分</h2></div>
<div class="bd">
<table class="compact">
<tbody>
<tr><td class="k" style="color:var(--tk-magenta);font-size:19px;width:70px">01</td>
<td style="width:290px"><strong style="font-size:16px">跨端开发的技术路线</strong></td>
<td class="col-u">市面上的方案归类，四条路线的工作方式，界面由谁绘制</td></tr>
<tr><td class="k" style="color:var(--tk-magenta);font-size:19px">02</td>
<td><strong style="font-size:16px">三个框架的定位</strong></td>
<td class="col-u">Flutter、uni-app、uni-app x 各走哪条路线，各自为谁设计</td></tr>
<tr><td class="k" style="color:var(--tk-magenta);font-size:19px">03</td>
<td><strong style="font-size:16px">生态与落地规模</strong></td>
<td class="col-u">开源程度、社区体量、在用的团队，以及两个整车厂案例</td></tr>
<tr><td class="k" style="color:var(--tk-magenta);font-size:19px">04</td>
<td><strong style="font-size:16px">产品能力与工程链路</strong></td>
<td class="col-u">小组件与系统能力、原生工程的开放程度、构建发版、AI 工具链</td></tr>
<tr><td class="k" style="color:var(--tk-magenta);font-size:19px">05</td>
<td><strong style="font-size:16px">结论</strong></td>
<td class="col-u">成本构成、uni-app x 更优的项、推荐方案</td></tr>
</tbody>
</table>
</div>
</section></div>
<!-- ══════════════ 3 · 结论摘要 · 推荐 ══════════════ -->
<div class="holder"><section class="slide" data-ch="结论摘要">
<div class="hd">
<div class="eyebrow">结论摘要</div>
<h2>技术栈推荐 <em>Flutter</em></h2>
</div>
<div class="bd">
<div class="grid g2" style="gap:16px">
<div class="card hi">
<div class="n">01</div><h4>界面在两端完全一致</h4>
<p>Flutter 用自己的渲染引擎绘制界面，不依赖系统控件，也不依赖各机型的浏览器内核。同一份设计稿在 iOS 和 Android 上呈现一致，不需要为两端分别调样式。</p>
</div>
<div class="card hi">
<div class="n">02</div><h4>系统能力没有额外限制</h4>
<p>原生侧就是标准的 Xcode 与 Android Studio 工程。桌面小组件、Siri、系统级推送这类能力按常规原生方式实现，不需要再学一套框架方的插件规则。</p>
</div>
<div class="card">
<div class="n">03</div><h4>大型 App 上有充分先例</h4>
<p>BMW、大众汽车（安徽）、字节跳动、阿里巴巴、腾讯、美团、京东、贝壳、携程都在核心业务中使用。引擎与框架代码全部开源。</p>
</div>
<div class="card">
<div class="n">04</div><h4>技术栈稳定</h4>
<p>Flutter 自 2015 年起是同一条技术主线，没有发生过技术栈更替。uni-app 系历经 5+ App → nvue → uni-app x 两次更替，前两代已于 2024 年停止官方维护。</p>
</div>
</div>
</div>
<div class="note">uni-app 与 uni-app x 是成熟且被广泛使用的框架，本次不做优劣评判，只对照两者与本项目形态的匹配程度。uni-app x 更优的三项在第 5 章列出。</div>
</section></div>
<!-- ══════════════ 4 · 结论摘要 · 三方对照 ══════════════ -->
<div class="holder"><section class="slide" data-ch="结论摘要">
<div class="hd"><div class="eyebrow">结论摘要</div><h2>三个框架的核心对照</h2></div>
<div class="bd">
<table class="compact">
<thead><tr><th style="width:16%">维度</th><th style="width:29%">Flutter</th><th style="width:26%">uni-app</th><th>uni-app x</th></tr></thead>
<tbody>
<tr><td class="k">界面由谁绘制</td><td class="col-f mark">框架自带的渲染引擎</td><td class="col-u">机型自带的浏览器内核</td><td class="col-u">系统原生控件</td></tr>
<tr><td class="k">两端一致性</td><td class="col-f">逐像素一致</td><td class="col-u">受各机型内核版本影响</td><td class="col-u">用系统控件，两端有差异</td></tr>
<tr><td class="k">主要面向</td><td class="col-f">独立 App</td><td class="col-u">小程序为主、App 为辅</td><td class="col-u">已有小程序团队转做 App</td></tr>
<tr><td class="k">嵌入 F6 网页</td><td class="col-f mark">通道由 App 侧建立，F6 无需改动</td><td class="col-u">同左</td><td class="col-u">需 F6 引入 DCloud 的 JS 文件</td></tr>
<tr><td class="k">原生能力开发</td><td class="col-f">强类型代码生成，支持命令行</td><td class="col-u">原生插件已停止新增上架</td><td class="col-u">只能经 HBuilderX，不支持命令行</td></tr>
<tr><td class="k">开源程度</td><td class="col-f mark">引擎 + 框架全开源（BSD）</td><td class="col-u">框架层开源（Apache-2.0）</td><td class="col-u">框架层开源，Runtime / SDK 闭源</td></tr>
<tr><td class="k">大型 App 案例</td><td class="col-f">字节 90+ 款、闲鱼、美团、京东、贝壳、携程、BMW、大众安徽 ID. UNYX</td><td class="col-u">—</td><td class="col-u">未检索到同等量级公开案例</td></tr>
<tr><td class="k">鸿蒙</td><td class="col-u">社区分支，3.41 已发布</td><td class="col-u">支持</td><td style="color:var(--tk-success);font-weight:700">一等公民 ✓</td></tr>
<tr><td class="k">安装包与内存</td><td class="col-u">约多 10 MB / 35 MB</td><td class="col-u">—</td><td style="color:var(--tk-success);font-weight:700">更小 ✓</td></tr>
<tr><td class="k">首版投入</td><td class="col-f">基准</td><td class="col-u">—</td><td class="col-u">差异在 ±10% 以内</td></tr>
</tbody>
</table>
</div>
<div class="note">最后三行是 uni-app x 占优的项。</div>
</section></div>
<!-- ══════════════ 5 · 分隔 01 ══════════════ -->
<div class="holder"><section class="slide divider" data-ch="">
<div class="no">01</div>
<h2>跨端开发的技术路线</h2>
<div class="pts"><span>市面上的方案</span><span>四条路线的工作方式</span><span>界面由谁绘制</span></div>
</section></div>
<!-- ══════════════ 6 · 1.1 市面上的方案 ══════════════ -->
<div class="holder"><section class="slide" data-ch="第 1 章 · 技术路线">
<div class="hd">
<div class="eyebrow">1.1 方案总览</div>
<h2>市面上的方案，按底层原理只有四类</h2>
<p class="sub">框架名字很多，但决定 App 能力和体验的是底层怎么把界面画到屏幕上。按这一点归类，选择面并不大。</p>
</div>
<div class="bd">
<table class="compact">
<thead><tr><th style="width:15%">路线</th><th style="width:51%">代表方案</th><th>什么情况下选它</th></tr></thead>
<tbody>
<tr>
<td class="k"><span style="color:var(--tk-text-dis);font-weight:800">①</span> 原生双端</td>
<td><div class="chips"><span class="chip n">Swift / SwiftUI</span><span class="chip n">Kotlin / Compose</span><span class="chip n">Kotlin Multiplatform</span></div></td>
<td class="col-u">能力上限优先，接受两端各写一套 UI</td>
</tr>
<tr>
<td class="k"><span style="color:var(--tk-text-dis);font-weight:800">②</span> 网页套壳</td>
<td><div class="chips"><span class="chip">Cordova</span><span class="chip">Capacitor</span><span class="chip">uni-app</span><span class="chip">Taro</span><span class="chip d">5+ App / nvue</span></div></td>
<td class="col-u">小程序 / H5 是主要入口，App 是补充</td>
</tr>
<tr>
<td class="k"><span style="color:var(--tk-text-dis);font-weight:800">③</span> 编译到系统控件</td>
<td><div class="chips"><span class="chip">React Native</span><span class="chip">uni-app x</span><span class="chip">Kuikly（腾讯）</span><span class="chip">.NET MAUI</span></div></td>
<td class="col-u">框架的翻译表能覆盖住需求范围</td>
</tr>
<tr>
<td class="k"><span style="color:var(--tk-magenta);font-weight:800">④</span> 自绘引擎</td>
<td><div class="chips"><span class="chip f">Flutter</span></div></td>
<td class="col-f">要做两端一致、长期迭代的独立 App</td>
</tr>
</tbody>
</table>
</div>
<div class="note"><b>本次不展开的几个：</b>React Native 的前提是团队已有 React 技术栈；Taro、Cordova、Capacitor 的重心仍是网页路线；Kotlin Multiplatform 只共享业务逻辑，界面仍由两端各自实现，严格说不属于跨端 UI 方案；Kuikly 是腾讯 2025 年开源的自研框架，目前主要在腾讯内部使用，对外生态尚早。灰色的 5+ App / nvue 是 DCloud 的上一代方案，已停止维护。</div>
</section></div>
<!-- ══════════════ 7 · 1.2 四条路线图示 ══════════════ -->
<div class="holder"><section class="slide" data-ch="第 1 章 · 技术路线">
<div class="hd">
<div class="eyebrow">1.2 工作方式</div>
<h2>四条路线，从代码到屏幕</h2>
</div>
<div class="bd">
<div class="stacks">
<div class="stk">
<div class="sh"><span class="no">路线 ①</span><span class="nm">原生双端</span></div>
<div class="sb">
<div class="lyr code"><span class="t">代码</span>Swift + Kotlin<br>两套</div>
<div class="dn">↓</div>
<div class="lyr mid">无中间层<br><span style="font-size:11px">直接调用系统 API</span></div>
<div class="dn">↓</div>
<div class="lyr draw"><span class="t">界面由谁绘制</span>系统控件</div>
</div>
<div class="sf">系统给什么就能用什么，能力上限最高；两端各写一遍。</div>
</div>
<div class="stk">
<div class="sh"><span class="no">路线 ②</span><span class="nm">网页套壳</span></div>
<div class="sb">
<div class="lyr code"><span class="t">代码</span>HTML / CSS / JS<br>一套</div>
<div class="dn">↓</div>
<div class="lyr mid">WebView<br><span style="font-size:11px">（机型自带的浏览器）</span></div>
<div class="dn">↓</div>
<div class="lyr draw"><span class="t">界面由谁绘制</span>浏览器内核</div>
</div>
<div class="sf">开发最快；界面随机型内核版本变化，系统能力要靠插件从网页环境打通。</div>
</div>
<div class="stk">
<div class="sh"><span class="no">路线 ③</span><span class="nm">编译到系统控件</span></div>
<div class="sb">
<div class="lyr code"><span class="t">代码</span>JS / UTS<br>一套</div>
<div class="dn">↓</div>
<div class="lyr mid">框架桥接层<br><span style="font-size:11px">（翻译成原生控件）</span></div>
<div class="dn">↓</div>
<div class="lyr draw"><span class="t">界面由谁绘制</span>系统控件</div>
</div>
<div class="sf">代码经框架的翻译表转成 Kotlin / Swift；表里没有的能力要自己补齐。</div>
</div>
<div class="stk on">
<div class="sh"><span class="no">路线 ④</span><span class="nm">自绘引擎</span></div>
<div class="sb">
<div class="lyr code"><span class="t">代码</span>Dart<br>一套</div>
<div class="dn">↓</div>
<div class="lyr mid">Flutter 渲染引擎<br><span style="font-size:11px">（自带一块画布）</span></div>
<div class="dn">↓</div>
<div class="lyr draw"><span class="t">界面由谁绘制</span>引擎自己绘制</div>
</div>
<div class="sf">界面自己画，不受机型影响；系统能力经通道调用两端的原生代码。</div>
</div>
</div>
</div>
<div class="note">路线 ② 与 ③ 的界面最终都交给别人来画：一个交给浏览器内核，一个交给系统控件。路线 ④ 把这一层拿回到框架自己手里。</div>
</section></div>
<!-- ══════════════ 8 · 1.3 界面由谁绘制的影响 ══════════════ -->
<div class="holder"><section class="slide" data-ch="第 1 章 · 技术路线">
<div class="hd">
<div class="eyebrow">1.3 影响</div>
<h2>"界面由谁绘制"影响三件事</h2>
</div>
<div class="bd">
<table class="compact">
<thead><tr><th style="width:19%"></th><th style="width:20%">① 原生双端</th><th style="width:20%">② 网页套壳</th><th style="width:20%">③ 编译到系统控件</th><th>④ 自绘引擎</th></tr></thead>
<tbody>
<tr>
<td class="k">两端界面一致性</td>
<td class="col-u">两套代码各自维护</td>
<td class="col-u">受机型内核版本影响</td>
<td class="col-u">控件本身两端有差异</td>
<td class="col-f mark">逐像素一致</td>
</tr>
<tr>
<td class="k">做一个设计稿上的特殊效果</td>
<td class="col-u">自己实现，无限制</td>
<td class="col-u">用 CSS 实现，复杂动效性能受限</td>
<td class="col-u">受系统控件能力限制</td>
<td class="col-f mark">自己实现，无限制</td>
</tr>
<tr>
<td class="k">用一个新的系统能力</td>
<td class="col-u">自己写</td>
<td class="col-u">写原生插件</td>
<td class="col-u">按框架方的插件规则写</td>
<td class="col-f mark">写插件，原生工程完全开放</td>
</tr>
</tbody>
</table>
<div class="grid g2" style="margin-top:20px;gap:18px">
<div class="card">
<h4>本项目的形态</h4>
<p>要嵌入 F6 的网页业务、要用到扫码、定位、推送、相机、蓝牙等一批系统能力，同时要在两端保持一致的品牌体验。</p>
</div>
<div class="card hi">
<h4>对应到上表</h4>
<p>一致性和系统能力这两列同时重要。路线 ④ 在这两列上都不受第三方约束，这是选择 Flutter 的技术出发点。</p>
</div>
</div>
</div>
</section></div>
<!-- ══════════════ 9 · 分隔 02 ══════════════ -->
<div class="holder"><section class="slide divider" data-ch="">
<div class="no">02</div>
<h2>三个框架的定位</h2>
<div class="pts"><span>各走哪条路线</span><span>为谁设计</span><span>适用场景</span></div>
</section></div>
<!-- ══════════════ 10 · 2.1 三者的技术路线 ══════════════ -->
<div class="holder"><section class="slide" data-ch="第 2 章 · 框架定位">
<div class="hd">
<div class="eyebrow">2.1 技术路线</div>
<h2>三个框架各走哪条路线</h2>
</div>
<div class="bd">
<div class="stacks">
<div class="stk on">
<div class="sh"><span class="no">路线 ④ · 自绘引擎</span><span class="nm">Flutter</span></div>
<div class="sb four">
<div class="lyr code"><span class="t">开发语言</span>Dart</div>
<div class="dn">↓</div>
<div class="lyr mid">编译为机器码<br><span style="font-size:11px">AOT，无 JS 解释器</span></div>
<div class="dn">↓</div>
<div class="lyr mid">Flutter 渲染引擎<br><span style="font-size:11px">Impeller / Skia</span></div>
<div class="dn">↓</div>
<div class="lyr draw"><span class="t">界面</span>引擎自己绘制</div>
</div>
<div class="sf">Google 主导，2015 年开源。引擎与框架代码全部公开（BSD-3-Clause）。</div>
</div>
<div class="stk">
<div class="sh"><span class="no">路线 ② · 网页套壳</span><span class="nm">uni-app</span></div>
<div class="sb four">
<div class="lyr code"><span class="t">开发语言</span>Vue / JavaScript</div>
<div class="dn">↓</div>
<div class="lyr mid">编译为小程序 / H5 / App<br><span style="font-size:11px">一套代码多端发布</span></div>
<div class="dn">↓</div>
<div class="lyr mid">App 端：WebView<br><span style="font-size:11px">或已停维护的 nvue</span></div>
<div class="dn">↓</div>
<div class="lyr draw"><span class="t">界面</span>浏览器内核</div>
</div>
<div class="sf">DCloud 出品，2018 年开源。核心场景是同时发布小程序、H5 与 App。</div>
</div>
<div class="stk">
<div class="sh"><span class="no">路线 ③ · 编译到系统控件</span><span class="nm">uni-app x</span></div>
<div class="sb four">
<div class="lyr code"><span class="t">开发语言</span>UTS / UVue</div>
<div class="dn">↓</div>
<div class="lyr mid">编译为 Kotlin / Swift<br><span style="font-size:11px">保留 Vue 写法</span></div>
<div class="dn">↓</div>
<div class="lyr mid">DCloud Runtime<br><span style="font-size:11px">闭源</span></div>
<div class="dn">↓</div>
<div class="lyr draw"><span class="t">界面</span>系统控件</div>
</div>
<div class="sf">DCloud 的新一代方案，让已有的 Vue / 小程序团队用熟悉的写法产出原生 App。</div>
</div>
</div>
</div>
<div class="note">uni-app x 与 uni-app 是两套独立的技术栈，语言、运行时和渲染方式都不同，不是版本升级关系。</div>
</section></div>
<!-- ══════════════ 11 · 2.2 为谁设计 ══════════════ -->
<div class="holder"><section class="slide" data-ch="第 2 章 · 框架定位">
<div class="hd">
<div class="eyebrow">2.2 设计目标</div>
<h2>三个框架各自为谁设计</h2>
</div>
<div class="bd">
<table class="compact">
<thead><tr><th style="width:17%"></th><th style="width:28%">Flutter</th><th style="width:27%">uni-app</th><th>uni-app x</th></tr></thead>
<tbody>
<tr><td class="k">最初要解决的问题</td><td class="col-f">一套代码做出体验接近原生的独立 App</td><td class="col-u">一套 Vue 代码同时发布小程序、H5 与 App</td><td class="col-u">让 Vue / 小程序团队产出真正的原生 App</td></tr>
<tr><td class="k">典型使用者</td><td class="col-f">已有原生团队，要统一两端体验</td><td class="col-u">以小程序为主要渠道的业务</td><td class="col-u">熟悉 Vue、希望不换语言做 App 的团队</td></tr>
<tr><td class="k">最擅长的场景</td><td class="col-f">界面复杂、系统能力多、长期迭代的主力 App</td><td class="col-u">多渠道同时上线、以内容和交易页面为主</td><td class="col-u">交互不复杂、以页面和接口为主的 App</td></tr>
<tr><td class="k">发布渠道</td><td class="col-f">iOS、Android（鸿蒙有社区分支）</td><td class="col-u">各家小程序、H5、iOS、Android、鸿蒙</td><td class="col-u">iOS、Android、鸿蒙、部分小程序</td></tr>
</tbody>
</table>
<div class="grid g2" style="margin-top:20px;gap:18px">
<div class="card">
<h4>本项目的渠道范围</h4>
<p>首版只发 iOS 与 Android 两个应用商店，不发小程序，也不需要 H5 版本。</p>
</div>
<div class="card">
<h4>已确定的能力清单</h4>
<p>扫码、定位、推送、相机、蓝牙、文件、车牌与 VIN 识别等系统能力，以及对 F6 网页业务的嵌入与双向通信。</p>
</div>
</div>
</div>
</section></div>
<!-- ══════════════ 12 · 分隔 03 ══════════════ -->
<div class="holder"><section class="slide divider" data-ch="">
<div class="no">03</div>
<h2>生态与落地规模</h2>
<div class="pts"><span>开源程度</span><span>社区体量</span><span>谁在用</span><span>两个整车厂案例</span></div>
</section></div>
<!-- ══════════════ 13 · 3.1 开源程度与社区体量 ══════════════ -->
<div class="holder"><section class="slide dense" data-ch="第 3 章 · 生态与落地规模">
<div class="hd">
<div class="eyebrow">3.1 开源程度与社区体量</div>
<h2>代码开到哪一层，社区有多大</h2>
</div>
<div class="bd">
<div class="layers" style="margin-bottom:22px">
<div class="lcol">
<div class="lh">Flutter</div>
<div class="layer open">业务框架层 <span class="tag">开源</span></div>
<div class="layer open">渲染引擎 <span class="tag">开源</span></div>
<div class="layer open">命令行与构建工具 <span class="tag">开源</span></div>
</div>
<div class="lcol">
<div class="lh">uni-app x</div>
<div class="layer open">业务框架层 <span class="tag">开源</span></div>
<div class="layer closed">Runtime 与原生 SDK <span class="tag">闭源</span></div>
<div class="layer closed">HBuilderX 与打包服务 <span class="tag">闭源</span></div>
</div>
</div>
<div class="chart" style="gap:12px">
<div class="cgroup">
<div class="ctitle">主仓库提交数<span class="x">约 8.1 倍</span></div>
<div class="brow"><span class="bl">Flutter</span><div class="bt"><div class="bf f" style="--w:100%"></div></div><span class="bv">91,171</span></div>
<div class="brow"><span class="bl">uni-app</span><div class="bt"><div class="bf u" style="--w:12.3%"></div></div><span class="bv dim">11,216</span></div>
</div>
<div class="cgroup">
<div class="ctitle">Star 数<span class="x">约 4.3 倍</span></div>
<div class="brow"><span class="bl">Flutter</span><div class="bt"><div class="bf f" style="--w:100%"></div></div><span class="bv">178,643</span></div>
<div class="brow"><span class="bl">uni-app</span><div class="bt"><div class="bf u" style="--w:23.3%"></div></div><span class="bv dim">41,600</span></div>
</div>
</div>
</div>
<div class="note">GitHub 数据核验于 2026-08-25，取自 <b>flutter/flutter</b> 与 <b>dcloudio/uni-app</b>；Fork 数为 31,002 与 3,709。star 数反映的是全球开源关注度，uni-app 在国内企业与政企项目中的落地量不体现在这项数据里。</div>
</section></div>
<!-- ══════════════ 14 · 3.2 谁在用 ══════════════ -->
<div class="holder"><section class="slide dense" data-ch="第 3 章 · 生态与落地规模">
<div class="hd">
<div class="eyebrow">3.2 落地情况</div>
<h2>哪些团队在主力 App 上用 Flutter</h2>
<div class="legend" style="margin-top:12px">
<span><i class="grade a">A</i> Flutter 官方站与 Showcase 收录</span>
<span><i class="grade b">B</i> 使用方自己公开披露</span>
<span><i class="grade c">C</i> 第三方对应用安装包的扫描统计</span>
</div>
</div>
<div class="bd">
<table class="tiny">
<thead><tr><th style="width:14%">使用方</th><th style="width:44%">App / 业务</th><th style="width:8%">证据</th><th>补充</th></tr></thead>
<tbody>
<tr><td class="k">字节跳动</td><td class="col-u">90 多款应用：抖音火山版、飞书 Lark、Coze、掘金等</td><td><i class="grade a">A</i></td><td class="col-u">官方开发者故事，2026-06 更新</td></tr>
<tr><td class="k">阿里巴巴</td><td class="col-u">闲鱼，已推进到线上主链路</td><td><i class="grade a">A</i></td><td class="col-u">并开源了 FlutterBoost 等基建</td></tr>
<tr><td class="k">腾讯</td><td class="col-u">多个团队将应用完整迁移到 Flutter</td><td><i class="grade a">A</i></td><td class="col-u">官方页：90% 代码多端复用</td></tr>
<tr><td class="k">贝壳找房</td><td class="col-u">主业务多平台</td><td><i class="grade a">A</i></td><td class="col-u">Showcase 收录，2021-03</td></tr>
<tr style="background:#fdf2f8"><td class="k" style="color:var(--tk-magenta)">BMW</td><td class="col-f">My BMW App，覆盖 47 个国家</td><td><i class="grade a">A</i></td><td class="col-u">见下一页</td></tr>
<tr style="background:#fdf2f8"><td class="k" style="color:var(--tk-magenta)">大众汽车（安徽）</td><td class="col-f">ID. UNYX App：购车定制、车联车控、社区、商城</td><td><i class="grade b">B</i></td><td class="col-u">见下下页</td></tr>
<tr><td class="k">美团</td><td class="col-u">外卖商家端 App，覆盖 90% 以上业务</td><td><i class="grade b">B</i></td><td class="col-u">美团技术团队博客，2021-03</td></tr>
<tr><td class="k">京东</td><td class="col-u">JDFlutter：容器、工具链与组件平台</td><td><i class="grade b">B</i></td><td class="col-u">京东 EMOP 官方文档</td></tr>
<tr><td class="k">携程</td><td class="col-u">火车票、酒店等十多个核心业务的列表页与主流程</td><td><i class="grade b">B</i></td><td class="col-u">原生 + React Native + Flutter 混合</td></tr>
</tbody>
</table>
<div class="grid g2" style="margin-top:14px;gap:16px">
<div class="card">
<h4>落地形态一致</h4>
<p>这些团队都不是把整个 App 用跨端框架重写，而是<strong>原生工程为主体、Flutter 承载业务页面、系统能力仍走原生</strong>。本项目采用同样的形态。</p>
</div>
<div class="card hi">
<h4>第三方统计 <i class="grade c" style="width:auto;padding:0 6px">C</i></h4>
<p>Appfigures 对新上架应用的 SDK 扫描：<strong>Flutter 检出率 11.07%，React Native 6.75%</strong>（2024 年 1–10 月；2022 年同项为 10.15% 与 4.73%）。该统计口径不含 uni-app 系，不作对比。</p>
</div>
</div>
</div>
</section></div>
<!-- ══════════════ 15 · 3.3 案例 A · BMW ══════════════ -->
<div class="holder"><section class="slide" data-ch="第 3 章 · 生态与落地规模">
<div class="hd">
<div class="eyebrow">3.3 案例一 &nbsp;·&nbsp; <i class="grade a" style="width:auto;padding:0 6px">A</i> Flutter 官方 Showcase 收录</div>
<h2>BMW：My BMW App</h2>
</div>
<div class="case">
<div class="txt">
<p class="body" style="color:var(--tk-text-add)">BMW 原先 iOS 与 Android 各有一套 BMW Connected / MINI Connected，两端功能与设计逐渐分叉。2018 年启动跨端方案评估，选型时明确排除了基于浏览器的方案，最终选定 Flutter。</p>
<div class="stats" style="margin:10px 0 8px">
<div class="stat"><div class="v"><span data-to="47">47</span></div><div class="l">个国家、五大洲<br>双端合一，同时服务 BMW 与 MINI</div></div>
<div class="stat"><div class="v"><span data-to="96">96</span></div><div class="l">每个构建自动生成、测试<br>并部署的<strong>变体数</strong></div></div>
<div class="stat"><div class="v"><small>&gt;</small><span data-to="10000">10,000</span></div><div class="l">截至 2021-10<br><strong>每个变体</strong>累计构建的版本数</div></div>
</div>
<table class="tiny" style="margin-bottom:10px">
<tbody>
<tr><td class="k" style="width:22%">2018 年</td><td>确认双端分叉问题，启动跨端方案评估</td></tr>
<tr><td class="k">2019 年 10 月</td><td>慕尼黑工程会议敲定方案</td></tr>
<tr style="background:#fdf2f8"><td class="k" style="color:var(--tk-magenta)">2020 年 7 月</td><td><strong>My BMW App 上线，从定案到发布不到一年</strong></td></tr>
<tr><td class="k">团队结构</td><td>按域拆分：车辆连接与通信抽象层 / 共享应用平台 / 面向客户的功能</td></tr>
</tbody>
</table>
<div class="quote">
远程车控、实时车况回传、车辆查找、充电桩与地图，全部落在系统 API 和车联网长连接上。<strong>这是一个原生能力密集、且要在多品牌多市场维持同一套体验的 App。</strong>
</div>
</div>
<div class="shots">
<div class="shot"><img src="data:image/jpeg;base64,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
<div class="shot"><img src="data:image/jpeg;base64,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
<div class="shot"><img src="data:image/png;base64,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
</div>
</div>
<div class="note">配图为 My BMW App 官方商店截图，<b>用于说明该 App 的功能面，技术栈依据是 Flutter 官方 Showcase 页</b>。BMW 集团 Offboard Platform 副总裁 Dr. Nicolai Kraemer 表述：新应用平台建立在三根支柱之上——<b>易用性、安全性与可靠性</b>。</div>
</section></div>
<!-- ══════════════ 16 · 3.4 案例 B · ID. UNYX ══════════════ -->
<div class="holder"><section class="slide" data-ch="第 3 章 · 生态与落地规模">
<div class="hd">
<div class="eyebrow">3.4 案例二 &nbsp;·&nbsp; <i class="grade b" style="width:auto;padding:0 6px">B</i> 使用方官网合规披露</div>
<h2>大众汽车（安徽）：ID. UNYX App</h2>
</div>
<div class="case">
<div class="txt">
<p class="body" style="color:var(--tk-text-add)">ID. UNYX 是大众汽车（安徽）面向国内市场的品牌 App，覆盖购车定制、车联车控、社区与商城。</p>
<div class="quote" style="margin:16px 0">
大众安徽官网《第三方个人信息共享清单》列明 <strong>Flutter SDK（Google LLC）</strong>，使用情形写作
<strong>「App 所有的 L1、L2、L3 页面开发语言」</strong>。
<span class="src">即：一级、二级、三级页面均由 Flutter 实现。</span>
</div>
<div class="grid g2" style="gap:14px">
<div class="card">
<h4>为什么用这条作证据</h4>
<p>合规披露是法定义务，内容需与实际使用一致，可信度高于技术文章的转述。</p>
</div>
<div class="card">
<h4>同站另一份说明</h4>
<p>另列有 React Native SDK，说明该 App 是混合形态，不是纯 Flutter。此处一并注明。</p>
</div>
</div>
</div>
<div class="shots">
<div class="shot"><img src="data:image/jpeg;base64,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
<div class="shot"><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAQDAwQDAwQEBAQFBQQFBwsHBwYGBw4KCggLEA4RERAOEA8SFBoWEhMYEw8QFh8XGBsbHR0dERYgIh8cIhocHRz/2wBDAQUFBQcGBw0HBw0cEhASHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBz/wgARCANVAeADASIAAhEBAxEB/8QAHAAAAQUBAQEAAAAAAAAAAAAAAAECAwQFBgcI/8QAGQEBAQEBAQEAAAAAAAAAAAAAAAECAwQF/9oADAMBAAIQAxAAAAF4HWAIAiDhoPVjhw0BqtHSQyEzo1HjAerFHqxR6sUerXIoiqOaErUBGqiMY5itY5gINARByIg5WA8Yo4aDxij1jcPdGpI6JxXRAcNBREBWg5zHDhFEY5gskMhM+Nw4aDhAc5gPcxR6sUkVijhAcIoIqETHsGNcwaitBBAEQVWgo0HDQcrQcrAkWNSVY1I0RRQABBBEHqxw5WqDHxg6NxYfDIOEBw0HqxR41Yc6N1PGqOVij3RrDxEGxvZUbXxiMc0Rrmgggo0FGkOGg4aDhpTxij1jUBCFEBVaAitFcxw9WLTmOZDVapNLBLTxoOGqOVijxqjlasPVijxq0qtUcNWBrmkbJGVG17IaitpEVIQEFQAEBRClEIUQpRCHCAogKICoIKID1Y4VBBqKwmlrzEggKrQcrQeNWnKxR6tWHKxRytB6tWlEUZHLGRteyGtclMa5sIAIDaVBBRAUQFEBRqxIIUogKICogNVpEitUUAaxzB09aYnGrSiSDdDTmy5dd7MordRXijndlgGbY2K9Z8O3bjml2tQ5yt1GeYzNDPpjJGEaOQYx7RoII1zRBAVBBRAUQFEB40HDQcNBw1RBEJHROHqwFjfGEkLy06F4+xUkO3xHZMdZyO7hHV5mnim5i9JyJB0eVfNbntTBNS5h9CQ0Z5zOytHNoa5Kja5sNZIwa1UGtVBEEFEQcNBw1KcMIeNBw0HDQcrAcxWD3wvJBoOYrRjmBZlrTDxoaxkhrQUVLF7JU0dHnVjXqVCukfzLjRqQqXtjmVJCNR6NAaqCRvYNRWjWPYI1WgiIOGoOEBRAUaDhoOGg4aDkGirE4lVgPRoI1Yyaax08com9hUi6OeC2dg55bVkzTq8SM903QVzCy65hu7jjogN3ZOLLF2ss2MUcjSlYqQ1rmDWuYNY5gIMpyNIcMB6NB4wHjAeNQeNByIDVahMsbhytAikjNTpuDdHY4lB9b1bJU1tjkSNRcp1driYyxN1PIKTb3NqdxzmWG9r8Y0s3spTqeaYlPVgPRoK1UGMewYx7BrVaNEQciAo0HDQcNB40FVijhqCtGEronjxgOarRisC1JVnJBgPGA9Y1HqxRysCRYwlIwlI1JCNSQjUesYSLGEgwFYqDGSRjGSRCMc0EaQ4YU8YQ8YDxgPGA8YD2CCvhdUqxKSIwEascSz1JiwMB6MCVGBKRlSDAkGKPGKPWNR6xqPGBIRhKRhIsYSEajmK0ax7SJr2RGispwwhw0HDQcNBw0HKwHo0EVqEqxqPGrRG+OB8S1bdC+HjAeMB6sKeNUVWg5WKPGESLGEpGtPGESEa08Yo4aoogK0SGNeyomSMIwbDhhTxgPGA8YDxpDhLpn1ouMjvJfOHx6BJ52HoiedqegnnweiP83Q9JPNg9JPNw9IPN0PSjzYPSTzYX0o81D0s80U9KPNg9JXzUPSo/OQ9KZ5ww9Kuead1ZpD4tHjQcNIc0KjjmiI45WRGMB4wHjAeMB6xhf1In5cbZ26/DtVX0PHl5Je2vS+eySLnTHOfEavRWD1lFcCUU886c/T5PO/S87iWRee2tlJY3OJWuHEbtHrdZ4i3raOpxSafo54RQ+nvF+3C5zXV8j6OLyNakWIqUjIkYhUbJI4rDFpwxRwxYcNQeMDpbdbRxrBiu0vP30TNI1qNd8sb1fnUY5xG58hC6RZWEgtHzT1hN44XvnLjTHKY2NmWWBZEVpIsREq1XWZFjV4JpUdaxOP7PivpfOQYtjxgPWMJCNR7BCiNKUQFGg4aQ4aHWbOJuY1iUdXS8/flX7Ds3GN2vLkues01X6JmuvSRnroNWkOXNhZPombJfilqGki575DOmE9qM12pWtrO04Cgk8csSypKmvma1yzhO/wDPvqfMarDUeMB6sB4wHqxaz1jIkIweMB4whysDrt7n+hxrO7XhK3n79MuU81dTG5uUY8x0Tax1NyPHca9WpJKxZEzpnQ4Cpr1qckuq3LfLGsy52bWQWa2ZCla1aq6WJJXZtZLLJY9bO1tSHzn0bzb6vykGLqOGg4aDlYD1jUoKwh6NB4wHjUHjA7DpOZ6bG8erbo+X0zT0LGbcqI6Ucj1Y57pYyVZWq50rSZZa7pXEbnLK2RZJppI6IlkWWFtlCEcqtVzpY2WHRDsUNXWMnzT0zzH7HymjDUeMB4wh4wqQjCkNSHjAeMUcNJXIhXY9TyvV89ZFO/T8nqinZPnUcjlmo3rLDFlFjV7pWkiyo4dKxZQYPdK14/OlV0hE96StbO2KrnrNRucqornSM1s/T3jD8u9R8s+x8hg01HDQcNBw0HjApkajhpDxoPGCvRodn13Idfz1mV7i+P2Upb0+NZD71KhznDVmWahlbclrOu1oRt1M6rJI1WrYfFV7bksT2PaUbJCKkcquJpWPWRIZJXpFoVr2scx5T6t5P9n5LEaajhoOGg8Yo4aRSEQcNWHKxRwgqiB2nYcd2ONUuk5zc+d7beBu1uVs4W/i1nroZ3a67a29yc30sdLN3oK2Tlv4HV8TddUmPFEexzfU6uhy12TDIB/TqjyWEmR0OngIsupOi2ld6TXKN7Wed8l9a8i+18iNWGo8aoKgKICq1CsikIBCqigAoAdp2PG9ljVCrdPJ7Ki2GzUUluQoLcgliZdZLAli1LmO2IpcyTUdnWaXIpYXizT2qkrpa9kVzFyldEssqxvQcwlkdGpLoZujrHP+Q+veQfb+PEIuoKiwqooAgRrGNAhABQBQJUAO07LjeyxunI2l5PXrJlul1tLmEXdk552ddPDgvN9cJ010ceCsb8eIS6DsxZp6NXGnIjVLdayIqRy2HNlhrkQcUc2zpHcVn6x6Pf8AGrvTn3HmHp3nP0/mYQi7iqiwORAaRggQgAgAoAoEqAHadrxXaY3Tp2qni9yujdNK6NJZXRrEisVZHRyZrhrmnqytJcbi5up1hwmfrPqDfIqG8eyVvHTWfVKPnJrPcUOVNY2aFVusTlZupcKM5Z6DkemT1vzj0bzjrxwnNdsqoQrVaIwIABABBUFBQAlEUOz7PjOwxutaxs/y+vv6fE528ek5PAZx6XQ8yoS+qUvOCzuqXIprPRUsldZsMgTWZys4mbA9HtVRWSuKyXFKcs7SB1pCss6kEo8i6HA6Cz1fzj0fzffPDc12yggMVkAECgIAIACooqKSoKh2mpl6Uvn2Nq5ONxoklRliOIi46ygt+vLXkszWUy5XlV7lpsMrIe5i05ECOWN8KitECUYirTRzRJI9LNzehwOg1n1Xzf0jzffPDcx+ioJTEDIBQAEAEAgVFpQJRFQ7TZxunjz3I7vIx14axsVEqVrcQ5RbGQWUlrzxzUQWJparnFywWeaqLKxBFSrFe5BnUSK25W/n6OdVY526kLZokbs421neVuZ3QXPo3m/pHmvXliuY/UGOYIBAqKCKgACCgAsACiKh2fUcvuxm1MnM4deqdy9mb6VuBPnd5ItOOMz/AFfLufMzTyO/K1PXsTUbXsuWzQTyoDlgQNZtxyRY6OrWa9yzQoaBE9jpqOraq3KbONsSxdBz3QS+ieN+x+N9/OPjk1Gsc0AWAAEVAAAAFRZQAADs+j5zVjLwSXGsSWNmLp28ixN7suJZ573LOJc59ego0bmbxuT63Q68/MW62T6OLJ4phoKsCObrNuOWLHR1exBcsv0rpE5q50yraraymxj68sHQ890MvonjfsnmPfz5D436jU
<div class="shot"><img src="data:image/png;base64,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
</div>
</div>
<div class="note">配图取自 ID. UNYX 应用商店官方截图，<b>用于说明该 App 的功能面</b>。与 BMW 一样，这类 App 的主干功能建立在定位、推送与车联网长连接之上。</div>
</section></div>
<!-- ══════════════ 17 · 分隔 04 ══════════════ -->
<div class="holder"><section class="slide divider" data-ch="">
<div class="no">04</div>
<h2>产品能力与工程链路</h2>
<div class="pts"><span>小组件与系统能力</span><span>原生工程的开放程度</span><span>构建与发版</span><span>AI 工具链</span></div>
</section></div>
<!-- ══════════════ 18 · 4.1 App 能做到哪些形态 ══════════════ -->
<div class="holder"><section class="slide" data-ch="第 4 章 · 产品能力与工程链路">
<div class="hd">
<div class="eyebrow">4.1 扩展能力</div>
<h2>App 的形态不止"页面 + 接口"</h2>
<p class="sub">桌面与锁屏小组件、系统语音助手、系统级多媒体与进度通知、各类 App Extension——这些是后续容易提出来的需求。</p>
</div>
<div class="bd">
<table class="compact">
<thead><tr><th style="width:22%">能力</th><th style="width:39%">Flutter</th><th>uni-app x</th></tr></thead>
<tbody>
<tr><td class="k">iOS 桌面小组件</td><td class="col-f">在自己的 Xcode 工程里按标准方式做</td><td class="col-u">无内置 API。需在 Xcode 里做成 <code>.appex</code>，再放进 UTS 插件目录并额外配置</td></tr>
<tr><td class="k">Siri / App Intents</td><td class="col-f">标准原生实现</td><td class="col-u">官方说明：仅靠 UTS 插件无法实现，建议走离线打包的原生工程</td></tr>
<tr><td class="k">安卓桌面小组件</td><td class="col-f">标准原生实现</td><td class="col-u">三个 Kotlin 文件 + Manifest 注册 + 三个 XML 布局 + UTS 桥接层</td></tr>
<tr><td class="k">改一次要重来多少</td><td class="col-f mark">一次增量编译</td><td class="col-u">官方教程：每次修改这些文件后必须重新制作自定义基座</td></tr>
<tr><td class="k">取资源 ID 的方式</td><td class="col-f">直接引用，编译期检查</td><td class="col-u">不能直接引用 <code>R</code> 类，需在运行时按字符串查找</td></tr>
</tbody>
</table>
<div class="quote" style="margin-top:20px">
两条路线都做得到，区别在做的方式：<strong>Flutter 侧就是打开 Xcode 和 Android Studio 写原生代码</strong>；uni-app x 侧同样要写原生代码，并且还要额外走一遍 DCloud 的插件与打包规则。
</div>
</div>
<div class="note">uni-app x 侧内容取自 DCloud 官方文档，安卓小组件清单取自社区 2026-05 的一篇 UTS 插件实战教程，<b>后者为社区记录，非官方文档</b>。</div>
</section></div>
<!-- ══════════════ 19 · 4.2 打包方式 ══════════════ -->
<div class="holder"><section class="slide" data-ch="第 4 章 · 产品能力与工程链路">
<div class="hd">
<div class="eyebrow">4.2 打包方式</div>
<h2>两项官方限制，同时满足不了</h2>
<p class="sub">uni-app x 有云端打包与离线打包两种方式，部分能力只支持其中一种。以下两条都取自 DCloud 官方文档。</p>
</div>
<div class="bd">
<div class="dead">
<div class="side a">
<div class="eyebrow" style="font-size:11.5px;margin-bottom:6px">情形 A</div>
<h4>要用插件市场上的加密付费插件</h4>
<div class="req">官方文档：「uts 加密插件只支持云端传统打包，不支持离线打包、也不支持安心打包」</div>
<div class="verdict">⇒ 只能走云端打包</div>
</div>
<div class="x"><div class="sym">✕</div><div class="lb">互斥</div></div>
<div class="side b">
<div class="eyebrow" style="font-size:11.5px;margin-bottom:6px;color:var(--tk-warning)">情形 B</div>
<h4>要做 Siri 快捷指令这类扩展</h4>
<div class="req">官方建议的实现路径：在离线打包的原生工程里实现 <code>AppShortcutsProvider</code>，再用 UTS 插件衔接业务逻辑</div>
<div class="verdict">⇒ 要求离线打包</div>
</div>
</div>
<div class="grid g2" style="margin-top:20px;gap:18px">
<div>
<h4 style="margin:0 0 8px">而离线打包给到的，是一个围绕闭源二进制的壳工程</h4>
<table class="compact">
<thead><tr><th style="width:50%">在这个工程里能改的</th><th>改不了的</th></tr></thead>
<tbody>
<tr><td class="col-u">包名、版本号、图标、启动图</td><td class="col-u">页面怎么渲染</td></tr>
<tr><td class="col-u">Gradle 依赖、ABI、SDK 版本</td><td class="col-u">页面容器与生命周期</td></tr>
<tr><td class="col-u">权限项等清单配置</td><td class="col-u">UTS 与原生之间的通信机制</td></tr>
<tr><td class="col-u">在壳外面加自己的原生模块</td><td class="col-u">运行时的任何行为</td></tr>
</tbody>
</table>
</div>
<div class="card hi" style="align-self:start">
<h4>Flutter 侧没有这个分支</h4>
<p>只有一种构建方式，<code>ios/</code> 与 <code>android/</code> 目录就是两个完整的原生工程，源码级可控，能力之间不存在互斥。</p>
<p style="margin-top:10px">加不加插件、上不上 Siri，都不影响出包方式。</p>
</div>
</div>
</div>
<div class="note">壳工程的核心是 DCloud 预先编译好的一组 AAR，没有源码；自定义的应用类必须继承 <code>DCloudApplication</code>，官方另注明离线 SDK 不支持 Kotlin。另有两条商务约束同样来自官方文档：付费插件的授权绑定唯一的 appid 和包名，更换其一需重新购买；试用版只能用于自定义基座，不能用于正式发布。</div>
</section></div>
<!-- ══════════════ 20 · 4.3 构建与发版 ══════════════ -->
<div class="holder"><section class="slide" data-ch="第 4 章 · 产品能力与工程链路">
<div class="hd">
<div class="eyebrow">4.3 构建与发版</div>
<h2>发版链路能不能全自动</h2>
</div>
<div class="bd">
<table class="compact">
<thead><tr><th style="width:24%">环节</th><th style="width:38%">Flutter</th><th>uni-app x</th></tr></thead>
<tbody>
<tr><td class="k">出包命令</td><td class="col-f"><code>flutter build</code>，命令行完整</td><td class="col-u">原生插件与 UTS 插件的编译需经 HBuilderX</td></tr>
<tr><td class="k">接入 CI 流水线</td><td class="col-f mark">标准做法，构建机上无人值守</td><td class="col-u">图形化 IDE 环节无法在流水线中自动执行</td></tr>
<tr><td class="k">多渠道 / 多环境包</td><td class="col-f">同一条命令批量产出</td><td class="col-u">云端打包按次计费，自定义基座需重制</td></tr>
<tr><td class="k">版本与产物追溯</td><td class="col-f">产物在自己的构建机上，可完整留档</td><td class="col-u">云端打包由 DCloud 服务完成</td></tr>
</tbody>
</table>
<div class="quote" style="margin-top:22px">
第 3 章 BMW 的数据可以作参照：<strong>每个构建自动生成、测试并部署 96 个变体，每个变体累计构建超过 10,000 个版本。</strong>这个量级的自动化建立在命令行完整、构建可无人值守的基础上。
</div>
</div>
<div class="note">这一栏关心的不是"能不能出包"，两者都能出包；而是出包这一步能否放进自动化流水线，由此决定多环境、多渠道版本的发布节奏。</div>
</section></div>
<!-- ══════════════ 21 · 4.4 AI 工具链 ══════════════ -->
<div class="holder"><section class="slide" data-ch="第 4 章 · 产品能力与工程链路">
<div class="hd">
<div class="eyebrow">4.4 AI 工具链</div>
<h2>AI 编程工具的支持情况</h2>
<p class="sub">两边都有官方 AI 工具，区别在能装到哪些工具上，以及公开语料的体量。</p>
</div>
<div class="bd">
<table class="compact">
<thead><tr><th style="width:22%"></th><th style="width:40%">Flutter / Dart</th><th>uni-app x</th></tr></thead>
<tbody>
<tr><td class="k">官方 skills</td><td class="col-f"><code>flutter/agent-plugins</code>、<code>dart-lang/skills</code>，独立开源仓库</td><td class="col-u">内置在官方 <code>uni-agent</code> 助手中</td></tr>
<tr><td class="k">官方 MCP 服务</td><td class="col-f">Dart &amp; Flutter MCP server</td><td class="col-u"><code>uni-app-x-mcp</code></td></tr>
<tr><td class="k">能用在哪些工具上</td><td class="col-f mark">Claude Code、Codex、Cursor 等，装到哪个都行</td><td class="col-u">主要围绕自家生态与少数几个工具</td></tr>
<tr><td class="k">能否自己扩展</td><td class="col-f">仓库开源，可 fork、可加自己项目的 skill</td><td class="col-u">受限于官方提供</td></tr>
<tr><td class="k">公开语料体量</td><td class="col-f">Dart / Flutter 近十年的全球公开代码</td><td class="col-u">UTS / UVue 为新语言，语料以中文官方文档为主</td></tr>
</tbody>
</table>
<div class="quote" style="margin-top:22px">
AI 生成代码的准确率与这门语言在公开代码里的沉淀量相关。<strong>uni-app x 插件市场的付费插件是加密分发的，这部分代码不会进入任何公开语料。</strong>
</div>
</div>
<div class="note">Flutter 的 skills 是任务粒度的，官方已列出十项以上：生成单元测试、生成集成测试、统计测试覆盖率、配置多语言、构建响应式布局、配置声明式路由等，仓库持续新增。</div>
</section></div>
<!-- ══════════════ 22 · 分隔 05 ══════════════ -->
<div class="holder"><section class="slide divider" data-ch="">
<div class="no">05</div>
<h2>结论</h2>
<div class="pts"><span>成本构成</span><span>uni-app x 更优的三项</span><span>推荐方案</span></div>
</section></div>
<!-- ══════════════ 23 · 5.1 成本构成 ══════════════ -->
<div class="holder"><section class="slide" data-ch="第 5 章 · 结论">
<div class="hd">
<div class="eyebrow">5.1 成本</div>
<h2>首版投入的构成</h2>
<p class="sub">占比区间是基于本项目形态的估算，不同团队会有出入。</p>
</div>
<div class="bd">
<div class="cost">
<div class="seg s1" style="width:50%"><div class="p">45–55%</div><div class="t">业务逻辑与外围系统<br>集成、联调</div></div>
<div class="seg s2" style="width:22.5%"><div class="p">20–25%</div><div class="t">UI 实现</div></div>
<div class="seg s3" style="width:13.75%"><div class="p">10–15%</div><div class="t">原生能力<br>与桥接</div></div>
<div class="seg s4" style="width:13.75%"><div class="p">10–15%</div><div class="t">工程、CI、发布<br>可观测</div></div>
</div>
<div class="costlegend">
<div><span class="ar">—</span> 业务集成：<strong>无差异</strong>（跟框架无关）</div>
<div><span class="ar dn">↓</span> UI 实现：<strong>uni-app x 略省</strong>（Vue 熟悉度高）</div>
<div><span class="ar up">↑</span> 原生桥接：<strong style="color:var(--tk-magenta)">更贵</strong></div>
<div><span class="ar up">↑</span> 工程 CI：<strong style="color:var(--tk-magenta)">更贵</strong></div>
</div>
<div class="grid g2" style="margin-top:30px;gap:18px">
<div class="card">
<h4>uni-app x 省在哪里</h4>
<p>省在 UI 实现，也就是占比第二小的那一块。团队熟悉 Vue，页面写得更快。</p>
</div>
<div class="card hi">
<h4>额外成本在哪里</h4>
<p>原生桥接与工程 CI 两块更贵。一加一减，<strong>首版总投入的差异在 ±10% 以内</strong>。</p>
</div>
</div>
</div>
<div class="note">占比不含后续运维与迭代。业务逻辑与外围系统的集成、联调是最大的一块，这部分与选哪个框架无关。</div>
</section></div>
<!-- ══════════════ 24 · 5.2 uni-app x 更优的项 ══════════════ -->
<div class="holder"><section class="slide" data-ch="第 5 章 · 结论">
<div class="hd">
<div class="eyebrow">5.2 对方更优的项</div>
<h2>uni-app x 强于 Flutter 的三项</h2>
</div>
<div class="bd">
<div class="grid g3" style="gap:18px">
<div class="card ok">
<div class="n" style="color:#04543a">01</div><h4>鸿蒙是一等公民</h4>
<p>uni-app x 官方直接支持鸿蒙。Flutter 主线暂未纳入鸿蒙，目前走 OpenHarmony-SIG 的社区分支：3.41 已发布，3.44 预计 2026 年 9 月。</p>
<p><strong>本项目首版范围是 iOS 与 Android，鸿蒙不在内。</strong></p>
</div>
<div class="card ok">
<div class="n" style="color:#04543a">02</div><h4>安装包与内存更小</h4>
<p>DCloud 官方实测：安装包 <strong>8.5 MB</strong>（Flutter 约 18 MB），运行内存 <strong>103 MB</strong>（Flutter 约 138 MB）。</p>
<p>Flutter 需要带自己的渲染引擎，这部分体积无法省去。</p>
</div>
<div class="card ok">
<div class="n" style="color:#04543a">03</div><h4>热更新</h4>
<p>uni-app 系有成熟的整包与分包热更新方案。Flutter 的 Dart 代码是提前编译的机器码，同类能力受平台规则限制。</p>
</div>
</div>
<div class="quote ok" style="margin-top:26px">
这三项是真实的技术差异。<strong>是否构成决定性因素，取决于产品对鸿蒙、安装包体积和热更新的实际要求。</strong>
</div>
</div>
<div class="note">uni-app x 的离线打包与嵌入式集成会额外增加体积：iOS 约 8.7 MB，Android arm64-v8a 约 8.1 MB。</div>
</section></div>
<!-- ══════════════ 25 · 5.3 推荐方案 ══════════════ -->
<div class="holder"><section class="slide" data-ch="第 5 章 · 结论">
<div class="hd"><div class="eyebrow">5.3 推荐</div><h2>推荐方案</h2></div>
<div class="bd">
<div class="statement" style="padding:0;margin-bottom:28px">
<div class="big" style="font-size:34px">技术栈采用 <em>Flutter</em>，原生工程为主体，<br>业务页面由 Flutter 承载，系统能力走原生。</div>
</div>
<table class="compact">
<tbody>
<tr><td class="k" style="width:22%;color:var(--tk-magenta)">界面一致性</td><td>自绘引擎，不依赖系统控件与浏览器内核，两端与各机型呈现一致</td></tr>
<tr><td class="k" style="color:var(--tk-magenta)">系统能力</td><td>原生工程完全开放，小组件、Siri、系统级能力按标准原生方式实现，无第二套规则</td></tr>
<tr><td class="k" style="color:var(--tk-magenta)">工程链路</td><td>命令行完整，可接入 CI 无人值守构建与自动分发</td></tr>
<tr><td class="k" style="color:var(--tk-magenta)">先例充分</td><td>BMW、大众安徽 ID. UNYX 等同类形态的 App 已在同一条路线上长期运行</td></tr>
</tbody>
</table>
</div>
<div class="note">版本基线 Flutter 3.44.9，首版发布 iOS 与 Android 双端。</div>
</section></div>
<!-- ══════════════ 26 · 数据来源 ══════════════ -->
<div class="holder"><section class="slide dense" data-ch="附录">
<div class="hd"><div class="eyebrow">附录</div><h2>数据与事实来源</h2></div>
<div class="bd">
<table class="tiny">
<thead><tr><th style="width:26%">内容</th><th>来源</th></tr></thead>
<tbody>
<tr><td class="k">框架技术路线与能力</td><td class="col-u">Flutter 官方文档；DCloud uni-app / uni-app x 官方文档</td></tr>
<tr><td class="k">开源程度与社区数据</td><td class="col-u">GitHub <code>flutter/flutter</code> 与 <code>dcloudio/uni-app</code>，核验于 2026-08-25</td></tr>
<tr><td class="k">在用团队清单</td><td class="col-u">Flutter 官方站开发者故事与 Showcase 页；美团技术团队博客；京东 EMOP 官方文档；携程技术公众号</td></tr>
<tr><td class="k">BMW 案例</td><td class="col-u">Flutter 官方 Showcase 的 BMW 页，含时间线与工程数据；配图为 App 官方商店截图</td></tr>
<tr><td class="k">ID. UNYX 案例</td><td class="col-u">大众汽车（安徽）官网《第三方个人信息共享清单》与 SDK 权限说明；配图为 App 官方商店截图</td></tr>
<tr><td class="k">第三方框架分布统计</td><td class="col-u">Appfigures 对应用安装包的 SDK 扫描，2024 年 1–10 月与 2025 年 12 月两次口径</td></tr>
<tr><td class="k">安装包与内存实测</td><td class="col-u">DCloud 官方发布的性能对比材料</td></tr>
<tr><td class="k">打包与扩展能力限制</td><td class="col-u">DCloud 官方文档；安卓小组件交付清单取自社区 2026-05 的 UTS 插件实战教程</td></tr>
</tbody>
</table>
</div>
<div class="note">证据分级：<b>A</b> 框架方官方收录 · <b>B</b> 使用方自己公开披露 · <b>C</b> 第三方对应用安装包的扫描统计。凡检索不到近年官方更新的条目，均已就地注明。</div>
</section></div>
<!-- ══════════════ 27 · 收尾 ══════════════ -->
<div class="holder"><section class="slide cover" data-ch="">
<div class="kicker">谢谢</div>
<h1 style="font-size:44px">问题与讨论</h1>
<div class="foot">
<div class="co">T<span>-</span>Systems</div>
<div style="font-size:13px;color:var(--tk-text-dis);text-align:right;line-height:1.6">
App 技术栈介绍 · 2026-08<br>Flutter / uni-app / uni-app x</div>
</div>
</section></div>
</div><!-- /#deck -->
<div id="chrome">
<div id="brand">T-Systems</div>
<div id="meta"><span id="ch"></span><span class="num"><span id="cur">1</span> / <span id="tot">27</span></span></div>
</div>
<div id="bar"></div>
<div id="hint">按 <b>→</b> 翻页 · <b>O</b> 缩略图总览 · <b>F</b> 全屏</div>
</div><!-- /#stage -->
</div><!-- /#viewport -->
<script>
(function(){
var stage = document.getElementById('stage'),
deck = document.getElementById('deck'),
chrome = document.getElementById('chrome'),
holders = Array.prototype.slice.call(deck.querySelectorAll('.holder')),
slides = holders.map(function(h){ return h.querySelector('.slide'); }),
elCur = document.getElementById('cur'),
elTot = document.getElementById('tot'),
elCh = document.getElementById('ch'),
elBar = document.getElementById('bar'),
elHint = document.getElementById('hint'),
N = slides.length,
idx = 0,
grid = false,
counted = [];
elTot.textContent = N;
holders.forEach(function(h,i){ h.dataset.n = i + 1; });
/* ---------- 等比缩放 ---------- */
function fit(){
var s = Math.min(window.innerWidth / 1280, window.innerHeight / 720);
stage.style.transform = 'scale(' + s + ')';
// 缩略图缩放比：按 holder 实际宽度算，避免硬编码
if (grid && holders[0]) {
var w = holders[0].getBoundingClientRect().width / s;
deck.style.setProperty('--ts', w / 1280);
}
}
window.addEventListener('resize', fit);
/* ---------- 大数字递增 ----------
HTML 里写的就是最终值，这里从 0 动画回到它。
所以 JS 不跑 / RAF 不触发 / 用户关了动效，屏幕上留下的都是正确数字，不会是 0。 */
var noAnim = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
function countUp(slide){
if (noAnim) return;
slide.querySelectorAll('[data-to]').forEach(function(el){
if (el.dataset.done) return;
el.dataset.done = '1';
var to = parseInt(el.dataset.to, 10), t0 = null, dur = 900, done = false;
var end = to.toLocaleString('en-US');
function step(ts){
if (done) return;
if (t0 === null) t0 = ts;
var p = Math.min((ts - t0) / dur, 1);
p = 1 - Math.pow(1 - p, 3); // easeOutCubic
el.textContent = Math.round(to * p).toLocaleString('en-US');
if (p < 1) requestAnimationFrame(step);
}
el.textContent = '0';
requestAnimationFrame(step);
// rAF 在后台标签页会被节流、甚至完全挂起，动画会卡在 9,786 这种半截数上不动。
// setTimeout 不依赖帧产出，到点写终值并置 done 收掉动画循环，
// 否则迟到的 rAF 会把数字又改回中间值。这些数字是论据，不能显示错的。
setTimeout(function(){ done = true; el.textContent = end; }, dur + 80);
});
}
/* ---------- 翻页 ---------- */
function show(n){
idx = Math.max(0, Math.min(N - 1, n));
slides.forEach(function(s, i){
s.classList.toggle('active', i === idx);
s.classList.toggle('before', i < idx);
});
var ch = slides[idx].dataset.ch || '';
elCh.textContent = ch;
elCur.textContent = idx + 1;
elBar.style.width = ((idx + 1) / N * 100) + '%';
elBar.classList.toggle('off', grid);
chrome.classList.toggle('on', !grid && ch !== '');
if (!counted[idx]) { counted[idx] = 1; countUp(slides[idx]); }
// file:// 下个别浏览器会拒绝 replaceState，静默忽略即可
try { if (history.replaceState) history.replaceState(null, '', '#' + (idx + 1)); } catch (err) {}
}
function next(){ if (idx < N - 1) show(idx + 1); }
function prev(){ if (idx > 0) show(idx - 1); }
/* ---------- 缩略图总览 ---------- */
function setGrid(on){
grid = on;
deck.classList.toggle('grid-mode', on);
chrome.classList.toggle('on', !on && (slides[idx].dataset.ch || '') !== '');
elBar.classList.toggle('off', on);
holders.forEach(function(h, i){ h.classList.toggle('cur', on && i === idx); });
if (on) {
fit();
var c = holders[idx];
if (c) c.scrollIntoView({ block: 'nearest' });
} else {
show(idx);
}
}
deck.addEventListener('click', function(e){
if (!grid) return;
var h = e.target.closest('.holder');
if (!h) return;
e.stopPropagation();
idx = holders.indexOf(h);
setGrid(false);
}, true);
/* ---------- 键盘 ---------- */
document.addEventListener('keydown', function(e){
if (e.metaKey || e.ctrlKey || e.altKey) return;
var k = e.key;
if (grid) {
if (k === 'Escape' || k === 'o' || k === 'O') { setGrid(false); e.preventDefault(); }
else if (k === 'ArrowRight'){ idx = Math.min(N-1, idx+1); setGrid(true); e.preventDefault(); }
else if (k === 'ArrowLeft') { idx = Math.max(0, idx-1); setGrid(true); e.preventDefault(); }
else if (k === 'ArrowDown') { idx = Math.min(N-1, idx+5); setGrid(true); e.preventDefault(); }
else if (k === 'ArrowUp') { idx = Math.max(0, idx-5); setGrid(true); e.preventDefault(); }
else if (k === 'Enter') { setGrid(false); e.preventDefault(); }
return;
}
if (k === 'ArrowRight' || k === 'ArrowDown' || k === ' ' || k === 'PageDown'){ next(); e.preventDefault(); }
else if (k === 'ArrowLeft' || k === 'ArrowUp' || k === 'PageUp'){ prev(); e.preventDefault(); }
else if (k === 'Home'){ show(0); e.preventDefault(); }
else if (k === 'End'){ show(N - 1); e.preventDefault(); }
else if (k === 'o' || k === 'O'){ setGrid(true); e.preventDefault(); }
// Escape 不在这里开总览：全屏时 Escape 归浏览器管，抢过来会两件事一起发生
else if (k === 'f' || k === 'F'){
if (document.fullscreenElement) document.exitFullscreen();
else document.documentElement.requestFullscreen();
e.preventDefault();
}
});
/* ---------- 点击左右半屏 ---------- */
stage.addEventListener('click', function(e){
if (grid) return;
// 只挡链接和图片；正文表格照样可点翻页，靠下面的选区判断避免打断划词
if (e.target.closest('a, img')) return;
if (window.getSelection && String(window.getSelection())) return;
var r = stage.getBoundingClientRect();
if (e.clientX - r.left > r.width / 2) next(); else prev();
});
/* ---------- 触摸滑动 ---------- */
var tx = 0, ty = 0, tt = 0;
stage.addEventListener('touchstart', function(e){
var t = e.changedTouches[0]; tx = t.clientX; ty = t.clientY; tt = e.timeStamp;
}, { passive: true });
stage.addEventListener('touchend', function(e){
if (grid) return;
var t = e.changedTouches[0], dx = t.clientX - tx, dy = t.clientY - ty;
// 横向位移足够大、纵向位移小、时间短 —— 才算翻页
if (Math.abs(dx) > 55 && Math.abs(dx) > Math.abs(dy) * 1.8 && e.timeStamp - tt < 700) {
if (dx < 0) next(); else prev();
}
}, { passive: true });
/* ---------- 启动 ---------- */
var start = parseInt((location.hash || '').replace('#',''), 10);
fit();
show(isNaN(start) ? 0 : start - 1);
elHint.classList.add('on');
setTimeout(function(){ elHint.classList.remove('on'); }, 4200);
})();
</script>
</body>
</html>
Reference in New Issue Copy Permalink