介绍
目前，使用前端技术开发桌面应用已经越来越成熟，这使得前端同学也可以参与桌面应用的开发。目前类似的工具有electron，NW.js等。这里我们着重介绍下electron。
electron开发
electron是基于Node.js和Chromium做的一个工具。electron是的可以使用前端技术实现桌面开发，并且支持多平台运行。下面来讲下如何使用electron开发桌面app。
运行环境
首先在Node.js官网下载最新版本安装。
安装完毕后打开命令行，执行下面语句：
//npm官方安装需要fanqiang,建议使用cnpm安装(后面的安装尽量使用cnpm)，首先要安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g electron
hello world
一个最简单的electron项目包含三个文件, package.json, index.html, main.js。
首先在项目中创建这三个文件。
package.json是Node.js项目的配置文件，index.html是桌面应用的界面页面，main.js是应用的启动入口文件。其中，核心的文件是inde.html和main.js，下面来讲下这两个文件的细节。
index.html是应用的展示界面，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
main.js是electron应用的入口文件。主要用户启动electron的界面。可以通过以下代码来启动electron界面。
const electron = require('electron');
const { app } = electron;
const { BrowserWindow } = electron;
let win;
function createWindow() {
// 创建窗口并加载页面
win = new BrowserWindow({width: 800, height: 600});
win.loadURL(`file://${__dirname}/index.html`);
// 打开窗口的调试工具
win.webContents.openDevTools();
// 窗口关闭的监听
win.on('closed', () => {
win = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (win === null) {
createWindow();
}
});
package.json的格式和 Node 的完全一致，并且那个被 main 字段声明的脚本文件是你的应用的启动脚本，它运行在主进程上。你应用里的 package.json 看起来应该像：
{
"name": "Hello",
"version": "1.0.0",
"main": "main.js"
}
应用部署（插件版本）
比较常用的是electron-packager 和 electron-builder.
electron-packager
electron-packager可以将项目打包成各平台可直接运行的程序，比如app,exe等。打包出来的程序至少100M,这是跨平台工具无法避免的通病。善用ignore参数，排除程序运行不必要的包。
安装
cnpm install -g electron-packager用命令行进入项目目录执行(命令中的1.7.5是electron版本，可通过electron -v查询对应的版本)
electron-packager . hello ../ --electronVersion 1.7.5 --overwrite下面是该命令解释：
electron-packager <sourcedir> <sourcedir> --platform= <platform> win32,darwin --arch=all --electronVersion=1.6.10 --out=dist/ --overwrite --ignore=node_modules/electron-* --ignore=node_modules/.bin --ignore=.git --ignore=dist --prune
#*<sourcedir> ： 项目的位置
#*<sourcedir> ： 应用名
#*--out <out> ： 指定输出的目录
#*--electronVersion=<version> ： 指定编译的 electron-prebuilt 版本，可以使用前面prebuid安装的版本，查看命令 electron -h
#--platform=<platform> ： 打包的系统(darwin、win32、linux)
#--arch=<arch> ： 系统位数(ia32、x64)
# --icon=<icon> ： 指定应用的图标(Mac 为 .icns 文件，Windows 为 .ico 或 .png)
你好，想请教个问题。阁下的代码块风格是如何更换的？望赐教。
@owl 可以使用WP-googlecodeprettify