Electron入门笔记(一)-自己快速搭建一个app demo

简介: 一.安装Node 1.从node官网下载 ,最好安装.msi后缀名的文件,新手可以查看安装教程进行安装。2.然后cmd进入命令窗口,输入npm -v查看node当前版本,二.创建文件并初始化 1.

一.安装Node


 

1.从node官网下载 ,最好安装.msi后缀名的文件,新手可以查看安装教程进行安装。

2.然后cmd进入命令窗口,输入npm -v查看node当前版本,

二.创建文件并初始化


 

1.在自己喜欢的盘里新建项目文件,我是  E:\Electron\resources\app,在此文件目录app下打开命令窗口,按住shift ,右击空白处,选择在此处打开powershell命令窗口

2.在命令窗口输入:npm init,然后一直回车,直到package.json文件完成

3.在VS code中打开项目文件,新建Index.html 和mian.js,并将json文件中的主进程配置成:"main":"main.js"

4.在项目文件下安装electron :npm install electron,不建议全局安装,不使用npm install electron -g

5.在main.js文件中写入如下代码:

/******************** ** main.js文件内容 ** ********************/
 // 导入electron模块 
const electron = require('electron') 
// 应用生命控制app const app = electron.app
 // 创建一个原生浏览器窗口 
const BrowserWindow = electron.BrowserWindow 
// 引入path和URL模块
 const path = require('path') const url = require('url')
 // 保持对窗口对象的全局引用
 // 否则,窗口对象会在JS对象垃圾回收时自动关闭 
let mainWindow function createWindow () {
 // 创建浏览窗口 
mainWindow = new BrowserWindow({width: 800, height: 600})
 // 加载app的index.html文件 
mainWindow.loadURL(url.format({
 pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true }))
 // Open the DevTools.打开开发者工具DevTools
 // mainWindow.webContents.openDevTools() 
// Emitted when the window is closed. 当窗口被关闭时,触发此事件 mainWindow.on('closed', function () {
 // 取消引用 window 对象,如果你的应用支持多窗口的话,
 // 通常会把多个 window 对象存放在一个数组里面,
 // 与此同时,你应该删除相应的元素。 
mainWindow = null }) } 
// Electron初始化完成,并准备好创建浏览窗口之后 
// 调用函数createWindow 
// 一些API也只有在此事件(ready)触发之后才能使用 
app.on('ready', createWindow)
 // 当所有窗口被关闭时,即事件window-all-closed被触发后,退出程序 app.on('window-all-closed', function () {
// 对于MacOS用户,往往需要使用command+q完全退出程序 
// 否则,绝大部分其菜单栏会保持激活状态。即程序并未完全退出。 
// 对于非Darwin平台来讲,如Windows,则直接退出程序
 if (process.platform !== 'darwin') { app.quit() } }) 
// 若程序activate事件被触发时,执行该操作,创建一个新窗口 
app.on('activate', function () { 
// 在Mac系统中,若其他窗口都已关闭,点击dock面板上的程序图标时 
// 会重新创建一个窗口
 if (mainWindow === null) { createWindow() } }) 
// 在这文件,你可以续写应用剩下主进程代码。 // 也可以拆分成几个文件,然后用 require 导入

6.index.html写入

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8">
<title>Hello World!</title>
</head> 
<body> 
<h1>Hello World!</h1> 
<!-- 再次渲染进程中,你可以使用任何Node.js的API --> We are using Node.js <script>document.write(process.versions.node)</script>, Chromium <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>. </body> <script> // 同样的,你也可以在此进程中引入其他文件 require('./renderer.js') </script> 
</html>

7.局部安装要在.\node_modules\.bin\目录下运行命令electron.   全局安装就在根目录文件下运行electron.

8.应用程序打包,详情可以参考官方 

9.如果想要让app代码不可见,可进行压缩,具体也可看官方文档进行操作


 

也是第一次了解学习Electron,还在摸索中,有不足可以指点一二哈。

 

 

相关文章
|
3月前
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
188 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
|
3月前
|
JSON JavaScript 前端开发
开发桌面程序-Electron入门
【10月更文挑战第16天】Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架,嵌入了 Chromium 和 Node.js。本文介绍了如何搭建 Electron 开发环境,包括安装 Node.js、创建项目、配置 main.js 和打包应用。通过简单的步骤,你可以快速创建并运行一个基本的 Electron 应用程序。
123 4
开发桌面程序-Electron入门
|
4月前
|
小程序 JavaScript 前端开发
uni app 入门
uni app 入门
72 2
|
5月前
|
Web App开发 Java 视频直播
FFmpeg开发笔记(四十九)助您在毕业设计中脱颖而出的几个流行APP
对于软件、计算机等专业的毕业生,毕业设计需实现实用软件或APP。新颖的设计应结合最新技术,如5G时代的音视频技术。示例包括: 1. **短视频分享APP**: 集成FFmpeg实现视频剪辑功能,如添加字幕、转场特效等。 2. **电商购物APP**: 具备直播带货功能,使用RTMP/SRT协议支持流畅直播体验。 3. **同城生活APP**: 引入WebRTC技术实现可信的视频通话功能。这些应用不仅实用,还能展示开发者紧跟技术潮流的能力。
107 4
FFmpeg开发笔记(四十九)助您在毕业设计中脱颖而出的几个流行APP
|
6月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
155 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
6月前
|
Web App开发 Android开发
FFmpeg开发笔记(四十六)利用SRT协议构建手机APP的直播Demo
实时数据传输在互联网中至关重要,不仅支持即时通讯如QQ、微信的文字与图片传输,还包括音视频通信。一对一通信常采用WebRTC技术,如《Android Studio开发实战》中的App集成示例;而一对多的在线直播则需部署独立的流媒体服务器,使用如SRT等协议。SRT因其优越的直播质量正逐渐成为主流。本文档概述了SRT协议的使用,包括通过OBS Studio和SRT Streamer进行SRT直播推流的方法,并展示了推流与拉流的成功实例。更多细节参见《FFmpeg开发实战》一书。
99 1
FFmpeg开发笔记(四十六)利用SRT协议构建手机APP的直播Demo
|
6月前
|
Web App开发 5G Linux
FFmpeg开发笔记(四十四)毕业设计可做的几个拉满颜值的音视频APP
一年一度的毕业季来临,计算机专业的毕业设计尤为重要,不仅关乎学业评价还积累实战经验。选择紧跟5G技术趋势的音视频APP作为课题极具吸引力。这里推荐三类应用:一是融合WebRTC技术实现视频通话的即时通信APP;二是具备在线直播功能的短视频分享平台,涉及RTMP/SRT等直播技术;三是具有自定义动画特效及卡拉OK歌词字幕功能的视频剪辑工具。这些项目不仅技术含量高,也符合市场需求,是毕业设计的理想选择。
115 6
FFmpeg开发笔记(四十四)毕业设计可做的几个拉满颜值的音视频APP
|
6月前
|
编解码 Java Android开发
FFmpeg开发笔记(四十五)使用SRT Streamer开启APP直播推流
​SRT Streamer是一个安卓手机端的开源SRT协议直播推流框架,可用于RTMP直播和SRT直播。SRT Streamer支持的视频编码包括H264、H265等等,支持的音频编码包括AAC、OPUS等等,可谓功能强大的APP直播框架。另一款APP直播框架RTMP Streamer支持RTMP直播和RTSP直播,不支持SRT协议的直播。而本文讲述的SRT Streamer支持RTMP直播和SRT直播,不支持RTSP协议的直播。有关RTMP Streamer的说明参见之前的文章《使用RTMP Streamer开启APP直播推流》,下面介绍如何使用SRT Streamer开启手机直播。
117 4
FFmpeg开发笔记(四十五)使用SRT Streamer开启APP直播推流
|
iOS开发
ios 实现在一个APP中调起另一个APP(demo)
有时候会遇到在我们自己的app中调起其他app的业务需求,这里写了一个简单的demo,供参考。 1、首先建立两个工程,工程一,工程二,我这里分别叫做“第一个APP”,“第二个APP”,第一个app调起第二个app。
1198 0
|
10天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
137 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex

热门文章

最新文章

  • 1
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    微信小程序 app.json 配置文件解析与应用
  • 4
    【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?
  • 5
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
  • 6
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 7
    【Azure Function】Function App出现System.IO.FileNotFoundException异常
  • 8
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 9
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
  • 10
    阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作