Chinaunix首页 | 论坛 | 认证专区 | 博客 登录 | 注册

xdsnet的技术留痕xdsnet.blog.chinaunix.net

绝对原创 关于linux/web开发/媒体技术应用/教育平台开发的工作记录

  • 博客访问: 348095
  • 博文数量: 100
  • 博客积分: 1773
  • 博客等级: 上尉
  • 技术积分: 1621
  • 用 户 组: 普通用户
  • 注册时间: 2007-08-17 23:28
  • 认证徽章:
文章分类
文章存档

2017年(10)

2016年(7)

2015年(48)

2014年(4)

2013年(5)

2012年(4)

2011年(7)

2010年(7)

2009年(3)

2008年(1)

2007年(4)

微信关注

IT168企业级官微



微信号:IT168qiye



系统架构师大会



微信号:SACC2013

订阅
热词专题

分类: Windows平台

Electron作为一种用javascript写桌面程序的开发方式,现在已经被大众接受。下面就介绍如何在windows(>win7)下快速搭建Electron开发环境。
1. nodejs 的安装
nodejs 下载最新版本的windows安装程序进行安装,我下载的是v6.6.0,安装时一路默认即可,这个安装会把nodejs和npm配置到系统PATH中,
这样在命令行的任何位置都可以直接用node执行nodejs,用npm执行npm命令。因为可能的wall问题,所以建议把npm的仓库切换到国内taobao仓库,执行下面的命令:
  1. npm config set registry "https://registry.npm.taobao.org/"
2. Electron的安装
因为前面已经启用了node/npm,所以可以采用npm的方法安装Electron。
为了测试的方便,我是在命令行窗口中采用下面的命令:
  1. npm install -g electron 
把Electron安装到系统全局中的。你也可以在你开发项目下采用不加'-g'的命令进行安装。

3. 编程环境安装
当前微软提供了一个强大的免费开发工具VISUAL STUDIO CODE ,直接下载安装即可,它支持nodejs等的代码提示,很是方便。

4. 打包输出工具
为了方便最终成果输出,建议安装electron-packager工具,安装也很简单,建议以下面的命令全局安装。
  1. npm install -g electron-packager
5. 如果需要采用git进行版本控制,建议安装git工具
直接在git 下载最新版本的安装即可。

至此实际上开发环境已经搭建好了。下面说一下开发流程。

到空白的项目目录中,打开命令行窗口(也可以打开git bash)
0. 如果需要git,先做
  1. git init
1.构建项目package.json文件
  1. npm init
根据需要输入内容(下面的内容根据Electron Quick start编写)。即在package.json中有如下内容:
  1.  { 
          "name" : "electron-quick-start", 
          "version" : "1.0.0", 
          "main" : "main.js" 
    }
    
    
2.重新写入依赖
  1. npm install electron --save
  2. npm install electron-packager --save-dev
3.在main.js中输入
  1. const {app, BrowserWindow} = require('electron')

  2. let win

  3. function createWindow () {
  4.  
  5.   win = new BrowserWindow({width: 800, height: 600})

  6.   win.loadURL(`file://${__dirname}/index.html`)

  7.   win.webContents.openDevTools()

  8.   // 处理窗口关闭
  9.   win.on('closed', () => {
  10.     win = null
  11.   })
  12. }

  13. // Electron初始化完成
  14. app.on('ready', createWindow)

  15. // 处理退出
  16. app.on('window-all-closed', () => {
  17.   if (process.platform !== 'darwin') {
  18.     app.quit()
  19.   }
  20. })

  21. app.on('activate', () => {
  22.   if (win === null) {
  23.     createWindow()
  24.   }
  25. })
4. 在index.html中输入
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>Hello World!</title>
  6.   </head>
  7.   <body>
  8.     <h1>Hello World!</h1>
  9.     node 当前使用的node为<script>document.write(process.versions.node)</script>,
  10.     Chrome 为<script>document.write(process.versions.chrome)</script>,
  11.     和 Electron 为<script>document.write(process.versions.electron)</script>.
  12.   </body>
  13. </html>
5. 测试执行
  1. electron .
这将打开一个新的窗口,如图
也可以统一纳入npm管理,即在package.json中添加字段定义
  1. "scripts": {
  2. "start":"electron ."
  3. }
这样就可以在命令行中用 npm start 来启动程序。
6. 打包输出
  1. electron-packager . --platform=win32
将在项目目录下建立一个输出文件夹“electron-quick-start-win32-x64”(注意这里的目录名称win32-x64前的部分是package.json中name字段值),里面就是放置的整个项目的打包,可以复制这个文件夹到任何win32环境中运行(其中electron-quick-start.exe其启动文件),这个工作也可以纳入npm统一管理,在package.json 的“scripts”字段下增加子字段定义即可。如:

  1. "scripts": {
  2. "start":"electron .",
  3. "win32pack":"electron-packager . --platform=win32 --overwrite"
  4. }
这样就可以在命令行中用 npm run win32pack 来输出win32环境下的打包程序("--overwrite"选项用于覆盖输出)。

阅读(5638) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册