<p>简介:</p>    <p>Electron 是一款使用 Node 作为本地环境 的客户端开发软件</p>    <p>可以在本地直接打开 html 页面,并使用 node 作为本地处理环境</p>    <p>Electron 可以使用 html + css + javaScript 的方式开发客户端程序</p>    <p>而且Electron 是一种跨平台环境</p>    <h3>一 .Electron 安装</h3>    <p>直接通过 此教程即可直接 安装并配置 elecron 运行所需要的 环境配置</p>    <p>不过要记住 通过 npm 安装 electron 后,最好记一下electron 的安装路径,防止之后找着费劲</p>    <p><a href="/misc/goto?guid=4959737202604492683" rel="nofollow,noindex">http://www.kancloud.cn/winu/e...</a></p>    <p>通过这个教程 基本的 electron 就可以跑起来了</p>    <p>不过现在还没有和 编辑器绑定</p>    <p>而且通过 cmd 启动的程序,log 是打到 cmd 中的并不方便调试.</p>    <h3>二.使用 VSCode 开发</h3>    <p>直接通过VSCode 官网 下载并安装 VSCode (VSCode是一个免费软件,起码暂时是)</p>    <p>打开VS Code 后通过 文件→打开文件夹,打开项目</p>    <p>这时你的项目中 应该有3个文件 app.js index.html package.json</p>    <p>不过这时还不能通过 VSCode 启动 项目</p>    <h3>三.配置 VSCode 的Node 启动</h3>    <p>选择左侧测试标签页,点击配置下拉列表,选择添加配置</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/25a924a5ca19f75a2f58f62ea5a2fafb.png"></p>    <p>选择Node.js</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/816d30895dbb837e00235a7feeff2fcf.png"></p>    <p>这时会在你的项目中 自动添加 .vscode 文件夹 并创建 launch.json 文件</p>    <p>不过这时 也只是应用了 node 的启动方式,而不是 electron,也就是说现在项目还是无法启动的</p>    <h3>四.配置 VSCode 启动 Electron</h3>    <p>网上的教程 大多是通过 node_modules 下 .bin 中的 electron.cmd 执行程序启动</p>    <p>不过如果直接建立文件,并且使用全局electron 执行程序,则没有 electron 这个启动文件</p>    <p>所以只能通过其他方式配置</p>    <p>找到项目文件夹,在文件夹中 创建 run.cmd 文件添加内容</p>    <pre>  electron . --debug=5858</pre>    <p>更改 launch.json 文件,添加</p>    <pre>  "runtimeExecutable": "${workspaceRoot}\\run.cmd"</pre>    <p>指向刚才添加的 文件</p>    <pre>  添加 "port": 5858 指向上面 electron 配置的 调试端口</pre>    <p>当不配置调试线程时, 会因为VSCode 找不到调试线程而自动关闭程序</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/16ee598eaff73f9ed101d530c33b4d9f.png"></p>    <h3>五.TypeScript 连续崩溃问题</h3>    <p>有时在编写 代码或者 运行程序时,VSCode 连续报出 TypeScript 崩溃问题</p>    <p>解决办法在全局 安装 TypeScript ,如果无效 在本地安装 TypeScript</p>    <p>全局安装</p>    <pre>  npm install -g typescript</pre>    <p>本地安装(需要进入项目目录)</p>    <pre>  npm install typescript</pre>    <p>本地安装时 如果你的项目中 没添加过 node_modules</p>    <p>这时会自动创建 node_modules 文件夹</p>    <p>并在VsCode 中 点击 文件→首选项→设置</p>    <p>这时 VSCode 会自动在项目根目录下 建立 .vscode 文件夹,并建立 setting.json 文件</p>    <p>并在工作区设置中 添加</p>    <pre>  "typescript.tsdk": "./node_modules/typescript/lib"</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/a36a1fd8216399bb486c78639511b4cf.png"></p>    <h3>六.常用语法</h3>    <p>1.引用其他 js 文件</p>    <p>在 Node 中 js文件引用其他js 文件并不是像java 等中是直接引用,必须在文件中 显示引用类文件并声明对象才可使用</p>    <p>而其他文件中 可以调用到的 内容也必须通过特殊方式声明,使用:</p>    <pre>  module.exports.str="string var";</pre>    <p>声明一条属性,使用:</p>    <pre>  module.exports.testF = function(){           console.log("testF")      };</pre>    <p>声明一个方法</p>    <p>在使用的js 页面中 使用</p>    <pre>  const testjs = require("./js/test.js");</pre>    <p>引用并获取一个实例</p>    <p>使用 对象名.方法/属性,调用方法或者属性</p>    <p>2.electron 中跨进程的通信和传值</p>    <p>在electron 中程序和页面的进程是独立的,进程之间只能通过特殊方式进行 消息传递</p>    <p>这是为了防止在页面中调用本地文件API,使之直接读取/更改本地内容</p>    <p>在electron 中主线程,和渲染线程,都以注册监听器的方式监听 由其他线程发来的信息</p>    <p>主线程使用 ipcMain 获取主线程 ipc</p>    <pre>  const ipc = require('electron').ipcMain;</pre>    <p>渲染线程使用 ipcRenderer 获取 ipc</p>    <pre>  const ipc = require('electron').ipcRenderer;</pre>    <p>两种线程使用 ipc.on 的形式注册"监听器"</p>    <pre>  ipc.on('消息名', function ( e [, 参数 ][, 参数 ]) {          console.log("收到客户端/页面 通信!");      });</pre>    <p>渲染线程使用 ipc.send 向主进程发送消息</p>    <pre>  ipc.send('消息名' [,参数] );</pre>    <p>而主线程无法直接向渲染线程发送消息</p>    <p>需要使用 接收消息时的 e对象返回消息</p>    <pre>  e.sender.send('消息名' [,参数 ] );</pre>    <p>在主进程 与渲染进程直线 通信时</p>    <p>可以直接传递对象参数,对象会在方法内自动被格式化为json字符串</p>    <p>在接受方 接收消息时,第一个参数 会是 e,而不是发送方传入的 第一个参数</p>    <p>3.electron 本地文件操作</p>    <p>需要先获取 fs对象</p>    <pre>  const rf = require("fs");</pre>    <p>使用 rf.writeFile 写入文件</p>    <pre>  rf.writeFile('文件路径', '内容', function () {           console("写入文件成功!");       });</pre>    <p>使用 rf.read 读取文件</p>    <pre>  var data = rf.readFileSync(filePath + fileName, "utf-8");</pre>    <p>Sync 为同步读取</p>    <p>这时已经能通过 VSCode 开发简单的 electron 程序了</p>    <p>不过其实还有一点需要注意,在实际开发中 VSCode 的快捷键更偏向于 之前VS 系列的快捷键</p>    <p>而不是 Eclipse 系列</p>    <p>这里其实已经有官方的解决办法了(两种方式 结果相同)</p>    <p>1.通过点击左侧 扩展按钮</p>    <p>输入 @recommended:keymaps 点击并安装 EclipseKeymap 设置快捷键</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/8467b97532cd6dd2827335f38e37b978.png"></p>    <p>2.点击文件→首选项→键映射扩展</p>    <p>同样会弹出这个页面点击下载即可</p>    <p> </p>    <p>来自：https://segmentfault.com/a/1190000008349657</p>    <p> </p>