用Electron包装一个mac桌面应用

最新推荐文章于 2024-01-11 15:32:38 发布
最新推荐文章于 2024-01-11 15:32:38 发布
阅读量618 收藏 1
点赞数
分类专栏： Javascript 文章标签： javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43518003/article/details/103782313
版权
这篇博客详细介绍了如何利用Electron框架，结合JavaScript、HTML和CSS来开发跨平台的桌面应用程序。首先，介绍了Electron的基本概念和官方资源；然后，强调了准备工作的关键点，包括安装Node.js和初始化npm项目；接着，讲解了安装Electron的步骤，并提示如果下载缓慢可以尝试使用cnpm。此外，还指导读者修改package.json文件，特别是设置main.js作为应用入口，并调整scripts以适应桌面应用的启动需求。最后，演示了运行和调试应用的方法。
摘要由CSDN通过智能技术生成

用Electron包装一个mac桌面应用

Electron介绍

使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
Electron官网

前提

安装好node.js
有现有的npm项目，或npm init一个新项目

安装

到已经有的项目中，安装electron

npm install --save-dev electron

如果速度很慢或停止很久不动，改用cnpm试一下

cnpm install --save-dev electron

修改package.json

{
   
  "name": "your-app",
  "version": "0.1.0",
  "scripts": {
   
    "start": "webpack-dev-server --open --hot --mode development",
  }
}

修改为：

{
   
  "name": "your-app",
最低0.47元/天 解锁文章
weixin_43518003
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
electron开发跨多平台Mac、Windows 和 Linux的桌面应用之自定义头部菜单以及右键菜单（八）
斗师——Ace
12-22 767
1.在主进程中自定义头部菜单： //创建main/menu.js文件 const electron=require("electron"); let Menu=electron.Menu; let template=[ { label:"文件", submenu:[ { label:"打开", ...
ElectroPHP:Electron + PHP = PHP桌面应用程序
05-25
macElectroPHP --platform = darwin构建：未检查聚苯乙烯要使用ElectroPHP，您只需要3个文件： package.json指向主应用程序文件并列出其详细信息和依赖项。 main.js主脚本。 主要过程index.php这是渲染过程。 渲染
electron打包成exe和dmg
09-12
win使用electron-packager打包成exe安装文件，实现和其他pc应用一样的安装步骤如 选择安装路径还有安装进度以及桌面快捷键功能，解决了出现electron默认的安装效果。Mac使用electron-builder打包成dmg文件，直接运行在Mac上
通过 electron 和 electron-packager 生成mac桌面图标
weixin_30338497的博客
12-14 1918
最近公司研发了一套内部使用的办公系统包括移动端+PC端，系统是基于javaWeb开发的，PC端要求制作一个可安装文件以方便员工使用（url路径记着有些麻烦）， 于是想到了electron。由于之前用过所以window的exe包很容易就生成了，到了mac时候出现了一些问题........所以记录下过程. 简单介绍下： Electron是由Github开发，用HTML，CSS和J...
Electron.js指南——macOS Dock
幽灵 逐梦--专栏
10-19 547
macOSDock Electron具有用于在macOS Dock中配置应用程序图标的API。存在一个仅限macOS的API来创建自定义停靠菜单，但是Electron还使用该应用的停靠图标来实现跨平台功能，例如最新文档和应用程序进度。 自定义停靠栏通常用于为用户不想为其打开整个应用程序窗口的任务添加快捷方式。 Terminal.app的码头菜单： 要设置自定义停靠菜单，可以使用app.dock.setMenu仅在macOS上可用的API： const { app, Menu } = r...
electron 嵌入java应用，并且嵌入redis,mysql,打包
一直在努力的程序猿
11-08 1825
electron 做桌面软件，想嵌入java 应用，需要用到jre1.8，redis（win3.xx,mac 7.x）,mysql8 并且能分别打包win和mac版本。资源文件结构如下图所示，所有的资源文件都是压缩版，并且已配置好。
app:适用于Argo的ElectronJS桌面应用程序
05-10
该存储库包含围绕的桌面Electron应用程序包装。 Mac用户 需要Mac OS X Catalina或更高版本。 从下载 ，然后双击运行它。 您可能会发现OS X不会启动Argo，因为它不是来自App Store。 要解决此问题，请打开System ...
httptoolkit-desktop：Electron包装器，用于为桌面构建和分发HTTP Toolkit
02-03
HTTP工具包桌面 此存储库包含的桌面构建设置， 是一个漂亮的，跨平台和开源HTTP（S）调试代理，分析器和客户端。 想要提交错误，请求功能或发送反馈？ 在上提交问题或对现有问题进行。这是什么？ 此仓库负责将...
桌面：适用于Windows，Mac和Linux的Mattermost桌面应用程序
02-03
机桌面应用程序，在Windows，Mac和Linux上运行。 最初由大谷优弥（Yuya Ochiai）创建为“最电子的”。 用 。 产品特点 桌面整合 跨多个服务器的多个团队的选项卡 桌面通知 Windows 10：吐司 Windows 7-8.1：类似...
irccloud-desktop：IRCCloud桌面应用程序
02-04
这是用于Windows，Linux和macOS的IRCCloud桌面应用程序的原型。 该应用程序将IRCCloud网站包装在本机窗口中。 该应用程序目前处于试验阶段，不受官方支持，但是它应提供与其他IRCCloud桌面包装器应用程序等效或更好...
Cali:Mac OSX上缺少的菜单栏日历小部件-基于Electron
04-29
卡利-Mac OSX中缺少的菜单栏日历小部件 它是什么？ Microsoft Windows用户熟悉单击任务栏上的日期/时间时弹出的日历小部件。 来自Windows背景，我发现Mac OSX中缺少简单的日历小部件，这太令人不安了！ 卡利由此诞生。 Cali是一个在菜单栏上运行的开源日历小部件。 它基于Atom Electron HTML5跨平台应用程序框架和Menubar插件。 有关更多信息和二进制下载，请访问 。 建造 npm install npm run build 依赖关系：使用Electron的Electron和Menubar应用程序插件构建。
解决electron 下载依赖慢打包拉去依赖失败
果冻
08-04 2914
解决electron npm install下载依赖慢或者下载依赖失败
Mac 安装electron缓慢的3种解决方案
空谷技术札记
07-12 6355
1. 通过 npm 命令配置 首先需要将npm的包下载地址改为淘宝镜像地址： 全局设置淘宝镜像源： npm config set registry https://registry.npm.taobao.org/ 然后将electron包下载地址注册位淘宝的镜像: npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/elec...
Electron打包mac环境问题及解决方案
qq_41662119的博客
04-15 2898
Electron打包mac版本的系列问题修复 主要针对Electron打包mac环境时，报的各种问题，依赖包加载失败等。 建议采用的打包方式： npm install electron-builder -g npm run pack (压缩静态资源) electron-builder -m （打包命令） electron-v1.8.2-win32-x64.zip下载失败 解决方案...
electron解决下载慢(亲测有效)
wx1458084829
08-26 5251
electron安装下载慢，亲测有效解决
有关electron依赖安装、打包的问题讨论
最新发布
Youisbeautiful的博客
01-11 1543
electron打包、无法定位程序输入点DiscardVirtualMemory于动态链接库 KERNEL32.dll上等问题的探讨。
Electron,打造上班划水摸鱼桌面小工具:“股票监控“软件
无聊看风景的博客
07-28 3290
最近一个朋友入了股市这个坑,大家都懂的,买了股票你有事没事就想摸出手机看两眼,但是作为一个员工被老板或者领导看到炒股肯定不是什么好事,所以他在公司炒股的时候总感觉不安心,心想如果把数据呈现在电脑桌面某个"隐秘的角落"上,可以放心大胆的盯盘了,在老板眼里他在认真工作,其实他是在划水,岂不美哉~ 听了朋友的一番要求,我陷入了沉思,看来他的工作很不饱和啊~不过朋友的这个要求还是可以实现的,因为最近刚好接触到了Electron,正好用Electron试试水 什么是Electron? Electron是一个能让你使用
Electron桌面悬浮球工具，支持拖动及配置，提供了待办事项、快速笔记等功能。
Baday的博客
04-22 2287
HiLoop是一个简约的桌面悬浮球工具，支持拖动及配置，提供了待办事项、快速笔记等功能。使用electron及vuejs开发，数据存储使用sqlite3。
electron打包太慢解决方法
热门推荐
weixin_34344677的博客
08-11 1万+
2019独角兽企业重金招聘Python工程师标准>>> ...
用electron框架写一个桌面应用程序
03-31
Electron是一个允许使用Web技术（HTML，CSS，JavaScript）构建跨平台桌面应用程序的框架。下面是一个简单的Electron桌面应用程序的示例： 1. 安装Node.js和npm 在开始之前，需要先安装Node.js和npm。如果您已经安装了，请跳过此步骤。 2. 初始化项目 使用npm初始化一个新的Electron项目： ``` npm init ``` 3. 安装Electron 安装Electron： ``` npm install electron --save-dev ``` 4. 创建主进程文件 在项目根目录下创建一个名为main.js的文件，它将作为应用程序的主进程。以下是一个简单的示例代码： ``` const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadFile('index.html') } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) ``` 5. 创建渲染进程文件 在项目根目录下创建一个名为index.html的文件，它将作为应用程序的渲染进程。以下是一个简单的示例代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html> ``` 6. 运行应用程序 运行应用程序： ``` npm start ``` 这将启动Electron应用程序。您将看到一个窗口，其中包含一个标题为“Hello World！”的文本。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值