代码改变世界

electron 前端开发桌面应用

2018-09-19 09:29  muamaker  阅读(2905)  评论(0)  编辑  收藏  举报

electron是由Github开发，是一个用Html、css、JavaScript来构建桌面应用程序的开源库，可以打包为Mac、Windows、Linux系统下的应用。

 

快速开始

接下来，让代码来发声，雷打不动的hello world

创建文件夹，并执行npm init -y，生成package.json文件，下载electron模块并添加开发依赖

mkdir electron_hello && cd electron_hello && npm init -y && npm i electron -D

下载速度过慢或失败，请尝试使用cnpm，安装方式如下

# 下载cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 下载electron
cnpm i electron -D

　创建index.js，并写入以下内容

 

const {app, BrowserWindow} = require('electron')

// 创建全局变量并在下面引用，避免被GC
let win

function createWindow () {
    // 创建浏览器窗口并设置宽高
    win = new BrowserWindow({ width: 800, height: 600 })
    
    // 加载页面
    win.loadFile('./index.html')
    
    // 打开开发者工具
    win.webContents.openDevTools()
    
    // 添加window关闭触发事件
    
    win.on('closed', () => {
        win = null  // 取消引用
    })
}

// 初始化后 调用函数
app.on('ready', createWindow)  

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
   // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
   // 否则绝大部分应用及其菜单栏会保持激活。
   if (process.platform !== 'darwin') {
        app.quit()
   }
})
  
app.on('activate', () => {
// 在macOS上，当单击dock图标并且没有其他窗口打开时，
// 通常在应用程序中重新创建一个窗口。
    if (win === null) {
      createWindow()
    }
})

　　

　创建index.html

<!DOCTYPE html>
<html>
    <head>
      <meta charset="UTF-8">
      <title>Hello World!</title>
    </head>
    <body>
        <h1 id="h1">Hello World!</h1>
        We are using node
        <script>
            document.write(process.versions.node)
        </script>
        Chrome
        <script>
            document.write(process.versions.chrome)
        </script>,
        and Electron
        <script>
            document.write(process.versions.electron)
        </script>
    </body>
</html>

　　最后，修改packge.json中的main字段,并添加start命令

{
    ...
    main:'index.js',
    scripts:{
        "start": "electron ."
    }
}

执行npm run start后，就会弹出我们的应用来。

 

模版

electron-forge包含vue、react、Angular等开箱即用的模版

npm i -g electron-forge
electron-forge init my-app template=react
cd my-app
npm run start

打包

怎么将我们开发好的应用打包成.app或.exe的执行文件，这就涉及到了重要的打包环节, 这里使用electron-quick-start项目进行打包

目前，主流的打包工具有两个electron-packager和electron-builder

Mac打包window安装包需下载wine

brew install wine

如果有丢失组件，按照报错信息进行下载即可

electron-packager

electron-packager把你的electron打包成可运行文件(.app, .exe, etc)

执行npm i electron-packager -g 进行安装

electron-packager . 快速打包

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> --out=out --icon=assets/app.ico --asar --overwrite --ignore=.git
  • sourcedir 项目入口 根据package.json的目录
  • appname 包名
  • platform 构建平台 包含 darwin, linux, mas, win32 all
  • arch 构建架构 包含ia32,x64,armv7l,arm64
  • out 打包后的地址
  • icon 打包图标
  • asar 是否生成app.asar, 不然就是自己的源码
  • overwrite 覆盖上次打包
  • ignore 不进行打包的文件

　　第一次打包需要下载二进制的包耗时会久一些，以后走缓存就快的多了。

electron-builder

electron-builder是一个完整的解决方案，对于macos、windows、linux下的electron app，它可以提供打包及构建的相关功能。同时，它还提供开箱即用的“自动更新”功能支持

npm i electron-builder -D 下载

electron-builder打包

 

坑坑坑

第一次打包的时候会比较慢，如果你和我手欠直接退出了，再次打包的时候，恭喜你，出错了。

问题是在下载.zip包的时候，中断了操作，以后所有执行打包的时候，找不到那个文件（或者是残缺的文件）就报错了，需要手动清除下缓存 缓存路径在~/Library/Caches/electron/



常用参数

electron-builder配置文件写在package.json中的build字段中

"build": {
    "appId": "com.example.app", // 应用程序id 
    "productName": "测试", // 应用名称 
    "directories": {
        "buildResources": "build", // 构建资源路径默认为build
        "output": "dist" // 输出目录 默认为dist
    },
    "mac": {
        "category": "public.app-category.developer-tools", // 应用程序类别
        "target": ["dmg", "zip"],  // 目标包类型 
        "icon": "build/icon.icns" // 图标的路径
    },
    "dmg": {
        "background": "build/background.tiff or build/background.png", // 背景图像的路径
        "title": "标题",
        "icon": "build/icon.icns" // 图标路径
    },
    "win": {
        "target": ["nsis","zip"] // 目标包类型 
    }
}

　　

 

更多本教程来源于掘金，详细资料参考：https://juejin.im/post/5ba06b67f265da0ae343e89c?utm_source=gold_browser_extension#heading-29