继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

使用 TypeScript 开发 electron入门体验

笑笑_xxred
关注TA
已关注
手记 59
粉丝 30
获赞 171

使用 TypeScript 开发 electron入门体验

# Clone this repository
git clone https://github.com/electron/electron-quick-start-typescript
# Go into the repository
cd electron-quick-start-typescript
# Install dependencies
npm install
# Run the app
npm start

遇到的问题

  • 中间可能由于网络问题,electron 依赖下载错误,如果npm install执行成功,npm start失败,考虑删掉node_modules文件夹重新安装依赖

分析

  • 查看 build 之后的 dist 文件夹,实际上是将 ts 文件编译成了 js 文件
    图片描述
  • 运行的时候再调用 electron 运行 build 之后的 js 文件

运行结果

  • 最终跑起来是这样子的

图片描述

手动搭建工程

初始化工程

  • 没安装yarn的话,首先全局安装
  • 选择yarn,因为它可以更好地处理依赖关系,并可以使用yarn clean帮助减少最后构建文件的大小
npm install -g yarn
  • 初始化一个空项目
yarn init

安装依赖

  • 首先安装 electron,electron 包会通过electron-download包来下载相关文件,会访问https://github.com/electron/electron/releases/获取相关文件,大部分情况会由于网络问题无法下载,此时就需要通过设置 electron 镜像解决,参考安装 Electron
  • win 用户添加环境变量ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/",可使用 powershell,快速设置临时环境变量,此环境变量只在本次生效
$env:ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
yarn add -D electron
yarn add -D typescript

设置脚本和页面内容

  • package.json配置文件节点scripts添加一个脚本,指定入口文件为main.js,ts文件最终会编译为js文件,所以指定入口文件为js文件即可
  "main": "main.js",
  "scripts": {
    "start": "tsc main.ts && electron main.js"
  }
  • 新建main.tsindex.html文件,内容分别如下

main.ts

const { app, BrowserWindow } = require("electron");
import * as path from "path";

let win;

function createWindow() {
  // 创建浏览器窗口
  win = new BrowserWindow({ width: 600, height: 800 });

  //然后加载app的index.html
  let indexPath = path.join(__dirname, "index.html");
  win.loadFile(indexPath);

  win.webContents.openDevTools();

  // 当 window 被关闭,这个事件会被触发。
  win.on("closed", () => {
    // 取消引用 window 对象,如果你的应用支持多窗口的话,
    // 通常会把多个 window 对象存放在一个数组里面,
    // 与此同时,你应该删除相应的元素。
    win = null;
  });
}

app.on("ready", createWindow);

// 当全部窗口关闭时退出。
app.on("window-all-closed", () => {
  // 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== "darwin") {
    app.quit();
  }
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>

  <body>
    <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>

运行

  • 一切准备就绪,运行即可看到跑起来的应用
  • 注意记得加上在退出应用时执行app.quit(),否则会有部分进程无法退出,一直锁定文件,无法重新打包发布运行
yarn start

打包

  • 参考分发应用
  • 推荐使用electron-builder,打包好可安装程序,带自动更新功能,如果第一次安装,由于网络原因下载资源失败,可先使用electron-packager
  • 安装electron-builder,并设置脚本,添加pack、dist脚本
yarn add -D electron-builder
  "scripts": {
    "build": "tsc main.ts",
    "start": "tsc main.ts && electron main.js",
    "pack": "yarn build && electron-builder --dir",
    "dist": "yarn build && electron-builder",
  }
  • 执行打包
yarn dist
  • 最终打包好的应用在dist文件夹,win-unpacked文件夹则是发布的应用,直接打开electron.exe即可运行应用

项目结构

  • 最终项目的结构

总结

  • 想要高效开发颜值高的应用,还得搭配好的模板,这里推荐electron-vue
  • 相关资源,建议通读官方文档,写的很好,提供的资源也多
    -只有自己动手从零开始实践,才会收获得更多!
打开App,阅读手记
4人推荐
发表评论
随时随地看视频慕课网APP