electron下axios发送 electron windows api

转载

mob6454cc7966b9 2023-11-25 19:37:01

文章标签 electron下axios发送 electron javascript 前端 html 文章分类 iOS 移动开发

快捷键

ctrl + r  刷新界面
ctrl + shift + i  打开调试

安装 nodemon 监听代码修改，重新打包

package.json

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon --watch main.js --exec npm run build",
    "build": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^16.0.8",
    "nodemon": "^2.0.15"
  }
}

窗口尺寸设置

// 创建主进程
  const mainWin = new BrowserWindow({
    x: 100, // 窗口 x轴坐标
    y: 100, // 窗口 y轴坐标
    show: false, // true：显示窗体，false: 不显示窗体
    width: 600,
    height: 400,
    maxWidth: 800, // 设置最大宽度
    maxHeight: 600, // 设置最大高度
    minWidth: 400, // 设置最小宽度
    minHeight: 200, // 设置最小高度
    resizable: false, // 设置窗体是否允许缩放
  })

  // 在当前窗口中加载指定界面让它显示具体的内容
  mainWin.loadFile('index.html')

窗体设置

// 创建主进程
  const mainWin = new BrowserWindow({
    x: 100, // 窗口 x轴坐标
    y: 100, // 窗口 y轴坐标
    show: false, // true：显示窗体，false: 不显示窗体
    //transparent: true, // 设置窗体透明
    title: '自定义标题', // 设置标题
    icon: 'lg.ico', // 设置应用图标
    frame: true, // 设置false, 只显示窗体内容，不展示默认的标题栏和菜单栏
    autoHideMenuBar: true, // 设置是否隐藏默认菜单栏
  })

  // 在当前窗口中加载指定界面让它显示具体的内容
  mainWin.loadFile('index.html')

  mainWin.on('ready-to-show', () => {
    mainWin.show() // 在窗体完全加载完成后，显示窗体，避免白页现象
  })

自定义窗口

frame 属性设置 false 后，隐藏了自带的菜单栏，此时窗口不能移动，调用原生API使得窗口可以移动、最大化、最小化、关闭窗口等操作。

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>创建窗口</title>
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 100%;
      height: 400px;
      overflow: hidden;
      background-color: seashell;
    }

    .bar {
      height: 40px;
      box-shadow: 0 1 5px 0px #333;
      border-bottom: 1px solid #ccc;
    }

    .titleBar {
      width: 190px;
      float: left;
      height: 40px;
      margin-left: 10px;
    }

    .titleBar div {
      float: left;
      height: 40px;
    }

    .titleBar .logo {
      width: 20px;
      height: 20px;
      margin-top: 10px;
      background: url('./lg.ico') 0 0 no-repeat;
      background-size: cover;
    }

    .titleBar .title {
      margin-left: 10px;
      font: normal 14px/40px '微软雅黑'
    }

    .windowTool {
      float: right;
      width: 600px;
      height: 40px;
      position: relative;
    }

    .windowTool div {
      float: right;
      cursor: pointer;
      margin-right: 20px;
      font: normal 12px/40px '微软雅黑'
    }

    .isClose {
      top: 50%;
      left: 50%;
      width: 380px;
      height: 180px;
      padding: 10px;
      position: fixed;
      display: none;
      background: #f5f5f5;
      box-shadow: 0px 1px 5px 0px #ccc;
      transform: translate(-50%, -50%);
    }

    .isClose h3 {
      text-align: center;
      font: bold 14px/40px '微软雅黑';
    }

    .isClose p {
      font: normal 12px/40px '微软雅黑'
    }

    .close_btn {
      margin-top: 60px;
      margin-left: 220px;
    }

    .close_btn span {
      float: left;
      width: 60px;
      margin-left: 8px;
      text-align: center;
      border-radius: 4px;
      border: 1px solid #ccc;
      font: normal 12px/26px '微软雅黑';
    }

    .close_btn span:nth-child(1) {
      cursor: pointer;
      color: #fff;
      background-color: #7b8c7c;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="bar">
      <div class="titleBar">
        <div class="logo"></div>
        <div class="title">拉勾教育</div>
      </div>
      <div class="windowTool">
        <div class="close">
          <i class="fa fa-window-close-o" aria-hidden="true"></i>
        </div>
        <div class="maxsize">
          <i class="fa fa-window-maximize" aria-hidden="true"></i>
        </div>
        <div class="minisize">
          <i class="fa fa-minus"></i>
        </div>
      </div>
    </div>
    <div id="abc">主体内容</div>

    <!-- 定义浮窗设置阻止窗口关闭样式 -->
    <div class="isClose">
      <h3>是否关闭当前应用？</h3>
      <p>系统可能不会保存您的所有更改</p>
      <p class="close_btn"><span>是</span><span>否</span></p>
    </div>
  </div>
  <script src="./index.js"></script>
</body>

</html>

electron下axios发送 electron windows api_javascript

index.js

const { remote } = require('electron')

window.addEventListener('DOMContentLoaded', () => {
  // 窗口关闭前组织窗口关闭并让用户确认
  window.onbeforeunload = function() {
    const oBox = document.getElementsByClassName('isClose')[0]
    oBox.style.display = 'block'

    const yesBtn = oBox.getElementsByTagName('span')[0]
    const noBtn = oBox.getElementsByTagName('span')[1]

    yesBtn.addEventListener('click', () => {
      mainWin.destroy()  // 销毁窗口
    })

    noBtn.addEventListener('click', () => {
      oBox.style.display = 'none'
    })


    return false
  }

  // 利用 remote 获取当前窗口对象
  const mainWin = remote.getCurrentWindow()

  // 获取元素获取点击元素的监听
  const aBtn = document.getElementsByClassName('windowTool')[0].getElementsByTagName('div')
  aBtn[0].addEventListener('click', () => {
    // 关闭窗口
    mainWin.close()

  })

  aBtn[1].addEventListener('click', () => {
    // 最大化
    if (!mainWin.isMaximized()) { // 判断当前窗口是否已经是最大化
      mainWin.maximize() // 让窗口最大化
    } else {
      mainWin.restore() // 让窗口还原
    }
  })

  aBtn[2].addEventListener('click', () => {
    // 最小化
    if (!mainWin.isMinimized()) { // 判断当前窗口是否已经是最小化
      mainWin.minimize() // 让窗口最小化
    }
  })
})

父子窗口及模态窗口

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>主界面</title>
</head>

<body>
  <h2>子窗口及模态窗口</h2>
  <button id="btn">新增窗口</button>
  <script src="index.js"></script>
</body>

</html>

sub.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>XXX窗口</title>
</head>

<body>
  <h2>子窗口内容</h2>
</body>

</html>

index.js

const { remote } = require('electron')

window.addEventListener('DOMContentLoaded', () => {
  // 点击按钮打开一个新窗口
  const oBtn = document.getElementById('btn')
  oBtn.addEventListener('click', () => {
    // 创建窗口
    const subWin = new remote.BrowserWindow({
      parent: remote.getCurrentWindow(),
      width: 200,
      height: 200,
      modal: true,
    })

    subWin.loadFile('sub.html')

    subWin.on('close', () => {
      subWin = null
    })
  })
})

Dialog 模块

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>

<body>
  <h2>Dialog 模块</h2>
  <button id="btn">显示对话框</button>
  <br><br>
  <button id="btnErr">显示错误对话框</button>
  <script src="index.js"></script>
</body>
</html>

index.js

const { remote } = require('electron')

window.addEventListener('DOMContentLoaded', () => {
  const oBtn = document.getElementById('btn')
  const oBtnErr = document.getElementById('btnErr')

  oBtn.addEventListener('click', () => {
    remote.dialog.showOpenDialog({
      defaultPath: __dirname,
      buttonLabel: '请选择',
      title: '自定义标题',
      properties: ['openFile', 'multiSelections'], 
      filters: [
        {
          name: '代码文件',
          extensions: ['js', 'html']
        },
        {
          name: '图片文件',
          extensions: ['ico', 'png']
        }
      ]
    }).then(ret => {
      console.log(ret)
    })
  })

  oBtnErr.addEventListener('click', () => {
    remote.dialog.showErrorBox('自定义错误标题', '错误内容')
  })
})

electron下axios发送 electron windows api_html_02