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             // 用于跳转的// 点击按钮替换主过程页面URLdocument.getElementById('target').onclick = function () {    ipc.send('load-page', 'file://' + __dirname + './page/index.html');}/* 渲染过程局部 *//* 主过程局部 */const ipc = require('electron').ipcMain         // 跳转主过程// 不开新窗口/替换页面urlipc.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