4. 界面就是网页

这是什么：界面开发 = 在 Electron 里写界面，和你已经学过的网页开发一模一样。

为什么用：窗口只是个"显示器"，里面长什么样完全由 HTML/CSS/JS 决定——前端板块学的一切在这里 100% 适用，不用学任何新界面语法。

如何用：把 index.html 升级成一个带样式、带交互的页面，外部 CSS、外部 JS、CDN 引库全试一遍。

4.1 完整的项目结构

桌面应用的界面文件没有魔法后缀，就是普通网页文件。先在项目根目录建齐：

my-first-electron/
├── package.json
├── main.js        ← 主进程（第 3 章）
├── index.html     ← 界面结构
├── style.css      ← 界面样式
└── renderer.js    ← 界面交互

4.2 写一个像样的界面

index.html 换成：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>计数器</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="card">
    <h1>桌面计数器</h1>
    <p id="num">0</p>
    <button id="plus">+1</button>
    <button id="reset">归零</button>
  </div>
  <script src="renderer.js"></script>
</body>
</html>

style.css：

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  font-family: system-ui, sans-serif;
}

.card {
  background: #fff;
  border-radius: 12px;
  padding: 32px 48px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

#num {
  font-size: 64px;
  margin: 8px 0 16px;
}

button {
  font-size: 16px;
  padding: 8px 20px;
  margin: 0 4px;
  cursor: pointer;
}

renderer.js：

let count = 0
const num = document.getElementById('num')

document.getElementById('plus').addEventListener('click', () => {
  count++
  num.textContent = count
})

document.getElementById('reset').addEventListener('click', () => {
  count = 0
  num.textContent = count
})

npm start，你会看到：

窗口中央是一张白色卡片：
大数字 0，下面两个按钮。
点「+1」数字变大，点「归零」清零——
手感和你写过的任何网页完全一样。

4.3 和网页写法的对照

你想做的事	网页里	Electron 里
引外部样式	`<link rel="stylesheet" href="style.css">`	一样
引外部脚本	`<script src="renderer.js">`	一样
用 CDN 引 jQuery / Vue（UMD 版）	`<script src="https://...">`	一样，窗口联网就能加载
调试	F12 打开 DevTools	一样

唯一的规则：src、href 用相对路径（相对 index.html 所在目录），别写 / 开头的绝对路径——那是浏览器访问网站的习惯，这里加载的是本地文件。

4.4 在线运行场照常能用

想先在浏览器里把界面调好看再搬进 Electron？完全可以：界面就是网页，本站的前端在线运行场跑通的 HTML/CSS/JS，原样贴进项目就能用。先在线调样式，再进窗口做功能，效率最高。

框架（Vue / React）能不能用？能——它们的免构建 CDN 写法直接塞进 index.html 就生效；正式项目则在打包前加一步构建，第 7 章会提到。

❓ 常见翻车现场

Q1：样式不生效，DevTools 里 CSS 是空的

原因：<link> 路径写错，比如 href="/style.css" 开头多了 /。解决：改成相对路径 href="style.css"，保证 CSS 文件和 index.html 同目录。

Q2：按钮点了没反应，Console 报 Cannot read properties of null

原因：<script src="renderer.js"> 写在了 <head> 里，脚本运行时按钮还不存在。解决：把脚本标签放在 </body> 前——和网页的规矩一模一样。

Q3：CDN 的 <script> 加载不出来

原因：网络问题或 CDN 地址失效。解决：窗口联网才能加载 CDN；不确定时先在浏览器里直接打开那个 CDN 地址验证。

💡 动手改

给卡片加一个深色主题：把 body 背景改 #0f172a，卡片改 #1e293b、文字改白色
把 jQuery 的 CDN 写法贴进来，用 $('#plus').on('click', ...) 重写 +1 逻辑
加一个「-1」按钮，并在数字为 0 时把它禁用（disabled 属性）

📦 本章小结

Electron 界面 = 标准网页：HTML 结构、CSS 样式、JS 交互全套照搬
外部文件用相对路径引用，CDN 一样能用
在线运行场调好的界面可以原样搬进窗口
渲染进程只管界面；想碰系统能力，下一章开始搭桥

下一章：进程通信：IPC 🐸