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

2017-01-13 10:49:58来源:segmentfault作者:味道还不错哦人点击

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,必定能开发出更强大的应用.这就是这篇教程的意义.

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台