共计 6028 个字符，预计需要花费 16 分钟才能阅读完成。
1. 成果展现
2. 前言
在当下流量简直被瓜分的背景下，如果说 Web 利用是从他人那里抢流量，那桌面利用和手机利用就是留住抢来的流量。Web 利用裸露在搜索引擎下，所以能够通过网络营销链接不便疾速的引流 web 产品上。
然而桌面和手机利用是封闭式的，这样就又能够从本人 Web 产品上导流，通过独到益处的性能减少用户粘性。那么本人的一套简略的互联网生态圈就能够定型了，前期再凋谢商户端口进行商业化经营。所以有了 Web 和 App 或小程序外，桌面利用也很有必要。
3.Electron 介绍
Electron 是一个能让你应用传统前端技术（Nodejs, Javascript, HTML, CSS）开发一个跨平台桌面利用的框架。这里所说的桌面利用指的是在 Windows、OSX 及 Linux 零碎上运行的程序。
4. 环境要求
(1). Node.js
(2). Cnpm
(3). Electron
(4). Visual Studio
(5). electron-packager 打包工具
5. 编码
Electron 的环境搭建网上也有很多，一下仅以开发案例阐明网络申请，主过程，渲染过程，窗口交互，利用的调试与打包等等。
(1). 创立窗口
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
const ipc = require('electron').ipcMain // 跳转主过程
let mainWindow = null; // 主窗口
function createWindow() {
// 创立主窗口
mainWindow = new BrowserWindow({
width: 340, // 窗口宽度
height: 280, // 窗口高度
//frame: false, // 勾销 window 自带的敞开最小化等
resizable: false, // 禁止扭转主窗口尺寸
webPreferences: {
nodeIntegration: true, // 解决在渲染层的其余 js 文件中呈现 require 无奈应用的状况【node 的形式引入模块】webSecurity: false,
preload: path.join(__dirname, 'preload.js')
}
})
// 加载本地页面到利用中
mainWindow.loadFile('index.html')
mainWindow.setMenu(null); // 敞开菜单栏
//mainWindow.webContents.openDevTools(); // 开启调试}(2). 跳转窗口 1——创立新窗口
// 渲染过程局部
const ipc = require('electron').ipcRenderer // 用于跳转的
// 1. 点击按钮关上新窗口
document.getElementById('target').onclick = function () {ipc.send('add');
}
// 渲染过程局部
// 主过程局部
const ipc = require('electron').ipcMain // 跳转主过程
let newwin;
ipc.on('add', () => {mainWindow.hide(); // 暗藏原窗口
newwin = new BrowserWindow({
width: 450,
height: 400,
resizable: false,
parent: mainWindow, // win 是主窗口 [原窗口]
webPreferences: {
nodeIntegration: true, // 解决在渲染层的其余 js 文件中呈现 require 无奈应用的状况【node 的形式引入模块】webSecurity: false // 跨域
}
})
newwin.setMenu(null); // 勾销原菜单
newwin.loadURL(path.join('file:', __dirname, './page/index.html')); //new.html 是新开窗口的渲染过程
//newwin.webContents.openDevTools();
newwin.on('closed', () => {newwin = null})
})
// 主过程局部 (3). 跳转窗口 2——替换本窗口页面
/* 渲染过程局部 */
const ipc = require('electron').ipcRenderer // 用于跳转的
// 点击按钮替换主过程页面 URL
document.getElementById('target').onclick = function () {ipc.send('load-page', 'file://' + __dirname + './page/index.html');
}
/* 渲染过程局部 */
/* 主过程局部 */
const ipc = require('electron').ipcMain // 跳转主过程
// 不开新窗口 / 替换页面 url
ipc.on('load-page', (event, arg) => {mainWindow.loadURL(arg);
});
/* 主过程局部 */(4). 网络申请——GET，POST
/* get 申请 */
function login_get(account, password) {
let url = 'http://www.mytp5.com/index/user/login?account=' + account + '&password='+password;
let request = net.request(url);
request.on('response', (response) => {console.log(response.statusCode);
console.log(response.headers);
response.on('data', (chunk) => {console.log(JSON.parse(chunk.toString()));
})
response.on('end', () => {console.log('end');
})
})
request.end();}
/* get 申请 */
/* post 申请 */
function profile_post(userid) {
let request = net.request({
method: 'POST', // 申请形式
protocol: 'http:', // 协定 http / https
hostname: 'www.mytp5.com', // 申请的域名
port: 80, // 端口
path: '/index/user/profile' // 申请的地址
})
request.on('response', (response) => {response.on('data', (chunk) => {let res = JSON.parse(chunk.toString());
let appendString = ''; // 追加数据
if (res.code == 200) {
appendString = '<p> 头像：<img src="' + res.data.avatar + '"style="width:50px;height:50px;border-radius:50px;"/></p>' +
'<p> 姓名：' + res.data.realname + '</p >' +
'<p> 年龄：' + res.data.age + '</p>' +
'<p> 登录次数：' + res.data.login_count + '</p>' +
'<p> 最近登录：' + res.data.last_login + '</p>' +
'<p> 座右铭：' + res.data.content + '</p>';
} else {appendString = '<p>' + res.msg + '</p>';}
// 这里执行时还遇到过页面追加中文乱码，解决办法 js 文件和 html 文件确定全副保留为 utf8
document.getElementById('profile_content').innerHTML = appendString;
console.log(appendString);
})
response.on('end', () => {//console.log('end');
})
})
// 申请参
let data = {userid: 11};
// 搜寻能够间接搜“node.js 的 request-promise 模块”找答案
request.write(require('querystring').stringify(data));
request.end();}
/* post 申请 */(5). electron 中应用 jquery 解决办法。
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script> <!--jq 解决方案 -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!--jq 申请 -->
<script type="text/javascript">
$("#login").click(function () {
let url = 'http://www.mytp5.com/index/user/login';
var account = $('#account').val();
var password = $('#password').val();
$.ajax({
type: "POST",
url: url,
data: {account: account, password},
success: function (res) {if (res.code != 200) {alert(res.msg);
return;
} else {alert('登录胜利');
console.log(res.data);
ipc.send('add');
}
}
})
});
</script>
<script src="./renderer.js"></script>
<script src="./static/js/index.js"></script>
<script>if (window.module) module = window.module;</script> <!--jq 解决方案 -->(6). electron 中应用 css 或禁止调整窗口和敞开默认菜单。
(7). 后盾接口局部，轻易测试写的。
6. 文件打包
electron 的打包会生成一个绿色软件装置目录，代码其实是齐全裸露在软件的一个资源文件中。加密混同网上也有其余解决方案，还一个是须要将绿色包打成 exe 安装包就须要应用 Inno Setup Compiler 的工具了。
(1). 装置 electron 打包工具 electron-packager
npm install electron-packager -g
(2). 配置打包命令
"scripts": {
"start": "electron .",
"pack": "electron-packager . myClient --win --out ../myClient --arch=x64 --app-version=0.0.1 --electron-version=2.0.0"
}命令构造如下（依据理论状况批改）：
“.”：须要打包的利用目录（即当前目录），
“myClient”：利用名称，
“–win”：打包平台（以 Windows 为例），
“–out ../myClient”：输入目录，
“–arch=64”：64 位，
“–app-version=0.0.1”：利用版本，
“–electron-version=2.0.0”：electron 版本
执行打包命令：
npm run pack
打包实现后，找到输入目录，关上打包实现后的文件夹。
(3). 下载安装 Inno Setup
装置实现当前关上 Inno Setup 客户端
a. file->new，新建脚本
b. 填写应用程序信息，黑体为必填项 Application name：利用名称；Application version：利用版本；Application publisher：发行单位（可选）；Application websiter：应用程序网址（可选）；
c. 欠缺利用文件信息 Application destination base folder：应用程序指标根本文件夹，可默认也可自定义；Application folder name：利用文件夹名称；Allow user to change the application folder：勾选，容许用户自定义装置地位；
d. 指定属于应用程序的文件 Application main executable file：应用程序主执行文件，即第 8 步中打包生成的.exe 文件；Allow user to start the application after Setup has finished：容许用户在装置实现后启动应用程序；Add folders：增加应用程序文件，抉择第 8 步中打包出的文件根目录即可，要把所有.dll 文件及其他配置文件都蕴含进去；
点击增加之后能够看到：
文件目录以本人的理论状况为准。e. 指定应用程序的快捷方式，勾选默认的两项即可，即“创立主执行程序的快捷方式到公共开始菜单程序文件夹”、“容许用户创立桌面快捷方式”
f. 指定装置期间要显示的文档文件 License file：许可文件；Information file shown before installation：装置之前显示信息文件；Information file shown after installation：装置之后显示信息文件；
g. 指定应包含的装置语言（汉化版的有简体中文选项），抉择之后点击下一步
h. 指定根本编译设置 Custom compiler output folder：自定义编译器输入文件夹，即最终编译出的安装包要放哪个地位；Compiler output base file name：编辑器输入根本文件名，即安装包名称；Custom Setup icon file：自定义安装程序图标文件；Setup password：装置明码；
i. 点击下一步
剩下的就是一路确定了，会询问你在编译之前要不要保留你的脚本（下面的配置步骤，最终会生成一个编译脚本文件），点击保留，先不要编译，关上脚本文件，新增配置项，批改注册表，设置开机自启动：
[Registry]
Root: HKLM; Subkey: "SOFTWARE\Microsoft\Windows\CurrentVersion\Run"; ValueType: string; ValueName: "testrun"; ValueData: "{app}\{#MyAppExeName}"而后，执行编译文件：build->compile
