【electron】学习（二）

最新推荐文章于 2024-04-30 00:00:15 发布

TU-Lin

最新推荐文章于 2024-04-30 00:00:15 发布

阅读量783

点赞数

文章标签： electron webview

本文链接：https://blog.csdn.net/qq_41196874/article/details/125579316

版权

遇到的坑

1.在全局安装electron的时候，遇到安装卡住的情况，一般来说是要改变一下electron的镜像地址
首先，打开cmd，输入npm config edit，这是会弹开一个记事本（txt）.npmrc，然后在里面加一句electron_mirror="https://npm.taobao.org/mirrors/electron/"即可。
2.当引入const fs= require('fs');的时候会报错Uncaught ReferenceError: require is not defined，可能是版本的问题，所有要在配置项添加contextIsolation:false才可正常引入。

Api例子：

一、文件引入

在入口文件要配置允许node使用的项：nodeIntegration: true,
upload.js

//这次会引用到第三方库fs，通过fs的readFile方法去读取文件内容并展示出来
const fs = require('fs');
let upload = document.querySelector('.upload');
let detail = document.querySelector('.detail');
upload.addEventListener('drop', (e) => {
  e.preventDefault();//阻止默认行为
  e.stopPropagation();//阻止冒泡
  for (const f of e.dataTransfer.files) {
    fs.readFile(f.path, (err, data) => {
      let newDetail = document.createElement('div');
      newDetail.innerHTML = data;
      detail.appendChild(newDetail)

    })
  }
})
upload.addEventListener('dragover', (e) => {
  e.preventDefault();
  e.stopPropagation();
})

upload.html

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="upload">
  </div>
  <div class="detail"></div>
  <script src="./upload.js"></script>
</body>

</html>
<style>
  .upload {
    width: 200px;
    height: 200px;
    background-color: pink;
  }
</style>

二、webview内嵌

在入口文件要配置允许webview内嵌使用的项：webviewTag: true
index.html

<webview src="https://www.baidu.com" style="width:400px;height:300px"></webview>

render.js

let webview = document.querySelector('webview');
webview.addEventListener('did-start-loading', () => {
  console.log('start');
}) //开始加载
webview.addEventListener('did-stop-loading', () => {
  console.log('stop');
  webview.insertCSS('#su{background:red !important;}');
}) //结束加载