关于javascript:Electron登录注册桌面应用源码安装文件的打包方法

2次阅读

共计 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

正文完
javascript
发表至： javascript
2023-05-10
 0
Rust中文社区上线了在线中文论坛
关于javascript:传统与现代可视化-PK再生水厂二维工艺组态系统
JavaScript实现部分排序算法冒泡选择插入快排希尔
关于javascript:原生js实现基于base64数据复制图片到剪切板可以粘贴出图片模拟浏览器复制功能

站内搜索

-「」