Windows|Electron登录注册桌面应用源码+安装文件的打包方法 Windows

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

效果展示：

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). 创建窗口

(2). 跳转窗口1——创建新窗口

(3). 跳转窗口2——替换本窗口页面

(4). 网络请求——GET ， POST

(5). electron中使用jquery解决方法。

(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：应用版本；
【Windows|Electron登录注册桌面应用源码+安装文件的打包方法】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

Windows|Electron登录注册桌面应用源码+安装文件的打包方法

推荐阅读

小米11|安卓之光！小米顶级机皇11 Ultra官宣降价：3999元起

广州东湖风景区?广州东湖公园有什么景点_1

娄底新闻网@勇攀高峰——娄底农商银行召开2019年度股东大会，攻坚克难

尘良|吃起不油腻脆甜开胃，低脂肪还不怕发胖，鸡肉和一水果是绝配

战略投资者|863亿战投力挺恒大拆除警报

『深蹲』如何锻炼出完美好身体，在这一方面练习，拥有曲线美再也不是梦

北青网综合|“刷单兼职”动动手指就能赚钱？有人被骗了8万多！

「白鹤」大家族，9只极危物种白鹤首现广东

大白菜茶是什么茶,新加坡茶怎么泡好喝

光绪元宝|「俊」原创：和而不同

湖人|和隆多最不来电湖人大将！隆多35次助攻，给了戴维斯8次，给了他0次

梦中的那片海|一个人的表演拖垮全剧，《梦中的那片海》的败笔演员，换掉就好了

数码产品选购攻略，这样买不吃亏不上当

林彪|辽沈战役中的“信息差”：毛泽东、林彪、蒋介石的判断为何不同

虫草冬虫夏草真假辨别方法

有书共读|都在沉默中蔓延，情感的隔阂

央视新闻客户端|欲组建太空北约，俄官员：美国将探月项目政治化

三十万买的新车，竟有不少瑕疵，要求全款退车遭拒

笑星坊|我有点喝多，关系好的一男生送我回家，笑到抽筋的笑话：同学聚会

乌托邦娱闻|穿低胸吊带秀少女身材，40岁嫩的像20岁，高圆圆胆真肥