electron结合JAVAweb_桌⾯应⽤之electron开发与转换
桌⾯应⽤之electron开发与转换
⼀，介绍与需求
1.1，介绍
1. Electron简介
Electron是⽤HTML，CSS和JavaScript来构建跨平台桌⾯应⽤程序的⼀个开源库。 Electron通过将Chromium和Node.js合并到同⼀个运⾏时环境中，并将其打包为Mac，Windows和Linux系统下的应⽤来实现这⼀⽬的。⽬前，Electron已被Microsoft、Facebook、Slack和 Docker等⼤⼚接受，应⽤涉及开发⼯具、社交应⽤、⾳乐、游戏、⾦融等领域。
2. Node.js简介
Node.js 是⼀个基于 Chrome V8 引擎的 JavaScript 运⾏环境。
Node.js 使⽤了⼀个事件驱动、⾮阻塞式 I/O 的模型，使其轻量⼜⾼效。
3. 脚⼿架—electron-vue简介
electron-vue 是⼀个结合electron和Vue.js的项⽬，⾮常⽅便建⽴起electron应⽤程序模版。Vue.js是当前⽐较⽕的JavaScript MVVM 库, 它以数据驱动和组件化的思想构建前端应⽤，被越来越多的前端开发者接受。采⽤electron-vue脚⼿架之后，你可以使⽤ webpack、electron-packager 或 electron-builder，vue-router、vuex 等最常⽤的插件。
1.2，需求
开发跨平台的桌⾯应⽤
⼆，基于node开发
为了快速搭建应⽤框架，我们可以选择Electron的electron-quick-start项⽬
第⼀步：新建⽬录desktopApp，打开命令⾏，进⼊此⽬录，输⼊git命令下载electron-quick-start项⽬代码。
第⼆步：进⼊⽬录electron-quick-start，输⼊命令cnpm install，安装相关依赖包。
1 cd electron-quick-start
electron vue教程2 cnpm install
第三步：输⼊命令npm start，运⾏项⽬。如果弹出Hello World的窗⼝，说明项⽬运⾏成功。
1 npm start
第四步：配置静态资源⽂件
需要在项⽬⽂件夹下新建资源⽂件夹(这⾥新建名字为res的⽬录)，将程序发布所⽤的图标等资源统⼀放进资源⽂件夹进⾏管理。(打包windows exe需要ico⽂件像素为256*256)；
第五步：安装打包⼯具全局安装electron-builder模块
1 cnpm install electron-builder -g
安装完成后，可输⼊命令build --help，测试是否安装成功
第六步：添加electron-builder编译所需要的属性
1 "devDependencies": {
2 "electron": "^3.0.7"
3 },
4 "build": {
5 "appId": "ledou",
6 "copyright":"Y",
7 "productName":"乐⾖",
8 "dmg":{
9 "window":{10 "x":100,11
"y":100,12 "width":500,13 "height":300
14 }15 },16 "win":{17 "icon":"res/icon_net.png"
18 },19 "mac": {20 "icon": "res/icon.icns"
21 },22 "linux": {23 "icon": "res"
24 }25 }
第七步：打包应⽤
配置完成后在项⽬⽬录⾥执⾏命令build --win --x64。执⾏命令后即开始打包，⽆报错后即打包成功。如下图：
打包成功后，会在项⽬⽬录⾥⾃动⽣成dist⽬录，⾥边存有⽣成的桌⾯应⽤安装包。如下图：
然后双击乐⾖ Setup 1.安装运⾏即可
三，基于electron-vue开发
3.1，搭建项⽬并运⾏
第⼀步：安装vue-cli
electron-vue脚⼿架安装
1 npm install -g vue-cli
第⼆步：初始化项⽬
1 vue init simulatedgreg/electron-vue desktopApp
然后⼀路回车即可
第三步：编译并运⾏项⽬
执⾏下⾯的指令，如果没有报错，会⾃动弹出程序界⾯，说明程序运⾏起来了。
1 cd desktopApp
2 yarn (或者npm install)
3 yarn run dev(或者npm run dev)
第四步：项⽬打包
运⾏如下命令:
1 npm run build
如果看到如下结果，则表⽰打包成功
3.2，项⽬架构
⾃动⽣成了基本的代码结构
src/main/index.js是程序⼊⼝⽂件，electron-vue已经帮我们⽣成好代码。如果需要修改程序加载、窗⼝属性等设置，在这⾥修改。src/renderer/components：存放页⾯布局⽂件，你开发页⾯时在这个⽂件下创建页⾯的index.vue、index.js、index.css⽂件。src/renderer/router/index.js：设置页⾯转跳路由。
build：存放项⽬打包⽣成的安装包
四，应⽤与总结
4.1,build可以指定打包的类型
windows系统:build --win --x64/--x32
linux系统:build --linux
MAC本:build --mac
4.2,web打包成桌⾯应⽤
第⼀步：配置环境
2，安装nativefier
1 npm install nativefier –g
第⼆步：制作应⽤
命令⾏输⼊ nativefier [options] [dest]
其中options 是选项，targetUrl是⽬标链接，dest是⽣成位置，默认当前位置。以我的博客为例，最简单的命令为：
1 nativefier "wwwblogs/jackson-zhangjiang/"
第三步：效果
1，创建的快捷⽅式
2，打开的效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。