鸿蒙原生零基础,被 GPT 生成的代码整懵后,我用 WorkBuddy 做了份三端对比教程
最近在了解鸿蒙原生,想把自己的 iOS 和安卓 App 移植成鸿蒙原生版本。
先让 GPT 生成了部分功能模块的代码,但鸿蒙原生此前完全没接触过,看到那一坨一坨的代码直接一脸懵。
于是乎就在 WorkBuddy 帮我做了 iOS / 安卓 / 鸿蒙三端的对比教程,算是理清了点思路。
教程贴在下面,感兴趣的朋友可以看看(内容我也没看完,仅供参考,不喜勿喷,有误也请指正)
最后不得不感慨下,AI 时代想要个教程不仅方便,而且随时调整成你想要的,按以前不得找 Google 一顿搜索,再看对应的教程,然后还不一定适合自己。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>鸿蒙原生开发基础教程 · 五端组件对照手册</title> <style> :root{ --brand:#0A59F7; --brand-soft:#EAF1FE; --brand-deep:#083B9E; --bg:#FFFFFF; --bg-soft:#F7F8FA; --text:#15171A; --text-2:#5A6270; --text-3:#8A93A2; --line:#E6E8EC; --line-2:#D5D9E0; --code-bg:#F6F8FA; --swift:#F05138; --compose:#2C8E4A; --java:#E76F00; --objc:#7A3E9D; --radius:10px; --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif; } *{box-sizing:border-box;} body{ margin:0;background:var(--bg);color:var(--text); font-family:var(--sans);font-size:15px;line-height:1.75; -webkit-font-smoothing:antialiased; } a{color:var(--brand);text-decoration:none;} a:hover{text-decoration:underline;}.shell{display:grid;grid-template-columns:250px minmax(0,1fr);max-width:1400px;margin:0 auto;}
.toc{
position:sticky;top:0;height:100vh;overflow-y:auto;
padding:28px 18px 60px;border-right:1px solid var(--line);
font-size:13px;
}
.toc-title{font-size:12px;letter-spacing:.08em;color:var(--text-3);text-transform:uppercase;margin:0 0 14px 8px;font-weight:500;}
.toc a{display:block;padding:5px 8px;border-radius:6px;color:var(--text-2);line-height:1.5;}
.toc a:hover{background:var(--bg-soft);color:var(--text);text-decoration:none;}
.toc a.on{background:var(--brand-soft);color:var(--brand-deep);font-weight:500;}
main{padding:0 48px 120px;min-width:0;}
.hero{border-bottom:1px solid var(--line);padding:56px 0 36px;margin-bottom:12px;}
.hero .kicker{font-size:13px;color:var(--brand);font-weight:500;letter-spacing:.02em;}
.hero h1{font-size:32px;line-height:1.32;margin:10px 0 14px;font-weight:600;letter-spacing:-.01em;}
.hero h1 span{color:var(--text-2);font-size:21px;font-weight:500;}
.hero p{color:var(--text-2);margin:0 0 22px;max-width:800px;}
.meta{display:flex;flex-wrap:wrap;gap:8px;}
.chip{font-size:12px;padding:4px 10px;border:1px solid var(--line-2);border-radius:99px;color:var(--text-2);background:var(--bg-soft);}
.chip b{color:var(--text);font-weight:500;}
section{padding-top:52px;scroll-margin-top:20px;}
h2{font-size:23px;font-weight:600;margin:0 0 6px;letter-spacing:-.01em;display:flex;align-items:baseline;gap:10px;}
h2 .num{
font-family:var(--mono);font-size:13px;font-weight:500;color:var(--brand);
background:var(--brand-soft);border-radius:6px;padding:2px 8px;flex:none;
}
.lead{color:var(--text-2);margin:0 0 20px;max-width:880px;}
h3{font-size:16px;font-weight:600;margin:30px 0 10px;}
h4{font-size:14px;font-weight:600;margin:22px 0 8px;color:var(--text);}
p{margin:0 0 12px;}
ul,ol{margin:0 0 14px;padding-left:22px;}
li{margin:4px 0;}
strong{font-weight:600;}
code:not(pre code){
font-family:var(--mono);font-size:.88em;background:var(--code-bg);
border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--brand-deep);
}
.note{border-left:3px solid var(--brand);background:var(--bg-soft);border-radius:0 var(--radius) var(--radius) 0;padding:12px 16px;margin:16px 0;font-size:14px;color:var(--text-2);}
.note b{color:var(--text);}
.note.warn{border-left-color:#E5A100;}
.note.pitfall{border-left-color:#B3261E;}
.note .t{display:block;font-weight:600;color:var(--text);margin-bottom:2px;font-size:13px;}
.tw{overflow-x:auto;margin:14px 0 20px;border:1px solid var(--line);border-radius:var(--radius);}
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:560px;}
table.wide{min-width:980px;}
thead th{
background:var(--bg-soft);text-align:left;font-weight:500;color:var(--text);
padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:13px;
}
tbody td{padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--text-2);}
tbody tr:last-child td{border-bottom:none;}
tbody td:first-child{color:var(--text);font-weight:500;}
tbody td code{white-space:nowrap;}
.col-ark{background:#F9FBFF;}
.codetabs{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:14px 0 22px;background:#fff;}
.tabbar{display:flex;background:var(--bg-soft);border-bottom:1px solid var(--line);overflow-x:auto;}
.tab-btn{
appearance:none;background:transparent;border:none;border-bottom:2px solid transparent;
padding:9px 15px;font-size:12.5px;font-family:var(--sans);color:var(--text-3);
cursor:pointer;white-space:nowrap;font-weight:500;
}
.tab-btn:hover{color:var(--text-2);}
.tab-btn.active{color:var(--text);border-bottom-color:var(--brand);background:#fff;}
.tab-btn[data-lang="swift"].active{border-bottom-color:var(--swift);}
.tab-btn[data-lang="compose"].active{border-bottom-color:var(--compose);}
.tab-btn[data-lang="java"].active{border-bottom-color:var(--java);}
.tab-btn[data-lang="objc"].active{border-bottom-color:var(--objc);}
.tab-sep{
display:flex;align-items:center;flex:none;
padding:0 6px 0 14px;margin-left:6px;border-left:1px solid var(--line-2);
color:var(--text-3);font-size:11px;white-space:nowrap;
}
.tab-pane{display:none;margin:0;padding:16px 18px;overflow-x:auto;background:var(--code-bg);}
.tab-pane.active{display:block;}
pre{margin:0;font-family:var(--mono);font-size:12.5px;line-height:1.7;color:#1F2430;}
pre code{font-family:inherit;}
.c{color:#7A8291;font-style:italic;}
.s{color:#0F7B5F;}
.a{color:#7A3E9D;}
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-soft);}
.flow .step{background:#fff;border:1px solid var(--line-2);border-radius:8px;padding:8px 12px;font-size:12.5px;line-height:1.4;text-align:center;min-width:96px;}
.flow .step b{display:block;font-size:12.5px;font-weight:600;color:var(--text);}
.flow .step span{color:var(--text-3);font-size:11.5px;}
.flow .arw{color:var(--text-3);font-size:15px;flex:none;}
.pill{display:inline-block;font-size:11.5px;padding:1px 8px;border-radius:99px;font-weight:500;line-height:1.6;background:var(--bg-soft);border:1px solid var(--line);color:var(--text-2);}
hr{border:none;border-top:1px solid var(--line);margin:44px 0 0;}
/* ====== §15 界面还原:手机样机 ====== */
.phones{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:26px;margin:22px 0 6px;}
.phones.duo{grid-template-columns:repeat(2,minmax(220px,256px));justify-content:center;}
.demo{display:grid;grid-template-columns:256px minmax(0,1fr);gap:30px;align-items:start;margin:20px 0 6px;}
.demo .dnote{font-size:13.5px;line-height:1.8;color:var(--text-2);padding-top:2px;}
.demo .dnote b{color:var(--text);font-weight:600;}
.demo .dnote .k{display:block;margin:9px 0 0;font-family:var(--mono);font-size:12px;color:var(--text-3);line-height:1.65;}
.demo .dnote .k em{font-style:normal;color:var(--brand-deep);}
.unit{display:flex;flex-direction:column;gap:9px;min-width:0;}
.unit>p{margin:0;font-size:12.5px;color:var(--text-3);line-height:1.55;text-align:center;}
.unit>p b{color:var(--text-2);font-weight:600;}
.phone{
position:relative;width:100%;max-width:256px;margin:0 auto;height:450px;background:#fff;
border:1px solid var(--line-2);border-radius:24px;
box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 26px rgba(16,24,40,.07);
display:flex;flex-direction:column;overflow:hidden;
}
.p-status{flex:none;height:26px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:10.5px;font-weight:600;color:var(--text);}
.p-status .r{font-size:10px;color:var(--text-3);letter-spacing:.05em;font-weight:500;}
.p-nav{flex:none;height:46px;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--line);font-size:14px;font-weight:600;}
.p-nav .back{color:var(--brand);font-size:16px;flex:none;line-height:1;}
.p-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
.p-body.gray{background:var(--bg-soft);}
.p-body.mid{align-items:center;justify-content:center;gap:16px;}
.p-home{flex:none;height:18px;display:flex;align-items:center;justify-content:center;}
.p-home i{display:block;width:92px;height:4px;border-radius:99px;background:#1C1C1E;opacity:.2;}
.u-btn{appearance:none;border:none;background:var(--brand);color:#fff;font-family:var(--sans);font-size:13.5px;font-weight:500;border-radius:8px;padding:9px 26px;cursor:pointer;transition:background .15s;}
.u-btn:active{background:var(--brand-deep);}
.u-btn.block{width:100%;height:40px;padding:0;border-radius:8px;font-size:14px;}
.u-img{border-radius:12px;background:var(--brand-soft);border:1px solid #D9E5FB;display:flex;align-items:center;justify-content:center;color:#88AEEE;}
.u-card{background:#fff;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 3px rgba(16,24,40,.05);}
.u-row{display:flex;align-items:center;gap:8px;}
.u-name{font-size:15px;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);}
.u-price{font-size:17px;font-weight:600;color:#E23A2E;}
.u-sub{font-size:12.5px;color:var(--text-3);line-height:1.5;}
.u-li{display:flex;align-items:center;gap:10px;padding:0 14px;height:54px;border-bottom:1px solid var(--line);background:#fff;}
.u-li:last-child{border-bottom:none;}
.u-thumb{width:32px;height:32px;border-radius:8px;background:var(--brand-soft);border:1px solid #D9E5FB;flex:none;}
.grid9{display:grid;grid-template-columns:70px repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 8px;}
.grid9 .lb{font-family:var(--mono);font-size:11px;color:var(--text-3);display:flex;align-items:center;line-height:1.3;}
.grid9 .hd{font-family:var(--mono);font-size:11px;color:var(--text-3);text-align:center;padding-bottom:2px;line-height:1.3;}
.grid9 .cell{height:82px;border:1px solid var(--line);border-radius:8px;background:var(--bg-soft);display:flex;flex-direction:column;padding:7px;gap:4px;}
.grid9 .bx{width:26px;height:18px;border-radius:4px;background:var(--brand);opacity:.85;flex:none;}
.rc{position:relative;height:174px;margin:14px 0 8px;border:1px dashed var(--line-2);border-radius:12px;background:var(--bg-soft);}
.rc .n{position:absolute;background:#fff;border:1px solid var(--line-2);border-radius:8px;padding:6px 10px;font-size:11.5px;color:var(--text-2);line-height:1.4;}
.rc .n b{color:var(--brand-deep);font-weight:500;}
@media (max-width:1000px){
.shell{grid-template-columns:1fr;}
.demo{grid-template-columns:1fr;}
.phones.duo{grid-template-columns:1fr;}
.toc{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line);padding:16px 20px;}
.toc a{display:inline-block;margin:2px 4px 2px 0;font-size:12.5px;}
main{padding:0 20px 80px;}
.hero{padding:32px 0 24px;}
.hero h1{font-size:24px;}
.hero h1 span{font-size:16px;}
}
</style>

看的头大,ai 改变世界