<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
运行你的应用
一旦你创建了最初的 main.js， index.html 和 package.json 这几个文件，你可能会想尝试在本地运行并测试，看看是不是和期望的那样正常运行。
主进程
在 Electron 里，运行 package.json 里 main 脚本的进程被称为主进程。在主进程运行的脚本可以以创建 web 页面的形式展示 GUI。
渲染进程
由于 Electron 使用 Chromium 来展示页面，所以 Chromium 的多进程结构也被充分利用。每个 Electron 的页面都在运行着自己的进程，这样的进程我们称之为渲染进程。
在一般浏览器中，网页通常会在沙盒环境下运行，并且不允许访问原生资源。然而，Electron 用户拥有在网页中调用 Node.js 的 APIs 的能力，可以与底层操作系统直接交互。
主进程与渲染进程的区别
主进程使用 BrowserWindow 实例创建页面。每个 BrowserWindow 实例都在自己的渲染进程里运行页面。当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。
主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的，并且只关心他们自己的页面。
由于在页面里管理原生 GUI 资源是非常危险而且容易造成资源泄露，所以在页面调用 GUI 相关的 APIs 是不被允许的。如果你想在网页里使用 GUI 操作，其对应的渲染进程必须与主进程进行通讯，请求主进程进行相关的 GUI 操作。
在 Electron，我们提供几种方法用于主进程和渲染进程之间的通讯。像 [ipcRenderer] 和 [ipcMain] 模块用于发送消息， [remote] 模块用于 RPC 方式通讯。
electron-prebuilt
[electron-prebuilt] 是一个 npm 模块，包含所使用的 Electron 预编译版本。
如果你已经用 npm 全局安装了它，你只需要按照如下方式直接运行你的应用：
electron .
如果你是局部安装，那运行：
./node_modules/.bin/electron .
手工下载 Electron 二进制文件
如果你手工下载了 Electron 的二进制文件，你也可以直接使用其中的二进制文件直接运行你的应用。
Windows
$ .\electron\electron.exe your-app\
Linux
$ ./electron/electron your-app/
macOS
$ ./Electron.app/Contents/MacOS/Electron your-app/
Electron.app 里面是 Electron 发布包
打造你第一个全端的桌面音乐播放器
新建一个my-music 的工程，npm init 初始化该项目，进入项目，查看package.json文件；
将my-music 下面的除了package.json文件拷贝到新建的目录下面；
安装依赖electron; 可以使用npm.taobao.com 淘宝镜像；
{
"name": "my-music",
"version": "1.0.0",
"description": "my-music use electron and vue",
"main": "main.js",
"scripts": {
"test": "electron ."
},
"keywords": [
"my-music",
"vue",
"electron"
],
"author": "gpxiao",
"license": "ISC",
"devDependencies": {
"electron-prebuilt": "^1.3.3"
}
}
安装依赖；
npm install electron-prebuilt --save-dev
安装完之后可以看到my-music\node_modules\.bin\electron.cmd 命令脚本；
我们可以配置package.json下面的test命令字： 来启动当前目录的index.html文件；
可以在当前目录下直接通过elctron运行该项目
"./node\_modules/.bin/electron" ./main.js
这样比较麻烦，可以在package.json中配置字段”test”
"test': "electron ."
那这样可以直接在命令行中 npm run test 即可运行了。
可以看到入口文件就是main.js，载入当前目录的index.html文件（Vue构建的一个音乐播放器代码），这里不细说,主要是通过Vue.js和vue-router，vue-resource开发的一个音乐播放器；
<body class="page">
<header class="header">
<a v-link="{ name: 'home' }"><i class="fa fa-expand"></i></a>
<h1><i class="fa fa-music"></i> Music Player</h1>
<a v-link="{ name: 'list' }"><i class="fa fa-list"></i></a>
</header>
<section class="main">
<router-view></router-view>
</section>
<script id="home\_tmpl" type="text/v-template">
<img src="assets/img/home.png" alt="" width="100%">
</script>
<script id="list\_tmpl" type="text/v-template">
<div class="list">
<ol>
<li v-for="item in list">
<a v-link="{ name: 'item', params: { id: item.id } }">
<span class="num">{{pad(item.id, 3)}}</span>
<div class="info">
<h3 class="title">{{item.name}}</h3>
<span class="artist">{{item.artist}}</span>
</div>
<span class="duration">{{item.duration}}</span>
<div class="photo"><img :src="item.poster"></div>
</a>
</li>
</ol>
</div>
</script>
<script id="item\_tmpl" type="text/v-template">
<div class="player">
<div class="disc">
<img :src="item.poster" alt="{{item.name}}" :style="{transform:'rotate(' + (item.current/item.duration\*360\*2) + 'deg)'}">
<span class="duration">{{convert(item.duration-item.current)}}</span>
</div>
<h2 class="title">{{item.name}}</h2>
<h3 class="artist">{{item.artist}}</h3>
<div class="lyric">
<p class="previous">人如天上的明月是不可拥有</p>
<p class="current">情如曲过只遗留无可挽救再分别</p>
<p class="next">为何只是失望填密我的空虚</p>
</div>
<input type="range" value="0" min="0" max="{{item.duration}}" v-model="item.current" @change="progress()">
<div class="controls">
<button><i class="fa fa-retweet"></i></button>
<button class="active" @click="prev()"><i class="fa fa-backward"></i></button>
<button class="active" @click="play()"><i class="fa" :class="{'fa-play':!item.playing, 'fa-pause':item.playing}"></i></button>
<button class="active" @click="next()"><i class="fa fa-forward"></i></button>
<button class="active"><i class="fa fa-random"></i></button>
</div>
</div>
</script>
<script src="libs/vue/vue.js"></script>
<script src="libs/vue-router/vue-router.js"></script>
<script src="libs/vue-resource/vue-resource.js"></script>
<script src="app.js"></script>
</body>
先看在浏览器中的效果
这样项目可以在electron运行起来的原因是： 在app.js中使用的都是jsonp的方式来获取服务端的数据，这样的话，就不存在跨域的问题了，只要服务器这边运行起来了，就可以通过jsonp的方式获得相应的数据；
如何讲我们的应用部署为一个桌面应用，双击就能打开？
应用部署
为了使用 Electron 部署你的应用程序，你存放应用程序的文件夹需要叫做 app 并且需要放在 Electron 的
资源文件夹下（在 macOS 中是指 Electron.app/Contents/Resources/，在 Linux 和 Windows 中是指 resources/）
就像这样：
在 macOS 中:
electron/Electron.app/Contents/Resources/app/
├── package.json
├── main.js
└── index.html
最后
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。
这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）
《前端开发四大模块核心知识笔记》
最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）
《前端开发四大模块核心知识笔记》
最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。
915
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
