electron 10行核心代码定制自己的浏览器

简介: electron 10行核心代码定制自己的浏览器

核心技术

  • node
  • electron
  • electron-builder 打包exe

Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的,io.js 的一个变体。

这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反,Electron 使用 web 页面作为它的 GUI,所以你能把它看作成一个被 JavaScript 控制的,精简版的 Chromium 浏览器。


核心代码

index.js

const electron = require('electron')
const { app, BrowserWindow } = electron
const Menu = electron.Menu
/*隐藏electron创听的菜单栏*/
Menu.setApplicationMenu(null)
let win
app.on('ready', () => {
  win = new BrowserWindow({icon:'./icon.ico'})
  win.loadURL('https://www.hao123.com/')
}

package.json

{
  "name": "qmkj",
  "version": "1.0.0",
  "description": "qmkj for garden client",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "pack": " electron-builder --dir ",
    "dist": " electron-builder --win --x64"
  },
  "author": "zl",
  "license": "ISC",
  "devDependencies": {
    "electron": "^8.0.0",
    "electron-builder": "^22.9.1"
  },
  "dependencies": {},
  "build": {
    "appId": "lovepythonBrowser",
    "productName": "lovepythonBrowser",
    "copyright": "微信公众号lovepythoncn",
    "directories": {
      "output": "build"
    },
    "win": {
      "target": [
        "nsis"
      ],
      "icon": "./favicon.ico"
    },
    "linux": {
      "target": [
        "AppImage"
      ]
    },
    "extends": null,
    "asar": true,
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "installerHeaderIcon": "./favicon.ico",
      "installerIcon": "./favicon.ico",
      "createDesktopShortcut": true
    }
  }
}

23.png24.png

目录
打赏
0
0
0
0
32
分享
相关文章
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
192 18
Cline:29.7K Star!一文详解VSCode最强开源AI编程搭子:一键生成代码+自动跑终端+操控浏览器...
Cline 是一款集成于 VSCode 的 AI 编程助手,支持多语言模型,实时检查语法错误,帮助开发者提高编程效率。通过智能化手段,Cline 可以生成代码、执行终端命令、调试 Web 应用,并扩展更多功能。
153 5
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
Rust 和 WebAssembly 搞大事啦!代码在浏览器中运行,这波操作简直逆天!
【8月更文挑战第31天】《Rust 与 WebAssembly:将 Rust 代码运行在浏览器中》介绍了 Rust 和 WebAssembly 的强大结合。Rust 是一门安全高效的编程语言,而 WebAssembly 则是新兴的网页技术标准,两者结合使得 Rust 代码能在浏览器中运行,带来更高的性能和安全性。文章通过示例代码展示了如何将 Rust 函数编译为 WebAssembly 格式并在网页中调用,从而实现复杂高效的应用程序,同时确保了内存安全性和跨平台兼容性,为开发者提供了全新的可能性。
223 0
`roslibpy`是一个Python库,它允许非ROS(Robot Operating System)环境(如Web浏览器、移动应用等)与ROS环境进行交互。通过使用`roslibpy`,开发者可以编写Python代码来远程控制ROS节点,发布和订阅话题,以及调用服务。
`roslibpy`是一个Python库,它允许非ROS(Robot Operating System)环境(如Web浏览器、移动应用等)与ROS环境进行交互。通过使用`roslibpy`,开发者可以编写Python代码来远程控制ROS节点,发布和订阅话题,以及调用服务。
|
8月前
|
5.Electron之shell(使用系统默认浏览器打开网页)
5.Electron之shell(使用系统默认浏览器打开网页)
187 1
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
112 0
浏览器通过构建DOM树来解析HTML代码
【4月更文挑战第30天】浏览器通过构建DOM树来解析HTML代码
97 1
如何在浏览器中使用javaScript进行代码调试
【4月更文挑战第11天】在浏览器中调试JavaScript是前端开发的关键技能。使用开发者工具(可通过F12、右键检查或菜单栏访问),遵循以下步骤:1) 打开Sources标签页查看所有脚本;2) 设置断点在需要暂停的代码行;3) 刷新页面触发断点;4) 利用调试工具如Scopes、Watch、Call Stack等检查代码状态;5) 使用Console辅助调试;6) 利用其他工具如Network、Performance和Memory进行性能分析。确保使用最新工具,保持代码清晰,以提升调试效率。
665 4

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等