Electron + VsCode 开发javaScript客户端程序

简介:

 Electron 是一款使用 Node 作为本地环境 的客户端开发软件
 可以在本地直接打开 html 页面,并使用 node 作为本地处理环境

 Electron 可以使用 html + css + javaScript 的方式开发客户端程序
 而且Electron 是一种跨平台环境

 不过本次重点并不是介绍 electron 在此推荐一篇知乎 博文
 https://zhuanlan.zhihu.com/p/... 来介绍 electron

一 .Electron 安装

 直接通过 此教程即可直接 安装并配置 elecron 运行所需要的 环境配置
 不过要记住 通过 npm 安装 electron 后,最好记一下electron 的安装路径,防止之后找着费劲
 http://www.kancloud.cn/winu/e...
 通过这个教程 基本的 electron 就可以跑起来了
 不过现在还没有和 编辑器绑定
 而且通过 cmd 启动的程序,log 是打到 cmd 中的并不方便调试.

二.使用 VSCode 开发
 直接通过VSCode 官网 下载并安装 VSCode (VSCode是一个免费软件,起码暂时是)
 打开VS Code 后通过 文件→打开文件夹,打开项目
 这时你的项目中 应该有3个文件 app.js index.html package.json
 不过这时还不能通过 VSCode 启动 项目

三.配置 VSCode 的Node 启动

 选择左侧测试标签页,点击配置下拉列表,选择添加配置

 

 选择Node.js

 

 这时会在你的项目中 自动添加 .vscode 文件夹 并创建 launch.json 文件
 不过这时 也只是应用了 node 的启动方式,而不是 electron,也就是说现在项目还是无法启动的

四.配置 VSCode 启动 Electron

 网上的教程 大多是通过 node_modules 下 .bin 中的 electron.cmd 执行程序启动
 不过如果直接建立文件,并且使用全局electron 执行程序,则没有 electron 这个启动文件
 所以只能通过其他方式配置

 找到项目文件夹,在文件夹中 创建 run.cmd 文件添加内容

 electron . --debug=5858

 更改 launch.json 文件,添加

 "runtimeExecutable": "${workspaceRoot}\\run.cmd"

 指向刚才添加的 文件

 添加 "port": 5858 指向上面 electron 配置的 调试端口

 当不配置调试线程时, 会因为VSCode 找不到调试线程而自动关闭程序

 

五.TypeScript 连续崩溃问题

 有时在编写 代码或者 运行程序时,VSCode 连续报出 TypeScript 崩溃问题
 解决办法在全局 安装 TypeScript ,如果无效 在本地安装 TypeScript

 全局安装

 npm install -g typescript

 本地安装(需要进入项目目录)

 npm install typescript     

 本地安装时 如果你的项目中 没添加过 node_modules
 这时会自动创建 node_modules 文件夹
 并在VsCode 中 点击 文件→首选项→设置
 这时 VSCode 会自动在项目根目录下 建立 .vscode 文件夹,并建立 setting.json 文件
 并在工作区设置中 添加

 "typescript.tsdk": "./node_modules/typescript/lib"

 

六.常用语法

 1.引用其他 js 文件
  在 Node 中 js文件引用其他js 文件并不是像java 等中是直接引用,必须在文件中 显示引用类文件并声明对象才可使用
  而其他文件中 可以调用到的 内容也必须通过特殊方式声明,使用:

    module.exports.str="string var";

  声明一条属性,使用:

    module.exports.testF = function(){
         console.log("testF")
    };

 声明一个方法
 在使用的js 页面中 使用

    const testjs = require("./js/test.js");

 引用并获取一个实例
 使用 对象名.方法/属性,调用方法或者属性

 2.electron 中跨进程的通信和传值

  在electron 中程序和页面的进程是独立的,进程之间只能通过特殊方式进行 消息传递
  这是为了防止在页面中调用本地文件API,使之直接读取/更改本地内容

  在electron 中主线程,和渲染线程,都以注册监听器的方式监听 由其他线程发来的信息

  主线程使用 ipcMain 获取主线程 ipc

    
    const ipc = require('electron').ipcMain;

  渲染线程使用 ipcRenderer 获取 ipc

    const ipc = require('electron').ipcRenderer; 

  两种线程使用 ipc.on 的形式注册"监听器"

    ipc.on('消息名', function ( e [, 参数 ][, 参数 ]) {
        console.log("收到客户端/页面 通信!");
    });         
           

  渲染线程使用 ipc.send 向主进程发送消息

    ipc.send('消息名' [,参数] );

  而主线程无法直接向渲染线程发送消息
  需要使用 接收消息时的 e对象返回消息

    e.sender.send('消息名' [,参数 ] );
           

  在主进程 与渲染进程直线 通信时
  可以直接传递对象参数,对象会在方法内自动被格式化为json字符串
  在接受方 接收消息时,第一个参数 会是 e,而不是发送方传入的 第一个参数

 3.electron 本地文件操作

  需要先获取 fs对象

    const rf = require("fs");
          

  使用 rf.writeFile 写入文件

     rf.writeFile('文件路径', '内容', function () {
         console("写入文件成功!");
     });

  使用 rf.read 读取文件

     var data = rf.readFileSync(filePath + fileName, "utf-8");

  Sync 为同步读取

---

这时已经能通过 VSCode 开发简单的 electron 程序了
不过其实还有一点需要注意,在实际开发中 VSCode 的快捷键更偏向于 之前VS 系列的快捷键
而不是 Eclipse 系列

这里其实已经有官方的解决办法了(两种方式 结果相同)

1.通过点击左侧 扩展按钮
输入 @recommended:keymaps 点击并安装 EclipseKeymap 设置快捷键

2.点击文件→首选项→键映射扩展
同样会弹出这个页面点击下载即可