Github为跨平台桌面应用的开发而生的框架Electron，这周发布了1.0版本。 通过这个框架，开发者可以通过HTML、CSS和JavaScript建立原生应用。...Github称，Electron app就像一个微型的网页浏览器一样，具有与本地文件系统交互的功能，网页浏览器已经打包在了app中。这样，应用就可以一次编写，在各个操作系统上运行。...1.0版本可以在electron.atom.io得到。1.0版本是一个帮助用户了解这个框架的API所实现的app。...除了Electron 1.0，Github还更新了Spectron——一个测试Electron应用的框架。...Spectron 3.0支持全部Electron API，这样开发者可以快速写测试程序，以保证应用在各种环境和参数下运行的情况良好。
在指定的目录下，我们使用如下的命令进行electron-vue的项目初始化： $ vue init simulatedgreg/electron-vue electron-vue-demo 然而，这个过程很慢...首先为什么会有这个额外下载的过程呢？...这里因为我们调试和构建的时候，就需要运行时，所以electron根据我们的当前的平台，去下载了对应已经完成针对平台编译封装的二进制内容。 为什么要下载的问题搞明白了，接下来我们要看看如何去下载。...有些朋友可能会发现，自己在进行electron二进制包下载的时候，速度慢的离谱。为什么这么慢？...is not defined，官方ISSUE已经存在该条：ISSUE 解决方案为：移除src\index.ejs中的该段代码，详细原因可以看ISSUE。
每次文章都从0开始 从搭建开始 使用的是electron-vue 毕竟方便一点 如果只想安装electron 请参见我的另一个文章https://segmentfault.com/a/11......cd project1 npm install //第一次安装的伙伴需要访问外国网站 如何访问外国网站请参加另一个文章(好像被和谐了 那就+我们的交流群 814270669 吧!)...下载完毕打开 下一步 下一步 就行了 傻瓜式安装 NSIS新建脚本 点击软件左上角文件->选择新建脚本(向导) 到应用程序信息这里 填写的应用程序名称必须和你package.json...编译过程可能稍微有点长1-3分钟吧 编译完成之后会自动运行安装程序 友情提示 杀软报毒 electron做的软件会被某流氓杀软报毒 没办法解决 在这里给出一个解决办法...下载完毕之后 放到NSIS目录下的 VNISEdit\Plugins 目录中 如果不知道目录 那就在桌面 右击VNISEdit 编译环境 选择打开所在目录 就可以看到了 在脚本最后加一句 编译完成后会后些方法
内置广告拦截器使用内置的广告拦截器，享受完全无广告的体验。浏览体验和视频播放中的所有广告均被阻止，因此您可以专注于观看，而不必一遍又一遍地单击“跳过广告”按钮。...本机推送通知获取有关您订阅的人的新视频，新评论以及直接发送到计算机的推荐视频的通知。本机macOS设计语言这个应用程式利用Apple的《人机介面指南》，让您在Mac上使用YouTube感到宾至如归。...真正的全屏浏览讨厌进入全屏模式，只是在点击另一个视频观看时被踢出？使用Clicker for YouTube，您可以在整个浏览和视频播放体验中保持全屏模式。...暗模式根据您的偏好自动切换到暗模式，或强制应用程序始终使用暗模式。做到你的眼睛。他们稍后会感谢您。视频上传借助YouTube Studio的全面支持，创作者还可以利用该应用轻松上传和管理自己的视频。...以Swift撰写，表现出色与使用Electron的类似应用程序不同，该应用程序是用Swift编写的，可显着提高电池性能，并减轻CPU负担。
应用程序安装目录 如果你在使用 electron-builder 打包你的应用时设置了不允许用户修改应用程序安装目录，那么你的应用程序会安装在用户的如下目录中： 64 位应用程序的安装目录：C:\Program...（通过electron-builder配置的其他的额外资源） 应用程序缓存目录 用户第一次启动 Electron 应用后，Electron 会在如下目录创建相应的缓存文件，该目录的文件结构及功能说明如下...setAsDefaultProtocolClient 方法，把自己的应用设置成可以通过外部连接唤起的应用，那么这个操作也会在用户的注册表内留下痕迹，如下为 GitHubDesktop 在我的注册表中写入的内容...\Quick Launch\User Pinned\TaskBar 在一些特殊的情况下，我们可能要更新这个快捷方式的目标程序，比如用户先安装了 32 位的应用程序，又安装 64 位的应用程序，此时用户固定在任务栏的图标指向的目标程序路径就是错的了...如果你还记得我们在“如何开发 Vite3 插件构建 Electron 开发环境”章节中介绍的知识，我们就是通过require("electron")获取 electron.exe 的路径的，如下代码所示
}; 在代码清单中，我们修改了getFileFromUser(),将对窗口的引用作为参数。我避免命名参数窗口，因为它可能与浏览器中的全局对象混淆。...在本节中，我们只允许应用程序在macOS中保持打开状态。默认情况下，当Electron触发它的window-all-closed事件时，它将退出应用程序。...如果我们想要阻止这种行为，我们必须监听这个事件，并且在macOS上运行时有条件地阻止它关闭。 列表5.11 在关闭所有窗口时保持应用程序的活动状态: ....activate事件只在macOS上触发，但是有很多原因可以解释为什么您可能选择让您的应用程序在Windows或Linux上保持打开状态，特别是如果应用程序正在运行后台进程，而您希望继续运行这些进程，即使该窗口被关闭...通过这两个额外的事件，我们将Fire Sale从单窗口应用程序转换为支持多窗口的应用。这个清单显示了主进程当前状态的代码。 列表5.13 在主进程中实现多个窗口: .
YouTube客户端是用于在移动设备上观看和上传视频的应用程序。通过YouTube客户端，您可以搜索和观看来自全球各地的视频，包括音乐、电影预告片、游戏视频、教育内容等。...内置广告拦截器 使用内置的广告拦截器，享受完全无广告的体验。浏览体验和视频播放中的所有广告均被阻止，因此您可以专注于观看，而不必一遍又一遍地单击“跳过广告”按钮。...本机macOS设计语言 这个应用程式利用Apple的《人机介面指南》，让您在Mac上使用YouTube感到宾至如归。 真正的全屏浏览 讨厌进入全屏模式，只是在点击另一个视频观看时被踢出？...使用Clicker for YouTube，您可以在整个浏览和视频播放体验中保持全屏模式。 暗模式 根据您的偏好自动切换到暗模式，或强制应用程序始终使用暗模式。做到你的眼睛。他们稍后会感谢您。...以Swift撰写，表现出色 与使用Electron的类似应用程序不同，该应用程序是用Swift编写的，可显着提高电池性能，并减轻CPU负担。
它是一个安装在Mac或Windows上的app程序，可以随时从Git上拉取最新代码选取分支和tag并自动打包构建不同环境上传至小程序后台的发布系统。 为什么叫J.A.R.V.I.S？...其中service-main.js作为service中express的的启动文件导出，并在main/index.js中与electron同时启动，index.js为启动electron的核心文件，最后会被...命令即可完成打包这一步，如果你不太了解环境编译打包这块内容，可以参考我之前的一篇文章"《武装你的小程序——开发流程指南》"； 代码实现 ?...build 打包app目录 build是app打包完成后的输出目录，这个文件可以存放你的项目图标，打包的时候electron会默认在这个目录下找图标，如果找不到就会使用electron默认图标。 ?...项目展望 当前项目已经可以在公司内部的生产环境中使用，但与内部项目耦合严重，不够灵活，同时还有一些未知的问题和不足，我会在后续慢慢完善和优化，待解耦完成代码足够健壮的情况下我会选择将项目代码开源出来，下面列出我后续将要实现的功能
electron在跨平台应用方面做的还是挺好的，著名的编辑器VS Code与Atom都是使用Electron来开发的。...我觉得touchbar是Mac上一个鸡肋的功能，我在使用Mac的时候很少去关注touchbar。昨天忽然想到Electron可以开发桌面应用，那么是否可以做touchbar相关的功能呢？...---- 运行官方的例子 官方给了一个老虎机的一个例子，这个例子还是很有趣的，感兴趣的可以直接点击这里查看。.../node_modules/.bin/electron touchbar.js 你可以看到我们安装Electron的时候加了一个ELECTRON_MIRROR的参数，为什么要带这个参数呢？...其实在npm install electron的时候会下载electron依赖，这个依赖有一个postinstall的脚本，该脚本会继续从github下载当前平台的Electron应用程序，由于国内对国外网站的限制
总结一下最近 electron 开发遇到的问题和一些重要知识点。 简介 如果你可以建一个网站，你就可以建一个桌面应用程序。...，不能直接访问操作系统，需要通信到主线程，在通过主线程操作访问操作形态，一个 BrowserWindow 实例即为一个渲染进程 技术栈 electron 整合了 Node 和浏览器的所有能力，可以随意发挥这些技术栈的特点...获取当前窗口：remote.getCurrentWindow() 问题点 打开外部浏览器 electron 的 shell 模块，可以使用 shell.openExternal(url) 在默认浏览器打开链接...启动后 loading 如果使用了 Vue 框架，在 Vue 初始化之前窗口虽然出现了，但是内容时空白的，可以在 Vue 实例 #app 里写一个 loading, Vue 加载完后会覆盖掉。... 阻止窗口关闭 可以在关闭前一些事件里做拦截，比如：onbeforeunload 等，详见 实例事件。
通常，您使用每个操作系统特定的本地应用程序框架为操作系统 (OS)创建一个桌面应用程序。 Electron 可以在使用您已经知道的技术后写入您的应用程序。...， 其次就是关于electron的api了，接下来我们一起来揭开这个小东西的神秘面纱吧！！...第 16 行：你通过调用 createWindow方法，在 electron app 第一次被初始化时创建了一个新的窗口。...在上面的代码中我们可以看到当我点击min 、max、close 三个按钮时 会通过 ipcRenderer.send 将指令发送到主进程中 ，在主进程中进行判断 ， 接下来我们看下主进程中是如何写的嘞...的部分内容已经完事了 ， 实力有限有好多地方没有在这里写 比如:在electron 中无法打开接口返回的视频链接 ， 会返回403 ， 这个问题 可以在 我的另一个开源项目中找到https://gitee.com
为什么叫J.A.R.V.I.S？ 老贾是唐尼的智能管家，项目启动的时候正值复联四热映，主要是为了纪念一下唐尼吧，在星期五和Jarvis两个名字中犹豫了好久，最后还是觉得Jarvis比较酷一点。...其中service-main.js作为service中express的的启动文件导出，并在main/index.js中与electron同时启动，index.js为启动electron的核心文件，最后会被...示例（关闭、放大、缩小） 这是vue定义的点击事件，通过发送不同的参数与electron的mian进行交互。...，这个文件可以存放你的项目图标，打包的时候electron会默认在这个目录下找图标，如果找不到就会使用electron默认图标。...，再到从web转移到使用electron开发app安装在本地的1.2.0版本这个过程中收获满满，这个过程使我在思考问题和代码设计、项目架构的搭建各个方面都有了一个全新的认识，与此同时也学习到了一些新的技术框架
在Electron早期作为 Atom 编辑器的一部分时，应用程序开发者通常通过手动编辑Electron二进制文件来为应用程序做分发准备。...第一次运行此命令需要一些时间来收集Rust包并构建所有内容，但在随后的运行中，它只需要重新构建您的应用程序代码，速度要快得多。...接下来，我也会详细介绍一下我们是如何扩展消息点击回调能力的。...通过调用这个函数，可以在Windows应用程序中创建并显示自定义的Toast通知，向用户展示相关信息。...总结：更新的核心原理就是通过使用Windows的PowerShell来对下载后的安装包进行open。然后由安装包进行安装。为什么我要花这么大的篇幅来介绍 Tauri 的更新原理呢？
Dear，大家好，我是“前端小鑫同学”，长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。...嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发...前情概要： 上一篇通过快速入门我们搭建了最基础的HelloWorld模型，我们接下来就要在这个最基础的项目中来做后续的基础性功能实战。 ...本篇说明： 主题切换在安卓、IOS、PC网站的应用的特别的广泛，在第一次接触flutter的时候第一次做状态切换的案例同样也是主题切换，巧了，学习electron的第一个案例也是，具体用到了哪些知识呢？...窗口创建后在主进程监听渲染进程的执行： 我们需要在出进程中监听对应的事件来最终切换主题的来源 // 主进程相应HTML上的点击事件 ipcMain.handle("dark-mode:toggle
2.技术选型为什么会选择Electron而不是其他应用开发框架？2.1 Electron架构简介Electron的构成主要是上面的3个大模块，每个模块各司其职，让Electron有了桌面应用的能力。...渲染进程：渲染过程负责运行应用程序的用户界面，渲染进程中提供了所有DOM API，Node.js API和Electron API的子集。...如上面截图，打开Electron项目之后会有多个进程，一个项目有且只有一个主进程，创建窗口等有关系统事件写在主进程中进行，但是渲染进程可能有多个。那为什么会有多个渲染进程呢？...所以在覆盖原文件同时需要退出应用避免占用，所以这个方式也不是很可靠。5.遇到的问题Electron 的硬件加速功能，在 win7 或者 Linux 系统上，容易出现黑屏或者卡死。...解决方案：当时是因为我没删除原来的包导致我放打包文件的C盘满了。。。所以删除一些缓存就好了，nsis打包大概率都是跟磁盘有关。
✧ 为什么不是单个进程? Web浏览器是非常复杂的应用程序。除了显示网页内容的主要功能外，它们还有许多次要的职责，比如管理多个窗口(或标签)和加载第三方扩展。...✧ 多进程模型 为了解决这个问题，Chrome团队决定每个标签将在自己的进程中渲染，以限制网页上的bug或恶意代码可能对整个应用程序造成的伤害。...然后，单个浏览器流程控制这些流程以及应用程序的整个生命周期。下面这张来自Chrome漫画的图表显示了这个模型: 主进程 ：每个Electron应用程序都有一个主进程，它作为应用程序的入口点。...BrowserWindow类的每个实例都创建了一个应用程序窗口，该窗口在单独的渲染进程中加载网页。你可以使用窗口的webContents对象让主进程与这个web内容交互。...该模块提供了大量的事件和方法，您可以使用它们来添加自定义的应用程序行为(例如，以编程退出应用程序的方式、修改应用程序上方的选项菜单等)。之后会专门开一节来详细讲解所有常用的生命周期。
该应用程序将利用只有在现代的浏览器中才能使用的特性。 在上一章的高层次讨论中，我提到了Electron是一个类似于Node的运行时。这仍然是正确的，但是我想回顾下这一点。...我们所有的代码文件都是完全空白的。因此，这个应用程序还有很多操作需要去做，但是它确实存在并正确启动。我们认为这是一场暂时的胜利。在windows上关闭应用程序的所有窗口或选择退出应用程序菜单终止进程。...我将包含链接到样式表的HTML标记—因为，在我作为web开发人员的20年里，我仍然不记得如何第一次尝试就做到这一点。 列表2.11 在HTML文档中引用样式表: ....你的应用程序中的标签应该和我们在本章早些时候讨论时一样，但是以防万一，我在下方给出代码: require('....如果我们点击应用程序中的任何链接，我们就会几乎被困在那里。我们唯一的选择是关闭应用程序，重新开始。 解决方案是在真正的浏览器中打开链接。但这引出了一个问题，哪个浏览器?
，但是需要注意几个事情 注意vux 的编码格式，需要在webpac里面配置 打开webpack.base.conf.js 修改配置，可以参考vux配置地址，具体根据文档参考，以下是我配置修改的代码，可参考...，注册的，但是你点击注册还是会跳转登录，这个怎么办了，很简单，你在点击注册的时候，传递一个值 这个值得类型，那些都由你自己定义，这个验证强制登录跳转的地方是在 src 目录下面的 store下面的 actions...地址都被换成一样的了，然后你此时再去循环，就可以 *完美的解决这个问题，2种方式，你都可以选择 *具体第二种关于一个new URL 之后会出现什么请访问以下网址 * http...install electron --save-dev npm install electron-builder --save-dev /* * 这个代码的意思是引入这个打包的js *...第二句的意思是进行打包命令 */ 引入完成之后,打开 package.json 文件在 script 中加入下面这2句代码 "scripts": { "electron_dev": "
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
