electron桌面应用
文章平均质量分 70
神奇大叔
这个作者很懒,什么都没留下…
展开
-
electron electron-vue集成vuex
1、在谷歌浏览器下载好vue-devtools,在扩展程序中找到对应的id号2、在c盘对应路径找到id号对应的版本文件夹 C:\Users\10853\AppData\Local\Google\Chrome\User Data\Default\Extensions\id号\5.3.3_03、复制2中的路径,在main/index.js中的app.on对应的方法中添加 在new BrowserWindow之前添加 BrowserWindow.addDevToolsExtension('2中的路径原创 2020-09-20 13:53:07 · 1232 阅读 · 0 评论 -
electron electron-vue创建子窗口
只能通过主线程创建窗口1、配置路由,在router/index.js中配置好窗口对应的路由2、在main/index.js主线程中创建窗口 function openVip() var xx = new BrowserWindow({ width: 400, height: 550, x:n, 位移 y:n, 位移 parent: mainWindow, frame:false, 是否显示默认工具栏 w原创 2020-09-14 14:12:21 · 7789 阅读 · 1 评论 -
electron electron-vue放大、缩小、关闭、恢复窗口大小
方式一: import {remote} from 'electron' 缩小: remote.getCurrentWindow().minimize(); 放大: remote.getCurrentWindow().maximize(); 判断是否处于最大化: remote.getCurrentWindow().isMaximized() 恢复: remote.getCurrentWindow().restore(); 关闭: remote.getC原创 2020-09-13 21:09:08 · 7866 阅读 · 2 评论 -
electron 自定义标题栏、是否可拖动、配置less
1、在mian/index.js中的new BrowserWindown内 mainWindow = new BrowserWindow({ height: 563, useContentSize: true, width: 1000, frame:false, 是否隐藏标题栏 webPreferences:{ devTools:false 隐藏调试工具 } })2、设置可拖动 当隐藏了标题栏后,默认不可拖动 在index.e原创 2020-09-13 20:07:02 · 2060 阅读 · 0 评论 -
electron electron-vue解决跨域
在main/index.js中添加 webPreferences:{ webSecurity:false }原创 2020-09-12 13:01:54 · 1398 阅读 · 1 评论 -
electron elctron-vue集成antd设置按需加载
1、下载 cnpm install ant-design-vue --save cnpm install babel-plugin-import --save2、按需加载 在.babelrc文件中的最后plugins内添加 ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件(先下载less编译器)3、使用方式原创 2020-09-12 12:49:10 · 625 阅读 · 0 评论 -
electron 集成vue环境
1、创建 vue init simulatedgreg/electron-vue xx2、在创建过程中 选择要下载的插件时,*代表选中,直接回车就行 下载工具选中electron-builder3、进入项目 cnpm install4、在.electron-vue/webpack.web.config.js 和.electron-vue/webpack.renderer.config.js中添加 (1)找到plugins内的new HtmlWebpackPlugin (2)在te原创 2020-09-12 12:21:15 · 787 阅读 · 0 评论 -
electron electron-forge脚手架环境搭建
1、创建 npx create-electron-app xx2、启动 npm start3、打包成.exe可执行文件 npm run make原创 2020-09-11 17:23:46 · 1418 阅读 · 0 评论 -
electron 复制板的使用
1、引入 const {clipboard}=require('electron').remote;如复制文字: 事件触发后,ctrl+v就可输出复制的内容 还能复制图片等...,调用的方法改名 clipboard.writeText('内容‘);代码示例:const {net,Menu,shell,clipboard}=require('electron').remote...原创 2020-05-04 15:08:04 · 858 阅读 · 0 评论 -
electron 网络连接提醒
1、监听网络连接 window.addEventListener('online',()=>{ alert('有网'); }) 2、监听网络断开 window.addEventListener('offline',()=>{ alert('断网'); })原创 2020-05-04 14:19:29 · 1061 阅读 · 0 评论 -
electron 点击链接通过浏览器打开
默认点击链接打开在electron的窗口1、引入 const {shell}=require('electron').remote;2、在事件中设置 e.preventDefault(); 阻止窗口打开的默认事件 let href=a.href; shell.openExternal(href); 通过url在浏览器打开代码示例:const {net,Men...原创 2020-05-04 11:03:00 · 3864 阅读 · 0 评论 -
electron 右键弹出菜单
1、监听右键,回调中弹出 window.addEventListener('contextmenu',回调);代码示例:const {net,Menu}=require('electron').remote;var view=document.querySelector('.wb');var sp=document.querySelector('.sp');var btn=doc...原创 2020-05-04 10:50:44 · 3301 阅读 · 2 评论 -
electron 集成react
1、创建react项目npx create-react-app 项目名称2、安装electroncnpm i electron --save3、在package.json 中添加“main”: “main.js”,“homepage”: “.”,4、在package.json的script中添加脚本命令“electron-dev”: “electron . dev”,“elec...原创 2020-05-03 21:37:42 · 1811 阅读 · 0 评论 -
electron 集成react
1、下载git clone --depth 1 --single-branch --branch master https://github.com/electron-react-boilerplate/electron-react-boilerplate.git xx自定义工程名 若不是网络原因的下载失败,如: Cloning into 'electron-'... remote: ...原创 2020-05-03 16:59:47 · 226 阅读 · 0 评论 -
electron 网络请求
1、引入 主进程:const {net}=require('electron'); 渲染进程:const {net}=require('electron').remote;2、get请求 let request=net.request(url地址) request.on('response',(response)=>{ 监听响应 console.log...原创 2020-05-03 15:48:45 · 9997 阅读 · 0 评论 -
electron 类似右键的弹出菜单
1、引入 主进程:const {Menu,MenuItem}=require('electron'); 渲染进程:const {Menu,MenuItem}=require('electron').remote;2、设置菜单项 使用MenuItem设置的菜单项和直接对象设置的菜单项是一样的 let xx=[ {label:'内容'}, ...原创 2020-05-03 15:06:34 · 1090 阅读 · 0 评论 -
electron 主进程和渲染进程通信
1、主进程引入 const {ipcMain} = require('electron')2、渲染进程引入 const {ipcRenderer}=require('electron'); 3、通信 (1)两个进程互相通信 主进程: 接收:ipcMain.on('主进程名‘,(event,ans)=>{ ans为渲染进程发送的数据 ...原创 2020-05-02 17:15:15 · 1711 阅读 · 1 评论 -
electron 注册系统快捷键
1、引入 主线程:const {globalShortcut} = require('electron'); 渲染进程:const {globalShortcut} = require('electron').remote;2、注册热键 CommandOrControl:Command为linux下的常用,Control为windows下的快捷键常用 globalShortcut....原创 2020-05-02 16:01:00 · 1290 阅读 · 0 评论 -
electron 弹出框
1、引入弹出框 主线程:const {dialog}=require('electron'); 渲染进程:const {dialog}=require('electron').remote; 2、每个弹出框都有同步和异步打开方式 是否在末尾添加Sync 同步:可以直接接收返回值 异步:弹出框为promise对象,.then或await获取,参数为内容对象(1)文件选择框 di...原创 2020-05-02 15:27:17 · 12219 阅读 · 4 评论 -
electron 子视图BrowserView
类似webview标签,可以用来替代webview标签1、引入electron中的BrowserView const {app, BrowserWindow,BrowserView} = require('electron') 2、创建BrowserView实例 let view=new BrowserView(); 3、设置视图大小和位置 view.setBound...原创 2020-05-02 14:14:18 · 7797 阅读 · 2 评论 -
electron 窗口BrowserWindow
const mainWindow = new BrowserWindow({ width: 800, height: 600, frame:false, 弹出的窗口有无边框,默认为有 show:false, 是否显示窗口,否后,通过对象.show()打开 backgroundColor:"#ADD6FF" 设置背景色,16进制rgba格式...原创 2020-05-02 13:56:31 · 9563 阅读 · 0 评论 -
electron 弹出子窗口操作
1、弹出子窗口 var xx=window.open('url','自定义名'); 返回BrowserWindowProxy,浏览器代理对象操作子窗口2、关闭子窗口 xx.close();3、子窗口向父窗口传递数据 子窗口发送:window.opener.postMessage(数据); 父窗口接收: window.addEventListener('message',(x...原创 2020-04-30 21:59:20 · 7596 阅读 · 0 评论 -
electron 标签webview
作用: 将网页内嵌到桌面客户端程序中,可以对引入的网页进行自定义操作,如注入脚本、css等 用法: <webview src='网页url' /> 常用事件: webview对象.addEventListener('did-start-loading',回调); 网页加载前回调 wenview对象.addEventListener('did-stop-loading'...原创 2020-04-30 21:13:47 · 3448 阅读 · 0 评论 -
electron 系统对象process
用于处理关于系统、系统进程的对象1、给页面添加事件是渲染进程,main.js是主进程,所以事件方法需要在渲染进程,也就是main.js中写2、谷歌chrome绑定事件不能直接在标签上绑定,需要js动态绑定3、在main.js中->new BrowserWindow->webPreferences内添加 nodeIntegration:true4、ctrl r 刷新页...原创 2020-04-30 15:42:49 · 1083 阅读 · 0 评论 -
electron 调用node方法报错、子进程引用remote报错
1、 Uncaught ReferenceError: xx is not defined 在main.js中->new BrowserWindow->webPreferences内添加 nodeIntegration:true 2、Refused to execute inline event handler because it violates the follow...原创 2020-04-30 15:39:20 · 966 阅读 · 0 评论 -
electron 生命周期事件
app生命周期事件: 在Electron完成初始化时被触发 app.whenReady().then(createWindow) app.on('ready',createWindow); 所有窗口被关闭时触发 app.on('window-all-closed', function () { ... }) 应用程序开始,关闭窗口之前触发 before-...原创 2020-04-29 16:53:26 · 3070 阅读 · 0 评论 -
electron 渲染进程和主进程调试配置
渲染进程调试(进入网页版的f12调试模式): ctrl shift i View->toggle Developer tools主进程调试: vscode中左侧竖直栏第四个运行小虫子按钮,在上方设置中查找launch.js 将其中内容替换成 { "version": "0.2.0", "configurations": [ { ...原创 2020-04-29 16:19:45 · 1219 阅读 · 0 评论