正文

electron常见问题(代码片段)

anani  anani  2022-10-30  342

关键词：

导读：

以下记录了作者在实践中遇到的问题和最后的解决方法，如果有错误或者更新更完美的解决方案，欢迎留言指正、交流。

1、jQuery/RequireJS/Meteor/AngularJS 的问题

jQuery 等新版本的框架，在 Electron 中使用普通的引入的办法会引发异常，原因是 Electron 默认启用了 Node.js 的 require 模块，而这些框架为了支持 commondJS 标准，当 Window 中存在 require 时，会启用模块引入的方式。分别有以下几种解决方案：

1-0、去掉框架中的模块引入判断代码。例如：

//比如 jQuery 中的第一行代码中
!function(a,b)"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a)if(!a.document)throw new Error("jQuery requires a window with a document");return b(a):b(a)
//改成：
!function(a,b)b(a)

1-1、使用 Electron 官方论坛提供的方法，改变require的写法。下面的代码各个框架通用：

//在引入框架之前先输入下面的代码
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>

1-2、禁用Node.js的require模块化引入（如果你不想使用 Node.js 模块）：

// In the main process.
let win = new BrowserWindow(
webPreferences: 
 nodeIntegration: false

);

1-3、为使 web 项目正常浏览，在引入 jquery 后进行判断：

//置于引入 jQuery 之后
<script>if (typeof module === ‘object‘) window.jQuery = window.$ = module.exports;;</script>

2、关于页面跳转的问题

刚开始看到页面跳转，大家一般会想到用 window.location.href = ‘./index.html‘; 这样的代码。结果是可以跳转，但 DOM事件基本都会失效。到最后还是使用的 electron 提供的 ipc 接口来创建新的窗口。

2-0、在接收到命令后创建下一个窗口（创建窗口需要时间，期间可能出现空白）：

//在main.js中：：
const ipc = require(‘electron‘).ipcMain;
//进行监控，如果有new-window 发送过来，则重新创建一个窗口，文件是list.html
ipc.on(‘new-window‘,function() 
         mainWindow.loadURL(url.format(
         pathname: path.join(__dirname, ‘/views/list.html‘),
         protocol: ‘file:‘,
         slashes: true
     ))
)

3、关于无边框窗口的问题

为了使窗口无边框，使得在某些时候让项目看起来更美观，所以在创建窗口的时候通过设置 frame 属性的值为 false 来创建无边框窗口。但是无边框窗口会产生无法移动的问题，对于这个问题我们可以在渲染进程中通过编辑 css 文件来解决。

设置 -webkit-app-region: drag 把整个文档都变成了一个可拖拽的对象：

body,html 
    -webkit-app-region: drag;

现在拖动的问题解决了，但是原来所有的点击事件却失效了，为此我们通过设置部分的这个属性值为 no-drag 来解决：

section 
    -webkit-app-region: no-drag

electron-builder由于网络原因无法下载问题解决(代码片段)

electron-builder由于网络原因无法下载问题解决在package.json的build中添加electron的镜像"electronDownload":"mirror":"https://npm.taobao.org/mirrors/electron/"如果还是下载不了相关的包，那么就下载二进制包放进缓存目录，各操... 查看详情

electron-vue用electron-packager打包的问题备忘(代码片段)

...满屏的error，记录下防止再次踏坑首先项目脚手架用的是electron-vue项目，在生成项目脚手架的时候会让你选择打包方式（electron-packagerORelectron-builder），我选择的是前者查看项目的package.json文件，找到打包到macOS平台的命令npmbuildb... 查看详情

electron包下载经常失败或太慢问题(代码片段)

Electron包下载经常失败、太慢问题前情公司有个桌面端项目是基于Electron开发的。坑在项目初始化的时候，需要通过npminstall安装项目需要依赖的模块，但是经常报Electron安装失败，使用cnpm或者把源切换到淘宝源也不行。Why?看提示... 查看详情

你第一个electron应用　|electroninaction(中译)(代码片段)

效果演示: 本章主要内容构造并设置Electron应用生成package.json,通过开发用Electron配置其工作在你的项目中预先构建Electron版本配置你的package.json去启动主进程从主进程生成渲染进程利用Electron沙盒，限制宽松的优点构建通常在... 查看详情

解决electron被墙问题(代码片段)

安装electron上次安装node-sass即使用了淘宝镜像源也还是安装不上（解决方法），这次又遇到了一个用镜像源也安装不上的就是electron，安装在某一点卡死，一直不动原因是这样的：因为npm需要连接github下载electron安装包导致，安装... 查看详情

electron渲染进程主进程通信01(代码片段)

我们使用Electron的时候，经常会遇到一个问题。问题的原因Electron有两种进程。一种是主进程(Main)，一种是渲染进程(Renderer)。主进程就是我们package.json里面的main值，属于Node.js后端。渲染进程就是每个页面，比如原始的index.html。... 查看详情

electron踩坑记录(代码片段)

心血来潮想做一个PC端应用，就来学学Electron，以下为学习Electron时的踩坑记录。安装在国内安装electron的时候，可能会因为网络原因遇到卡在Buildingfreshpackages...（yarn）或者是卡在nodeinstall.js（npm）这一步上。在项目的根目录下创... 查看详情

windows下的electron编译常见问题(代码片段)

Windows系统编译下载安装：nodev9.8.0yarn-1.9.4安装windows编译工具npminstall--globalwindows-build-tools安装项目依赖yarninstall开始编译，打包npmrunbuildnpmrunrelease-win常见错误iojs.lib:fatalerrorLNK1106c:userssuroudesktopscatterdesktopode_moduleskeccaksrclibkeccakKeccak... 查看详情

使用electron打包javaspringboot项目为exe文件（含electron-builder下载出错解决方案）(代码片段)

文章目录1、问题背景2、electron入门，使用electron打包静态页面或URL3、electron-builder下载出错4、使用electron打包springboot1、问题背景问题如下：现在我们有一个springboot的项目，启动后可以在localhost:8080访问网站并使用网... 查看详情

关于electron-builder打包遇到的一点点问题(代码片段)

序electron打包一开始时出现error，去解决真的好累，报错一个接一个，而且我这和网上一些bug解决方案还有点不同，不能照抄别人的作业。本次我使用的electron打包工具是electron-builder(以后就换其他的试试)当然也是... 查看详情

electron集成vue(代码片段)

Electron集成Vue通过脚手架执行下面的命令即可创建一个electron-vue的项目；vueinitsimulatedgreg/electron-vuemy-project但是使用的是Vue2，所以推荐使用下面一种方式。使用VueCLIPluginElectronBuilder插件1、初始化vue项目vuecreateelectron-vue-app2... 查看详情

注意electron的error:adynamiclinklibrary(dll)initializationroutinefailed(代码片段)

把dll的load放在Electron中，就会报一个错：Error:Adynamiclinklibrary(DLL)initializationroutinefailed这显然就是dll没有加载成功，为什么在Node中已经试过没问题的方法会在Electron中出问题，我此刻内心是惶恐的，因为Electron是我们最终的javascript... 查看详情

electron——查看electron的版本(代码片段)

...rticle/details/120173587本文出自【我是干勾鱼的博客】之前在Electron——Electron的安装和简单实用中讲解了electron在Mac下的安装，而如果要查看electron的版本，涉及到npm如何查看一个包的版本信息。electron有本地查看详情

electron之20190320(代码片段)

一、sudonpmielectron-g一直失败最终解决办法:使用了sudocnpmielectron-g安装成功原因不详二、打包问题1、使用electron-packager打包命令:electron-packager.HelloWorld--mac--out../HellorldApp--arch=x64--electron-version=4.0.7--overwrite--ignore=node_module大概格式... 查看详情

electron相关知识以及实践(代码片段)

目录1、Electron背景介绍2、Windows开发环境配置3、打造第一个Electron应用4、安装Electron5、开发一个简易的Electron6、了解electron-vue7、安装vue-cli8、生成样板代码9、安装yarn10、运行程序11、了解node-gyp12、安装node-gyp13、项目中可能出现... 查看详情

electron-初体验(代码片段)

Electron的安装使用electron-forge脚手架>npminstall-gelectron-forgenpmWARNdeprecatedcore-js@2.6.11:core-js@<3isnolongermaintainedandnotrecommendedforusageduetothenumberofissues.Please,upgradeyourdependenc 查看详情

electron菜单(代码片段)

自定义菜单constapp,BrowserWindow,Menu=require('electron')console.log(process.platform)//创建窗口functioncreateWindow()console.log('ready')//创建主进程constmainWin=newBrowserWindow(title: 查看详情

electron开发实时加载(代码片段)

第一个方式cnpminstallelectron-reload--save-devcnpminstallelectron-prebuilt--save-devrequire(‘electron-reload‘)(__dirname,electron:require("electron-prebuilt"));第二个方式cnpminstallelectron-connect--save-devc 查看详情

正文