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.点击文件→首选项→键映射扩展一样会弹出这个页面点击下载便可