【Electron】第4章—renderer.js 与页面交互逻辑

一、renderer.js 的作用

接着上一章项目中：

txt 复制代码

src/renderer.js

属于：

txt 复制代码

渲染进程脚本

负责：

页面交互
按钮事件
修改页面内容
DOM 操作
前端逻辑

二、Electron 页面运行流程

当前页面运行流程：

txt 复制代码

index.html
    ↓
加载 renderer.js
    ↓
JavaScript 操作页面

三、先理解 DOM

网页中的：

html 复制代码

<button id="btn">

会变成：

txt 复制代码

页面对象

JavaScript 可以：

获取它
修改它
监听点击
改变样式

四、获取页面元素

HTML

修改：

txt 复制代码

index.html

在按钮下面增加：

html 复制代码

<div id="text">
    等待点击
</div>

页面变成：

html 复制代码

<body>

    <div class="container">

        <h1>Electron 学习</h1>

        <button id="btn">
            点击按钮
        </button>

        <div id="text">
            等待点击
        </div>

    </div>

    <script type="module" src="/src/renderer.js"></script>

</body>

五、开始写 renderer.js

打开：

txt 复制代码

src/renderer.js

清空默认内容。

替换为：

js 复制代码

const btn = document.getElementById('btn')

const text = document.getElementById('text')

btn.addEventListener('click', () => {

    text.innerText = '按钮被点击了'

})

六、效果说明

点击按钮后：

txt 复制代码

等待点击

会变成：

txt 复制代码

按钮被点击了

七、代码详细解析

1. 获取按钮

js 复制代码

const btn = document.getElementById('btn')

作用：

txt 复制代码

获取页面中的按钮对象

对应：

html 复制代码

<button id="btn">

2. 获取文本区域

js 复制代码

const text = document.getElementById('text')

对应：

html 复制代码

<div id="text">

3. addEventListener

js 复制代码

btn.addEventListener()

作用：

txt 复制代码

监听事件

4. click

js 复制代码

'click'

表示：

txt 复制代码

鼠标点击事件

5. 箭头函数

js 复制代码

() => {

}

表示：

txt 复制代码

点击后执行的代码

6. innerText

js 复制代码

text.innerText

作用：

txt 复制代码

修改文本内容

八、继续升级：计数器

现在实现：

txt 复制代码

点击次数统计

修改 renderer.js

替换为：

js 复制代码

const btn = document.getElementById('btn')

const text = document.getElementById('text')

let count = 0

btn.addEventListener('click', () => {

    count++

    text.innerText = `按钮点击次数：${count}`

})

九、学习新知识：变量

let

js 复制代码

let count = 0

表示：

txt 复制代码

定义变量

十、学习新知识：模板字符串

js 复制代码

`按钮点击次数：${count}`

作用：

txt 复制代码

把变量拼接到字符串中

十一、继续升级：修改按钮颜色

renderer.js

继续增加：

js 复制代码

btn.style.background = '#10b981'

完整代码：

js 复制代码

const btn = document.getElementById('btn')

const text = document.getElementById('text')

let count = 0

btn.addEventListener('click', () => {

    count++

    text.innerText = `按钮点击次数：${count}`

    btn.style.background = '#10b981'

})

十二、效果

点击按钮后：

文本变化
按钮变绿色

十三、DOM 操作思想

JavaScript 页面开发核心：

txt 复制代码

获取元素
    ↓
监听事件
    ↓
修改页面

这就是：

txt 复制代码

前端交互逻辑

十四、常见 DOM 操作

修改文本

js 复制代码

element.innerText = '内容'

修改 HTML

js 复制代码

element.innerHTML = '<b>内容</b>'

修改颜色

js 复制代码

element.style.color = 'red'

修改背景

js 复制代码

element.style.background = '#2563eb'

隐藏元素

js 复制代码

element.style.display = 'none'

显示元素

js 复制代码

element.style.display = 'block'

十五、本章重点

本章核心内容：

1. renderer.js 负责页面逻辑

2. document.getElementById()

用于获取页面元素。

3. addEventListener()

用于监听事件。

4. innerText

用于修改页面文本。

5. JavaScript 可以动态修改页面

包括：

文本
颜色
样式
显示状态