electron

背景 在做Electron Windows 桌面应用时候，做鼠标悬浮到托盘图标上时显示一个悬浮框（例如做消息提醒），但因为Windows没有提供托盘mouse-enter/mouse-leave事件，无法直接做这个功能，考虑到还有mouse-move事件，弄个间接的方式实现。 实现步骤 1、监听mouse-move事件，当触发时，即也相当触发mouse-enter事件。 2、开始定时（100ms）获取托盘位置和鼠标位置，判断鼠标是否还在托盘图标里，当已不在时，触发mouse-leave事件并停止定时查询。 //判断鼠标是否还在托盘图标 trayBounds = tray.getBounds(); point = screen.getCursorScreenPoint(); if (!(trayBounds.x < point.x && trayBounds.y < point.y && point.x < (trayBounds.x + trayBounds.width) && point.y < (trayBounds.y + trayBounds.height))){ // 已不在托盘，触发mouse-leave } 3、当mouse-enter时，显示悬浮窗口到托盘上方，当mouse-enter，隐藏悬浮窗口。 PS：悬浮窗口需要设置置顶属性，且不显示在任务栏。 具体代码

ZooTeam 前端周刊｜第80期 浏览更多往期小报，请访问： weekly.zoo.team 深度：手写一个WebSocket协议 [7000字] 了解 webSocket 协议等内容 HTML/CSS/JS 是如何在浏览器中，渲染成你看到的页面？【图解Chrome】 - 云+社区 - 腾讯云 Chrome 算是程序员的标配了，从全球的市场份额来看，它在全球市场的份额已经超过 60%。 图解浏览器的基本工作原理 - 知乎 前言可能每一个前端工程师都想要理解浏览器的工作原理。我们希望知道从在浏览器地址栏中输入 url 到页面展现的短短几秒内浏览器究竟做了什么；我们希望了解平时常常听说的各种代码优化方案是究竟为什么能起到优化… 高阶组件 - 简书 如果一个函数操作其他函数，即将其他函数作为参数或将函数作为返回值，将其称为高阶函数。高阶组件(high-order component)类似于高阶函数，接收 React 组件... 「vue模块化按需编译，突破编译瓶颈」实战篇 - 掘金 今天偶然看github，看到了一个叫 webpack-virtual-modules 的项目，进去看了一下当时我就被它的设计给震惊了。这让我觉得不可思议，原来还可以这么玩。随后我便顺手把之前的模块化按需编译方案改进了一下，发现真的太爽了。 浏览器的工作原理：现代网络浏览器幕后揭秘 - HTML5 Rocks

一个git使用教程 https://：.com/jlord/git-it-electron#what-to-install 一个在线Github的功能教学：https://lab.github.com/ 看刚才改变的文件的区别。 git diff: Add GitHub username to Git 添加你的用户名到你的Git配置： (一次性的，所有仓库都是这个名字) git config --global user.username <USerNamE> 再核查一下： git config --global user.username git remote add origin https://github.com/chentianwei411/hello-world.git git push -u origin master 把master分支推到远程仓库origin。 -u 的意思是设置upstream ❓不明白。 提示： 设置URL给一个远程仓库, 改变一个远程仓库url git remote set-url <remoteName> <URL> 拉： git pull <remoteName> <branchName> 推： git push <remoteName> <branch> 增加一个远程仓库： git remote add <remoteName> <URL

之前一直使用C#编写桌面应用，也顺带写一些Web端应用。最近在看node时发现常用的vscode是用electron编写的，一种想吃螃蟹的念头就涌了上来。 在网上找了找electron的资料，也研究了一下官方文档，发现electron app其实就是一个chrome浏览器，UI全部都是使用web端技术编写的，因为之前一直使用Vue来写Web应用，所以自然就想到Vue+Electron的组合。 在网上找了找，居然有现成的轮子 Electron-Vue ，立即install使用，可是发现最后却不那么如人意，在最后build时，总是出错，后来终于发现是网络与build配置的问题。搞得人很头疼。 于是最后决定自己动手，将Vue生成的静态网页与Electron结合。 1.Vue使用webpack项目，build之后在dist文件夹中会有静态网页生成，这样生成的网页放在web容器中可以正确访问，但如果在本地直接打开引用文件路径会出错，后来发现是因为生成后的index.html与资源不在一个目录层。 修改webpack项目中config/index.js为 1 build: { 2 // Template for index.html 3 index: path.resolve(__dirname, '../dist/index.html' ), 4 5 // Paths 6

electron是什么 Electron 是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。 快速开始electron 直接运行github上关于electron的构建工具 git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install npm start 运行界面展示： electron与vue结合 上面是用electron构建的一个简单的空架构，下面讲如何将electron和vue结合。 1.此处拿一个空的vue项目来演示。 vue init webpack vue-empty cd vue-empty npm install // 安装electron npm install electron --save-dev npm install electron-packager --save-dev //这个是打成exe文件的插件 2.将vue项目中的 config/index.js 中的下面三个值改为相对路径（可参考下面我的修改） index:

一、项目概况 基于Electron+vue+electron-vue+vuex+Nodejs+vueVideoPlayer+electron-builder等技术仿制微信电脑端界面聊天室实例，实现消息发送/动态表情，图片/视频预览，拖拽图片/粘贴截图发送，朋友圈/红包/换肤等功能。 二、效果图 三、技术栈 框架技术：electron + electron-vue + vue 状态管理：Vuex 地址路由：Vue-router 字体图标：阿里iconfont字体图标库 弹窗插件：wcPop 打包工具：electron-builder 环境配置：Node.js + Chromium 图片预览：vue-photo-preview 视频组件：vue-video-player 如何配置开发环境及使用electron-vue，这里不作多介绍，可查阅官网及搜资料 https://simulatedgreg.gitbooks.io/electron-vue/content/cn/ https://github.com/SimulatedGREG/electron-vue 注意： 由于electron-vue作者长时间未更新，里面electron版本v2.0.4太旧，如遇问题，可升级到最新版本 ◆ Electron主进程index.js 通过BrowserWindow创建和控制浏览器窗口

在electron-vue中，一般有两个进程：主进程和渲染进程。这两个进程在框架搭建的时候就已经配置好了，它们之间能够正常的互相通讯。但是，由于某些操作比较耗时等原因，我们需要一个后台worker，以避免界面阻塞卡顿的不好体验。调研之后发现，electron可以使用多种后台工作方式：1. webworker；2. 使用隐藏的渲染进程。 webworker有一些优势：编写方便，轻量级。但是缺点是：不能直接使用页面中的数据，node的库函数对多线程支持不安全，打包困难。 使用隐藏的渲染进程优点是可以按照正常的node代码编写，缺点是与主渲染进程交互需要通过主进程来进行。 下面是如何创建隐藏的渲染进程并与另一个渲染进程互相通讯的示例： 首先，需要确定后台渲染进程的html页面位置，我们把它称为worker.html。下面的代码添加在index.js中： const workerURL = process.env.NODE_ENV === 'development' ? `worker.html` : `file: // ${__dirname}/worker.html` 对于开发模式，worker.html会从dist/electron/文件夹下读取。 接下来在createWindow()中添加如下代码，创建一个隐藏的渲染窗口，为了调试方便，可以将show参数设置为true：

上传Markdown文件内的本地图片至博客园 ​ 因为习惯使用Markdown格式做笔记，有时希望将它放到网上方便在任何有网络的地方查找。开始是放到Github中的，但是有时访问的速度太慢了所以准备将笔记放到博客园中，这样访问速度就快了。 ​ 但是使用Markdown写的文件中时不时会有几张图片，上传笔记的时候还要一个一个的去本地找照片，再上传到博客园上。如果说一两张图片还好，但是图片多了，这样重复无聊的动作就会让人烦躁，因此便产生了编写能自动上传Markdown中的本地图片，并自动改掉文章中的链接的程序的想法 ​ 上传图片需要账号信息，但只知道账号密码没啥用，因为不知道上传图片的API接口，而偶然的机会知道了Electron，它可以用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将 Chromium 和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。 ​ 也就是说只要用Eletron编写的程序，然后用它登录账号，程序就能存储其session，再使用ajax上传图片，这样就能自动附带上用户的session，然后就能上传图片了。额大概就这意思，反正我是这么理解的，使用说明如下 程序界面 程序界面如下，仿照PS做的 登陆账号 然后登录一下账号

热点随笔： · 几行c#代码，轻松搞定一个女大学生 （ 鱼丸粗面一碗 ） · 犹豫了许久，还是写个年总结记录一下吧 （ 邹琼俊 ） · 写给程序员的裁员防身指南 （ 陈树义 ） · 人人都爱写总结, 却少有人做计划 （ sherrywasp ） · 2018——而立之年 （ 左潇龙 ） · 乡下人回忆录之——2019的年前年后 （ 彪悍的代码不需要注释 ） · 一分钟搞懂你的博客为什么没人看 （ 鱼丸粗面一碗 ） · 【纯技术贴】.NETStandard FreeSql v0.0.9 功能预览 （ nicye ） · 自己动手用electron+vue开发博客园文章编辑器客户端【二】 （ liulun ） · 面试：“我最大的缺点是追求完美”，你当面试官是傻子！！ （ 闲鱼君 ） · 从拼多多优惠券事件看到的一些反思 （ 腾讯云+社区 ） · Spire高效稳定的.NET组件 （ 山治先生 ） 热点新闻： · 1年收割20亿智商税的小罐茶之父：我已经“骗”了你们5次！ · 搜索引擎百度已死：沦为替百家号导流的工具 · 马云：我从来不看大学文凭 这个不太重要 · 我去婚恋网站逛了逛，发现全是TM的骗子 · 传程序员锁死服务器搅黄游戏 600万打水漂 创始人负债数百万 · 崔永元：盘盘百度！ · 《百度已死》作者：百度股价大跌非文章直接引发|百度回应 · 火车票再见

距离上一次编写这个vscode在博客园发博客的插件已经过去好久了，那个时候vscode插件的功能也没有那么强大，期间有人提出问题来，也有人提出建议来，我一直没有抽出时间来维护，深感抱歉，直到有人加到我的群里我才下定决心要抽出时间来维护一下，毕竟还是有人想用的，不能让所有人失望吧。好了废话不说，下面介绍一下更新后的内容。 安装 从marketplace安装 点击左边的bar上面的扩展图标，然后在输入框输入 WriteCnblog 可以找到该插件，点击安装就可以了。 提示：如果是macOS或者Linux可能会从GitHub上下载一个支持获取剪切板图片的插件。 下载vsix安装 如果不想从扩展市场直接安装，也可以从GitHub上下载编译好的vsix进行安装，下载地址 https://github.com/kotcmm/writecnblog/releases 下载到本地后，如下图进行安装 用户相关配置 安装完插件后，需要配置用户信息，然后才可以进行下一步的操作 点击配置用户信息 输入MetaWeblog访问地址，按回车键（ 在 博客园配置 拉到最下面可以看到这个地址，拷贝过来填入） 输入用户名，按回车键 输入密码，按回车键 MetaWeblog访问地址 和 用户名 是存储在vscode的配置里面， 密码 存储在系统里面 Windowns凭据，或者是mac的钥匙串。