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


使用前提:"nodejs,git,electron国内镜像",如今的前端不管怎样,这几个是必须学会安装和部署的,磨刀也得先整个磨刀石嘛.
1:electron的国内镜像

方法:计算机右键-属性-高级系统设置-环境变量-新建:变量名:ELECTRON_MIRROR,变量值:http://npm.taobao.org/mirrors/electron/

2:Node.js安装地址
3:git安装地址
就这么简单,搞定了前提.


安装electron:
运行cmd,cd c:/或者在指定文件夹(本文假定为c:/)安装shift右键在此处打开命令

如electron官网所示,依次贴入以下三行代码:
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install && npm start
安装好了之后,你可以用c:/electron-quick-start/>electron .(空格点号别忘了,试试如果打开了个helloworld就是成功了)

使用方法:
在开始学习api直接,我们去下载elecron的demo来看看它的一些简单用法.
这就算入了门了,更详细的直接查看中文文档,对于英文盲而言,这个简直是福音.其实它的接口你只要稍微会js就基本看得懂,也就不讲解了,按照API去学.


线上打包:
很多朋友都是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,必定能开发出更强大的应用.这就是这篇教程的意义.

你可能感兴趣的文章

2 条评论

heruiwoniou 1月13日

最后打包是什么意思,没看懂呢

回复

味道还不错哦 作者 1月13日

就像是绿色版软件的压缩包一样,exe文件就是应用.新手到这一步就差不多明白了,接下来有需要还可以进行高大上点的制作成常见的程序安装包,方法也是众多.

回复

载入中...
味道还不错哦 味道还不错哦

360 声望

发布于专栏

深度

暂无

0 人关注

SegmentFault

一起探索更多未知

下载 App