未加星标

Electron + VsCode 开发javaScript客户端程序

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

简介:

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 启动

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


Electron + VsCode 开发javaScript客户端程序

选择Node.js


Electron + VsCode 开发javaScript客户端程序

这时会在你的项目中 自动添加 .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 找不到调试线程而自动关闭程序


Electron + VsCode 开发javaScript客户端程序

五.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"
Electron + VsCode 开发javaScript客户端程序

六.常用语法

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 设置快捷键


Electron + VsCode 开发javaScript客户端程序

2.点击文件→首选项→键映射扩展

同样会弹出这个页面点击下载即可

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: Node.js其实
分页:12
转载请注明
本文标题:Electron + VsCode 开发javaScript客户端程序
本站链接:http://www.codesec.net/view/533879.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(93)