当前位置: 首页 > 后端技术 > Node.js

Electron+VsCode开发javaScript客户端程序

时间:2023-04-03 13:35:12 Node.js

简介:Electron是一款使用Node作为本地环境的客户端开发软件,您可以在本地直接打开html页面,并使用node作为本地处理环境。environment不过这次的重点不是引入electron。在这里推荐一篇知乎博文https://zhuanlan.zhihu.com/p/...介绍electron1.electron安装可以直接通过本教程直接安装安装配置electron运行所需的环境配置但是记住,通过npm安装electron后,最好记住electron的安装路径,以免以后不好找http://www.kancloud.cn/winu/e...通过这个electron的基础教程可以运行,但还没有绑定编辑器,程序是通过cmd启动的,log是在cmd中打的,不方便调试。2.使用VSCode开发直接通过VSCode官网下载并安装VSCode(VSCode是免费软件,至少目前是免费的)打开VSCode后,到文件→打开文件夹,打开项目这时候应该有是你项目中的3个文件app.jsindex.htmlpackage.jsonVSCode启动项目3.配置VSCode的Node启动选择左侧的测试选项卡,点击配置下拉列表,选择添加配置选择Node.js在此此时,.vscode文件夹会自动添加到你的项目中,并创建一个launch.json文件但是此时,只应用了node的启动方法,而不是electron,这意味着项目仍然无法启动。直接创建文件,使用全局electron执行程序,没有electron启动文件只能通过其他方式配置找到工程文件夹,在文件夹中创建run.cmd文件,添加内容electron。--调试=5858更改launch.json文件,添加"runtimeExecutable":"${workspaceRoot}\\run.cmd"指向刚才添加的文件添加"port":5858指向上面electron配置的调试端口调试时thread没有配置,会因为找不到debug线程,VSCode会自动关闭程序-gtypescript本地安装(需要进入项目目录)npminstalltypescript如果本地安装的时候你的项目没有添加node_modulesnode_modules文件夹此时会自动创建并在VsCode中点击File→Preferences→Settings此时VSCode会自动在项目根目录下创建一个.vscode文件夹,并创建一个setting.json文件并添加“typescript.tsdk”:”。/node_modules/typescript/lib”在工作空间设置中6.常用语法1.引用其他js文件在Node中JS文件引用其他js文件,而不是在java中直接引用等。必须在文件并声明对象后才可以使用而在其他文件中可以调用的内容也必须用特殊的方式声明,使用:module.exports.str="stringvar";声明一个属性,使用:module.exports.testF=function(){console.log("testF")};在使用的js页面声明一个方法useconsttestjs=require("./js/test.js");引用并获取一个实例?使用对象名称、方法/属性、调用方法或属性2.Electron中的跨进程通信和值传递Electron中程序和页面的进程是独立的,消息只能通过特殊方式在进程之间传递这是为了防止在页面中调用使用本地文件API直接读取/更改本地内容在electron中,主线程和渲染线程都通过注册监听器来监听其他线程发送的信息主线程使用ipcMain获取主线程ipcconstipc=require('电子').ipcMain;渲染线程使用ipcRenderer获取ipcconstipc=require('electron').ipcRenderer;两个线程都以ipc.on的形式注册“监听器”ipc.on('消息名称',function(e[,parameter][,parameter]){console.log("Receivedclient/pagecommunication!");});渲染线程使用ipc.send向主进程发送消息ipc.send('消息名'[,parameter]);主线程不能直接向渲染线程发送消息需要在接收消息时使用e对象返回消息e.sender.send('消息名'[,parameter]);通信时可以直接传递对象参数,方法中会自动将对象格式化为json字符串接收方收到消息时,第一个参数将是e,而不是发送方传入的第一个参数3.electron本地文件操作需要先获取fs对象constrf=require("fs");使用rf.writeFile写入文件rf.writeFile('filepath','content',function(){console("文件写入成功!");});使用rf.read读取文件vardata=rf.readFileSync(filePath+fileName,"utf-8");Sync为同步读取此时可以通过VSCode开发一个简单的electron程序。但其实还有一点需要注意的是,在实际开发中,VSCode的快捷键比起Eclipse系列更偏向于之前VS系列的快捷键。这里其实有官方的解决方案(两种方式结果是一样的)1.点击左侧扩展按钮输入@recommended:keymaps点击安装EclipseKeymap设置快捷键2.点击File→Preferences→KeymapExtension也会弹出这个页面点击下载