Electron 桌面应用

227 阅读1分钟

说明

electron 是用前端的技术写Windows macos linux 上可安装软件的技术,是前端人员扩充自己技术体系的已个高大上的技术,它可以结合现在主流的前端框架vue,react,anglar,构建桌面应用,也可以像写jquery项目一样写桌面应用,现在我就写个简单的hellow word!

第一步

创建一个项目文件夹,(不要用中文!不要有空格!)

第二步

npm init -y  //生成一个package.json 来管理这个项目
{
  "name": "demo04",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

项目默认以index.js 为主入口,(可以自己修改)你就创建一个index的js文件

第三步

安装electron npm i electron --save 这一步很困难,因为资源在国外,安装很慢,而且很容易安装失败,我就把我安装好的依赖传到我公司svn服务器,供大家下载,http://s.tronl.cn/weixin/node_modules.rar

第四步

在项目中创建一个index.html,里面随便写点内容

我的入口文件 我给改成main.js了,这个你们随意,叫啥都行,一定要和package.json里相对应就行

第五步

在main.js里敲入下面代码

 const {app,BrowserWindow}=require('electron')
 var win=null //这个一定要是全局变量,避免js垃圾回收机制回收了
 app.on('ready',()=>{
     win=new BrowserWindow({
         width:300,
         height:900
     })
     win.loadFile('index.html')
 })
 app.on('closed',()=>{
     win=null
 })

第六步

执行命令electron .这是让你项目跑起来,然后它会给你打开你的软件

也可以自己配置一个喜欢的命令 ,比如我习惯用vue ,就可以配置一个 npm run dev

路漫漫其修远兮,吾将上下而求索。 欢迎大家指正