MyException - 我的异常网
当前位置:我的异常网» Web前端 » electron 的混同桌面之路 入门安装

electron 的混同桌面之路 入门安装

www.MyException.Cn  网友分享于:2013-12-18  浏览:0次
electron 的混合桌面之路 入门安装

最近有计划去写桌面程序,所以呢,我打算写一篇博客来记录使用21世纪逼格最高的技术的入门文档。

electron 的混合桌面之路

首先假装很厉害的样子介绍一下Github 官方制作的Atom代码编辑器,这个编辑器是使用electron技术开发的号称21世纪最富有变化的可扩展的编辑器(A hackable text editor for the 21st Century)。

  1. 界面简单直观,代码高亮,智能提示补全的功能都还算强大贴心
  2. 它可拥有灰常多的插件,插件的编写也十分便利,javascript就可以为其写插件
  3. 最重要的是它让无数人看到了HTML/CSS/JS桌面程序的未来

electron 究竟是个啥?

一句话:这是个在node.js平台上运行的为了一些专门的功能而制作的浏览器 
node.js: 一个编程专用的浏览器环境,可写javascript 
electron: 打包了一个特制的chrome浏览器和node.js ,然后我们加载网页就行了,嚯嚯哒

那么,怎么使用这个electron,牛的很的技术呢

主要有以下几个步骤:

  1. 下载并安装node.js
  2. 检查node.js和npm是否安装成功(npm就是node.js 的一个商店,专门提供各种小功能【各种模块】)
  3. 下载electron,注意:在线安装不行的话请出门右转选择离线安装
  4. 安装electron或者直接使用
  5. 编写第一个应用

1.下载并安装node.js

node.js官网:https://nodejs.org/en/ 建议下载 4.x的版本,这个版本已经实现对ES6不错的支持了

2.检查node.js和npm是否安装成功

  1. 命令行:node -v
  2. 命令行:npm -v

3.下载electron

electron官网:http://electron.atom.io/ PS.应该是,我觉得 
GitHub 坐标:https://github.com/electron/electron api 官方文档才是解决问题的王道 
中文翻译官方文档:https://github.com/electron/electron/tree/master/docs-translations/zh-CN 
3. npm 在线下载

 - 命令行:npm install electron -g (加g 全局安装,自动添加到环境变量)
 - 命令行:cd your-app-path 
 - 命令行:electron .\ (应用跑起来)
  • 1
  • 2
  • 3
  • 4

4. 离线下载

->到各家镜像网站摸一个electron下来 对应平台摸搞错了,很尴尬的 
宝宝镜像:https://npm.taobao.org/mirrors/electron/ 
GitHub:https://github.com/electron/electron/releases 
csdn 下载频道:地址忘了,自己找,我才懒得翻历史记录呢

4.安装electron或者直接使用

如果上面的步骤没有出现错误提示,那么直接使用即可,: D

  1. 命令行:electron .\ (你编写的应用的那个文件夹下执行)
  2. 离线安装的同学,请戳开electron.exe 把那个文件夹甩进去

5.编写第一个应用

  1. 随便弄个文件夹,新建一个文件:package.json
  2. 打开package.json,写入如下内容

    {
        "name": "你弄啥",
        "version": "0.0.1",
        "main": "main.js"
    }
    • 1
    • 2
    • 3
    • 4
    • 5

    JSON格式

    • name -> 你的应用名字
    • version -> 版本号
    • main: ->程序的主逻辑文件,node.js的写法
  3. 编写main.js,写入内容如下

var electron  = require('electron');
//寻求node.js的一个模块 electron ,并生成对象electron
//PS.早期版本的electron用的是app模块和browser-window模块
var {app} = electron; 
//{app} 是一个electron对象,控制整个应用,管理所有
var browserWindow = electron.BrowserWindow;
//browserWindow 对象被创造成一个electron的浏览器窗口对象
var mainWindow;//表示主窗口
function createWindow() {
    mainWindow = new browserWindow({height:600,width:800});
    //打开一个浏览器窗口,800×600
    mainWindow.loadURL('file://' + __dirname + '/app.html');
    //打开当前目录的app.html
}

app.on('ready',createWindow);
//{app}订阅了一个ready事件,
//这个事件会在整个应用启动过程完成后发生,此时会自动调用createWindow函数做一些事情了
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

剩下的事情就是如何编写页面了,看官方文档吧,骚年! 
我感觉优化的好的的话,以后Photoshop都可以用electron写! 
当然C/C++的功底是必须的,哈哈! 
PS. 现在可以用ES6写electron了,兼容性问题不大! 
electron 参考工具链:http://electron.atom.io/community/ 
LOL全新客户端也要用electron(准确的说的是直接编译的CEF)

文章评论

60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
中美印日四国程序员比较
中美印日四国程序员比较
漫画:程序员的工作
漫画:程序员的工作
编程语言是女人
编程语言是女人
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
程序员和编码员之间的区别
程序员和编码员之间的区别
如何成为一名黑客
如何成为一名黑客
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
老程序员的下场
老程序员的下场
一个程序员的时间管理
一个程序员的时间管理
10个调试和排错的小建议
10个调试和排错的小建议
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
程序员应该关注的一些事儿
程序员应该关注的一些事儿
代码女神横空出世
代码女神横空出世
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
 程序员的样子
程序员的样子
我的丈夫是个程序员
我的丈夫是个程序员
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
总结2014中国互联网十大段子
总结2014中国互联网十大段子
旅行,写作,编程
旅行,写作,编程
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
程序员都该阅读的书
程序员都该阅读的书
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
程序员必看的十大电影
程序员必看的十大电影
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
鲜为人知的编程真相
鲜为人知的编程真相
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
程序员的鄙视链
程序员的鄙视链
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
我是如何打败拖延症的
我是如何打败拖延症的
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
那些争议最大的编程观点
那些争议最大的编程观点
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有