【electron】electron入门 教你如何创建第一个electron应用 并进行打包【超详细】

这里写图片描述

前言

electron 是一个可以让我们使用js创建桌面应用程序的框架,并且可以很简单的实现跨平台,让我们可以更轻松的书写业务逻辑,而不用担心跨平台的问题。事实上,electron可以被看做一个精简版的Chrome,内部的V8解释器固然很强大,但是对比起传统的桌面应用程序,也有略显不足的地方。

但是这样的框架只有electron一个吗?当然不是,与之相对应的,还有一款出名的框架NW.js,至于二者的差别以及如何选择,这里暂不作出详细的说明,当前我们只关心electron的问题。

编写第一个electron应用

首先我们要安装electron-prebuilt,它是一个npm模块,因此我们可以使用Npm来进行安装,它是一个electron的预编译版本。

npm install -g electron-prebuilt

接下来安装electron-packager ,它也是一个npm模块,是一个用于打包electron应用的工具,具体使用方法我们稍后会详细说明。

npm install -g electron-packager

现在开始进入正题,我们如何创建一个electron应用。
我们现在仅仅需要3个文件。
index.html
main.js
package.json

index.html使我们想要显示的页面,main.js为此应用的入口,package.json为npm项目的配置文件。现在整体看俩与普通的Node.js项目并无多大的差别。

cd进自己的项目进行初始化(目前我已经创建了一个项目文件夹叫myApp)

cd myApp
npm init

填好一些相关信息后,我的package.json大概是这样的:

{
  "name": "zzh",
  "version": "0.0.1",
  "description": "a simple application",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "zzh",
  "license": "ISC"
}

我们再来看一下index.html,我给它加入了一个标题Hello World,其余没有什么变动。

<!DOCTYPE html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值