AntDesignPro使用electron构建桌面应用示例详解

目录
  • 注意事项声明
  • 主要分为两个部分
    • 开发环境使用
  • 打包应用配置
    • package.json配置打包后的路径方式
  • 使用 electron-builder 打包 exe 文件或者安装包,压缩包
    • 安装
    • package.json添加命令 (打包windows)
    • 添加打包配置
    • 执行打包命令
  • 使用 electron-packager 打包成 exe 文件
    • 执行命令
  • 提示

注意事项声明

  • 所有 node 包必须使用 npm 安装不可使用 cnpm, 使用 cnpm 安装的 node 包会导致打包时间无限可能
  • 具体区别查看使用 npmcnpm 安装的包结构
  • 所有包的均可以安装在全局, 避免重复安装

主要分为两个部分

开发环境使用

安装 electron 包

npm install electron --save-dev

package.js 添加入口文件

  "main": "main.js",

创建 main.js 入口文件 内容如下

const {app, BrowserWindow, dialog} = require('electron');
const path = require('path');
const url = require('url');
​
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;
​
function createWindow () {
​
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 1300,
    height: 800,
    frame: true,
    autoHideMenuBar: true,
    fullscreenable: true,
    transparent: false,
    webPreferences: {
      javascript: true,
      plugins: true,
      nodeIntegration: true, // Nodejs
      webSecurity: false,
      preload: path.join(__dirname, './preload.js')
    }
  });
  // mainWindow.webContents.openDevTools();//打开调试工具
​
    //测试时使用mainWindow.loadURL(http://localhost:80000);
    //打包时加载本地文件
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'dist/index.html'),
    protocol: 'file:',
    slashes: true
  }));
​
  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}
​
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
​
// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') app.quit()
});
​
app.on('activate', function () {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) createWindow()
});

preload.js 文件内添加, 将 electron 做全局导入 未做此操作无法在其他地方使用 electron 模块

global.electron = require('electron')

在 package.json 文件中加入启动命令

  "scripts": {
    "electron-start": "electron .",
  },

试启动 electron 窗口内容加载成功则成功

npm run electron-start

渲染进程如需和主进程通信查看官方文档

https://electronjs.org/docs/tutorial/application-architecture#main-and-renderer-processes

打包应用配置

config/config.js 文件添加

history: 'hash', //更改路由方式
publicPath: './', //使打包后的文件使用相对路径

src/utils/request.js 此目录并非标准 不同版本下文件可能有所区别 重点在于给请求配置前缀

当项目打包成应用后使用的是 file:协议 ant pro 的请求无法发出 需要使用完整的请求地址 目前方法为配置前缀

/**
* 配置request请求时的默认参数
*/
const request = extend({
  errorHandler, // 默认错误处理
  prefix: 'http://hotel-system.yc384.com/api', // 请求前缀
  credentials: 'include', // 默认请求是否带上cookie
});

package.json配置打包后的路径方式

"homepage": ".",

使用 electron-builder 打包 exe 文件或者安装包,压缩包

  • 提示:
  • 提前安装在全局可以省略不同环境重复安装
  • 创建 app 目录是为了不将 node 包打包进去,减少应用大小
  • 如果当前目录下没有 node 包或者内容较少可直接在当前操作, 省略 app 目录相关操作

安装

npm install electron-builder

package.json添加命令 (打包windows)

"electron-build": "electron-builder --win --x64"

添加打包配置

"build": {
"appId": "com.xxx.app",
"directories": {
  "output": "build"
}, // 打包后存放目录
  "mac": {// mac安装包dmg
  "target": ["dmg","zip"]
},
"win": {// win安装包nsis
  "target": ["nsis","zip"]
}

创建app目录(builder默认打包app下内容,否则会打包当前所有内容)

将ant pro打包后的dist文件和main.js放入app目录

在app下创建package.json文件(外层package做打包使用,app下的package是打包后的应用依赖)

"name": "hotel",
"version": "2.3.1",
"main": "main.js",

执行打包命令

打包后文件会在 build 目录下

npm run electron-build

使用 electron-packager 打包成 exe 文件

安装electron-package

npm install electron-packager --save-dev

package.json下script添加命令(具体含义百度)

"electron-package": "electron-packager . hotelSystem --win32 --out app --arch=x64 --overwrite --ignore=node_modulesls --electron-version=6.0.5",

执行命令

npm run electron-package

提示

  • 打包环境可以和开发环境分开 这样可以减少不必要依赖 缩短打包时间
  • 将打包后的 distmain.js 文件放入一个新目录
  • 配置 package.json 文件打包参数 其他删除即可
"name": "hotel",
"version": "2.3.1",
"main": "main.js",
"homepage": ".",
"scripts": {
  "electron-start": "electron .",
}

以上就是AntDesignPro使用electron构建桌面应用示例详解的详细内容,更多关于AntDesignPro electron构建桌面的资料请关注我们其它相关文章!

(0)

相关推荐

  • vue在antDesign框架或elementUI框架组件native事件中触发2次问题

    目录 vue在antDesign或elementUI组件native事件中触发2次 运用ant-design-vue组件库,且在项目中遇到的问题 难以改变的默认样式 让通知提醒框的内容自动换行 table组件表格出现时间时,格式问题 vue在antDesign或elementUI组件native事件中触发2次 打印event.target 核心思想是设置下event.target的过滤 运用ant-design-vue组件库,且在项目中遇到的问题 难以改变的默认样式 可能大家在运用到组件库的时候

  • 基于vue3+antDesign2+echarts 实现雷达图效果

    目录 右上角时间选择器的实现 五角雷达图的绘制及数据渲染 右上角时间选择器的实现 修改ant组件样式 根据原型图,该选择器为月份时间选择器,使用a-month-picker,但原始的月份选择器样式与设计图不符,需要进行修改,修改有分为两部分:1.选择框:2.额外弹出的日历 选择框样式修改 修改ant组件时应避免全局修改,如使用less语法,对ant组件的修改应在该页面的class下 <style lang="less" > @vw: 19.2vw; @vh: 10.8vh;

  • 如何在React项目中使用AntDesign

    目录 0.前言 1.AntDesign是什么? 2.AntDesign如何使用? 3.如何具体使用AntDdesign的组件 3-1.如何使用 antd 的Table组件 3-2.如何使用 antd 的Button组件 4.后续 0.前言 我们在后台管理系统React项目开发中会有Table表格.Form表单.List列表.Button按钮等组件,这个时候我们可以使用AntDesign来减少开发中不必要的样式问题. 1.AntDesign是什么? Ant Design 是一个 UI 设计语言,是

  • Vue3和Electron实现桌面端应用详解

    目录 Vue CLI 搭建Vue项目 Vue项目改造为markdown编辑器 Vue CLI Plugin Electron Builder 优化功能 启动全屏显示 修改菜单栏 编辑器打开markdonw文件的内容 markdonw的内容存入文件 打包 为了方便记录一些个人随笔,我最近用Laravel和Vue 3.0撸了一个博客系统,其中使用到了一个基于markdown-it的 markdown 编辑器Vue组件v-md-editor.我感觉用它去编写markdown还是很方便的.后面就有了一个

  • Makefile构建Golang项目示例详解

    目录 背景 创建项目并运行 添加 Makefile 文件 Makefile 概念 变量 使用 Makefile 自动化任务 背景 构建和测试大型项目时都会很耗时,且容易出错.开发者在开发过程中需要不断执行go build.go run .go test等相关命令.还可能需要多个命令来构建不同平台的二进制文件.在正式部署时候,我们可能还需要安装一些依赖项,或者在发布之前进行代码覆盖率测试等相关前置工作. 整个过程需要很多步骤,但我们有一种简单的方法可以解决这些复杂琐碎的步骤.使用 Make 进行自

  • Java8如何构建一个Stream示例详解

    Stream初体验 Stream是Java8中操作集合的一个重要特性,我们先来看看Java里面是怎么定义Stream的: "A sequence of elements supporting sequential and parallel aggregate operations." 我们来解读一下上面的那句话: 1.Stream是元素的集合,这点让Stream看起来用些类似Iterator: 2.可以支持顺序和并行的对原Stream进行汇聚的操作. Stream的创建方式有很多种,除

  • vue electron实现无边框窗口示例详解

    目录 一.前言 二.实现方案 1.创建无边框窗口 2.创建windows窗口控件组件 三.后记 一.前言 无边框窗口是不带外壳(包括窗口边框.工具栏等),只含有网页内容的窗口.对于一个产品来讲,桌面应用带边框的很少,因为丑(我们的UI觉得--与我无关-.-).因此我们就来展开说下,在做无边框窗口时候需要注意的事项以及我踩过的坑. 二.实现方案 1.创建无边框窗口 要创建无边框窗口,只需在 BrowserWindow的 options 中将 frame 设置为 false: const { Bro

  • Electron打包React生成桌面应用方法详解

    目录 一.Electron简介 二.搭建准备 三.创建基本应用程序 四.打包项目 一.Electron简介 Electron是一个能让你使用JavaScript,HTML和CSS来创建桌面应用程序的框架.这些应用程序可以打包后在 macOS.Windows 和 Linux 上直接运行. 在目前浏览器和移动端盛行的互联网环境下,跨平台的桌面应用开发,也为前端提供了一个新分支方向. 二.搭建准备 1.检查git和node是否安装完成 git --versionnode -vnpm -v 2.搭建Re

  • Python程序包的构建和发布过程示例详解

    关于我 编程界的一名小程序猿,目前在一个创业团队任team lead,技术栈涉及Android.Python.Java和Go,这个也是我们团队的主要技术栈. 联系:hylinux1024@gmail.com 当我们开发了一个开源项目时,就希望把这个项目打包然后发布到 pypi.org 上,别人就可以通过 pip install 的命令进行安装.本文的教程来自于 Python 官方文档 , 如有不正确的地方欢迎评论拍砖. 0x00 创建项目 本文使用到的项目目录为 ➜ packaging-tuto

  • 语言编程花絮内建构建顺序示例详解

    目录 1 构建 顺序 1.1 交叉编译 1.2 设置 2 构建测试支持 1 构建 顺序 依据词法名顺序 当导入一个包,且这个包 定义了 init(), 那么导入时init()将被执行. 具体执行顺序: 全局变量定义时的函数 import 执行导入 -> cont 执行常量 --> var 执行变量 --> 执行初始化 init() --> 执行 main() ----> main import pk1 ---> pk1 const ... import pk2 ---&

  • Electron 剪贴板实现示例详解

    目录 正文 availableFormats readText 和 writeText readHTML 和 writeHTML readImage 和 writeImage readRTF 和 writeRTF clear 正文 在浏览器中可以通过 JavaScript 脚本来读写剪贴板数据,常用的是 document.execCommand 方法: // 复制数据 const inputElement = document.querySelector('#input') inputEleme

  • Python人工智能构建简单聊天机器人示例详解

    目录 引言 什么是聊天机器人? 准备工作 创建聊天机器人 导入必要的库 定义响应集合 创建聊天机器人 运行聊天机器人 完整代码 结论 展望 引言 人工智能是计算机科学中一个非常热门的领域,近年来得到了越来越多的关注.它通过模拟人类思考过程和智能行为来实现对复杂任务的自主处理和学习,已经被广泛应用于许多领域,包括语音识别.自然语言处理.机器人技术.图像识别和推荐系统等. 本文将介绍如何使用Python构建一个简单的聊天机器人,以展示人工智能的基本原理和应用.我们将使用Python语言和自然语言处理

  • React项目使用ES6解决方案及JSX使用示例详解

    目录 不使用 ES6 绑定 JSX如何? 不使用 ES6 然而,在纯浏览器端使用ES6语法时,浏览器支持存在差异,这需要特殊处理才能正常运行. 支持ES2015桌面浏览器 Chrome:从51版开始,它可以支持ES6 97%的新功能. Firefox:53版本支持97%的ES6新功能. Safari:从版本10开始,ES6 99%的新功能都可以得到支持. IE:Edge 15可以支持96%的ES6新功能. Edge 14可以支持93%的新ES6功能.(IE7~11基本不支持ES6) class

随机推荐