Windows Electron初探

Posted 学习、实践、总结

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Windows Electron初探相关的知识，希望对你有一定的参考价值。

最近闲来无事，玩玩electron。

1、安装nodejs

下载地址：http://nodejs.cn/download/，下载64位。安装完成后，打开C:\Program Files\nodejs\node_modules\npm目录，编辑npmrc文件，添加electron_mirror="https://npm.taobao.org/mirrors/electron/"。添加Electron的镜像。

2、新建文件夹DesktopApp，然后新建三个文件：

main.js  主逻辑文件

index.html 页面文件

package.json nodejs标准文件

在DesktopApp文件夹下，运行npm install electron。安装完成后，自动生成：package-lock.json和node_modules文件夹。

3、main.js文件

const electron = require(‘electron‘);
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

var mainWindow = null;

app.on(‘window-all-closed‘, function() {
  if (process.platform != ‘darwin‘) {
    app.quit();
  }
});

app.on(‘ready‘, function() {
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL(‘file://‘ + __dirname + ‘/index.html‘);
  mainWindow.on(‘closed‘, function() {
    mainWindow = null;
  });
});

4、package.json文件

{
  "name": "DesktopApp",
  "version": "0.1.0",
  "main": "main.js",
  "dependencies": {
    "electron": "^1.6.11"
  }
}

5、index.html文件

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using io.js <script>document.write(process.version)</script>
    and Electron <script>document.write(process.versions[‘electron‘])</script>.
  </body>
</html>

6、运行：

C:\>D:\DesktopApp\node_modules\electron\dist\electron.exe D:\DesktopApp

（用局部安装的electron的exe文件来执行项目）

 

以上是关于Windows Electron初探的主要内容，如果未能解决你的问题，请参考以下文章

vscode代码片段建议bug

vue2.0 代码功能片段

初探JSP与LEeclipse

可以将Visual Studio代码配置为启动电子

在 electron-vue 中的 Windows 下的路径问题，path.resolve 替换为 path.posix.join 。

为 windows 创建应用安装程序 - Electron (electron-packager, electron-builder)