给新手的最简单electron使用教程

我花了两个月闲暇翻译完了文档,大概是目前最完整最实时的中文文档了,有需要可以去看看学学:github传送门,大多数的需求阅读文档即可解决,实际上,翻译文档正是我入门一项未知事物时的最简单常用的法子.

electron其实很方便,不过对于刚接触的前端而言学起来可能比较麻烦,因为不少都需要命令行来.
这是篇简单的入门教程,省略了诸多步骤,只纯粹了解win下的electron使用前提,安装方法,使用教程,打包四个环节.

---

Electron安装方法:
由于上文中传送门里的文档已经非常简便的阐明安装方法,极其之简单,这里不再重复.需要的同学可前往阅读.

---

线上打包:
很多朋友都是web站好了再利用electron做个壳子给客户,这样就免了启动浏览器.
想法是好的,但思路是不太应该的.
因为它本身带的api还是很不错的,你应该按着electron构建你的web,这样才是更聪明的办法.
偏偏明知不聪明,我们就有这样的需求时:

打开c:/electron-quick-start/,我们只要这几个文件,其余删了.
    .git
    node_modules
    .gitignore
    main.js
    package.json
    找到createWindow()修改成以下:

function createWindow () {
  mainWindow = new BrowserWindow({width: 1200, height: 800,frame: false })
  mainWindow.loadURL('http://www.baidu.com')
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

---

进行打包:

打包之前,运行cmd,输入npm install -g electron-packager
cd c:/electron-quick-start
c:/electron-quick-start/>electron-packager ./ --platform=win32 --arch=ia32
这样c:/electron-quick-start下就多了个程序目录,修改图标和程序名就是你的第一个exe应用了.

对于新手而言,就这么简单的进行了一次尝试.接下来你只要专心学习它的API,必定能开发出更强大的应用.这就是这篇教程的意义.如果你在开发时遇到一些自觉文档无法提及的需求可以在上文传送门中提出,我若有空大部分情况下会为你做出解决方案,事实上在介绍页中已列出了很多小例子.