electron

简介 electron-vchat实践聊天项目 是基于electron+vue+electron-vue+vuex+Node技术开发的仿微信客户端界面聊天室。有实现消息发送/表情，图片/视频预览，拖拽上传/粘贴截图发送/微信dll截图，右键菜单、朋友圈/红包/换肤等功能。 效果图 技术架构 框架技术：electron + electron-vue + vue 状态管理：Vuex 地址路由：Vue-router 字体图标：阿里iconfont字体图标库 弹窗插件：wcPop 打包工具：electron-builder 图片预览：vue-photo-preview 视频组件：vue-video-player /** * @Desc 公共及全局组件配置 * @about Q：282310962 wx：xy190310 */ // 引入公共组件 import winBar from './components/winbar' import sideBar from './components/sidebar' // 引入公共样式 import './assets/fonts/iconfont.css' import './assets/css/reset.css' import './assets/css/layout.css' // 引入弹窗wcPop import wcPop from

balenaEtcher Mac版是Mac平台上的一款刻录应用。balenaEtcher Mac版为您提供了将Mac系统上的映像轻松刻录到任何SD卡或USB硬盘的可能性，而无需您处理复杂的过程。所以，我们今天推荐了一个启动盘制作工具，很大程度上节省了我们的工作流程，提高了工作效率！ balenaEtcher for mac https://www.macdown.com/mac/5303.html balenaEtcher for mac常见功能 经过验证的刻录 不再需要在损坏的卡上写入图像，也不用担心为什么设备无法启动。 硬盘友好 使驱动器选择显而易见，避免擦拭整个硬盘驱动器 漂亮的界面 谁说刻录SD卡一定要引起人们的注意。 开源的 由JS，HTML，node.js和Electron制成。潜水和贡献！ 跨平台 适用于所有人，不再需要复杂的安装说明。 更多的方式 刻录速度提高50％，可同时写入多个驱动器。 balenaEtcher_maccj软件特色 闪烁时添加了特色项目 中心内容与窗口分辨率无关。 添加电子本地文件选择器组件。 隐藏不安全模式选项带有环境变量。 使用新的设计背景颜色和驱动步长顺序。 在localStorage的顶部添加一个便捷的Storage类。 引入env var切换所有驱动器的自动选择。 添加真棒字体。 添加对配置文件的支持 使用GTK-3

前几篇文章，我们介绍了一些开发中经常用到的功能，这篇文章我们主要是讲解下怎么发送系统通知，设置托盘 1.系统通知 其实Electron的系统通知比较简单，是用HTML5的Notification实现的，但是在这儿需要注意的是，windows平台发送通知是需要为程序设置appId（下一篇文章我们讲解下Electron怎么打包，怎么设置应用程序图标）。 通知一共有两种调用方式 HTML5 Notification API（渲染进程中使用） Notification模块（主进程中使用） 接下来，我们新建一个页面，来测试下渲染进程中怎么使用系统通知。 <template> <div> <el-button @click="sendNotification">发送系统通知</el-button> </div> </template> <script> export default { name: 'DemoTest', methods: { sendNotification () { const myNotification = new Notification('标题', { body: '通知正文内容' }) myNotification.onclick = () => { console.log('通知被点击') } } } } </script> 2.设置托盘 托盘属于系统级的操作

electron功能很强大，但是有一些跟操作系统底层交互的功能，electron无法实现，这个时候我们就可以调用原生来配合完成对应功能，本文主要讲解在macOS平台下，调用C++的dylib文件 在开始之前我们要安装 1.node-gyp npm install node-gyp -g 使用ffi-napi调用dll（c++） 1. 安装ffi-napi 执行 npm install ffi-napi --save 2. 准备C++动态链接库libdemo.dylib文件 libdemo.dylib文件可以去gitee中获取，也可以自己编译 gcc -g -shared demo.cpp -o libdemo.dylib electron-vue-demos gitee 地址 3. 调用libdemo.dylib文件中的方法 这里dll是找的别的写好的，dylib是我自己写的 let cpplib if (process.platform === 'darwin') { // 在使用libdemo的时候最好自己编译下cpp，命令gcc -g -shared demo.cpp -o libdemo.dylib let libPath // 在这儿需要判断下是开发环境还是打包环境，在mac上这两个环境用的路径不一样 if (process.env.NODE_ENV ===

MQTT X 是由全球领先的开源物联网中间件提供商 EMQ 开源的一款跨平台 MQTT 5.0 桌面客户端，它支持 macOS，Linux，Windows。 MQTT X 的用户界面借助聊天软件的形式简化了页面的操作逻辑，用户可以快速创建连接保存并同时建立多个连接客户端，方便用户快速测试 MQTT/TCP、MQTT/TLS 的连接、发布/订阅功能及其他特性。 项目地址： GitHub 官方网站： MQTT X Website MQTT X 适用于正在搭建自己的 MQTT 的消息服务器的用户来测试连接，订阅和发布消息等，在使用客户端时，用户既可以是发布者，也 可以是订阅者。也适用于正在开发或研究 MQTT Broker 的相关用户。在 MQTT 的研究与应用中，无论你身处什么阶段 都可以通过 MQTT X 快速、深入地理解 MQTT 协议相关特性。 该项目完全开源，项目采用了 Vue.js + TypeScript + Electron 的技术栈进行开发，你可以在 GitHub 上查看和浏览项目源码。欢迎前来一起讨论和学习 Electron 项目开发技术。 以下为 MQTT X 的特性和界面的预览： 跨平台，支持 Windows，macOS，Linux 完整支持 MQTT v3.1.1 以及 MQTT v5.0 协议 支持 CA、自签名证书，以及单、双向 SSL/TLS 认证

npm i - electron electron 会卡在 node install.js 这步通过以下方式解决 下载所需要的安装包： 下载链接：https://cdn.npm.taobao.org/dist/electron/8.0.1/electron-v8.0.1-win32-x64.zip V8.0.1 win版本 其他版本自行下载 在node_modules\electron\下创建dist文件夹。 将下载的压缩包解压进刚刚创建的dist目录。 在node_modules\electron\中创建path.txt，内容为electron.exe。 进入 这个文件夹 （环境不同路径不同 ）C:\Users\Administrator\AppData\Roaming\npm\node_modules\electron 执行 nede install.js 即可安装成功 成功验证 表示成功 来源： oschina 链接： https://my.oschina.net/weibangbang/blog/3169212

本文来介绍下怎么使用electron-edge-js来调用C#动态链接库，由于是调用C#动态链接库，所以也只能在windows平台上使用，这一点需要注意 在开始之前，同样需要安装node-gyp和windows-build-tools，具体安装方法请参照上一篇 1.安装electron-edge-js npm install electron-edge-js --save 2.准备C# dll文件 dll文件请去gitee中获取，这里没办法上传 electron-vue-demos 3.调用dll中方法 因为是windows专属功能，这里我们要放到windows的判断中 // 只在windows平台下加载 edge = require('electron-edge-js') invoke = edge.func({ assemblyFile: path.resolve('resources/dll/electronedge.dll'), typeName: 'electronedge.Class1', methodName: 'Invoke' }) 具体调用方法 if (process.platform === 'win32') { invoke('这是自定义字符串', function (err, val) { if (err) throw err console.log(val

electron功能很强大，但是有一些跟操作系统底层交互的功能，electron无法实现，这个时候我们就可以调用原生来配合完成对应功能，本文主要讲解在windows平台下，调用C++的dll文件 在开始之前我们要安装 1.node-gyp npm install node-gyp -g 2.windows-build-tools npm install windows-build-tools -g 这里需要确定的是python的版本必须是2.7 使用ffi-napi调用dll（c++） 1. 安装ffi-napi 执行 npm install ffi-napi --save 2. 准备C++动态链接库DLL文件 dll文件请去gitee中获取，这里没办法上传 electron-vue-demos 3. 调用dll文件中的方法 const ffi = require('ffi-napi') const path = require('path') const Dll = ffi.Library(path.resolve('resources/dll/MyDLL.dll'), { Add: ['float', ['float', 'float']], Hello: ['string', []], StrLength: ['int', ['string']] })

前边几篇文章介绍了一些基本用法，最终都是要打包成可执行应用程序的，今天我们就讲讲怎么打包 1. 设置应用appId 在package.json 中增加 "appId": "com.ipp.electronvue", 2. 增加vue.config.js 这个文件是用来配置打包工具electron-builder的参数，代码中有对应的注释，按照对应的配置修改为自己的图标就好。 module.exports = { // 第三方插件配置 pluginOptions: { // vue-cli-plugin-electron-builder 配置 electronBuilder: { builderOptions: { // 设置打包之后的应用名称 productName: 'electron-vue-demos', win: { icon: 'public/electron-icon/icon.ico', // 图标路径 windows系统中icon需要256*256的ico格式图片，更换应用图标亦在此处 target: [{ // 打包成一个独立的 exe 安装程序 target: 'nsis', // 这个意思是打出来32 bit + 64 bit的包，但是要注意：这样打包出来的安装包体积比较大 arch: [ 'x64' // 'ia32' ] }] }, dmg: {

packjson文件设置为 "start": "electron --inspect=5858 ." vscode debug 设置 { "version": "0.2.0", "configurations": [ { "name": "Debug Main Process", "type": "node", "request": "launch", "cwd": "${workspaceRoot}", "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron", "windows": { "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd" }, "args": ["."], "outputCapture": "std" } ] } 按F5运行 来源： CSDN 作者： 小前端龚健 链接： https://blog.csdn.net/gongjian999/article/details/104479542