electron安装

electron 的混合桌面之路

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

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

electron 到底是个啥?

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

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

主要有如下几个步骤:node

  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不错的支持了git

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 在线下载github

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

4. 离线下载chrome

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

4.安装electron或者直接使用

若是上面的步骤没有出现错误提示,那么直接使用便可,: D编程

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

5.编写第一个应用

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

  3. JSON格式api

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

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

相关文章
相关标签/搜索