search

ChenJiaH / blog

📝个人博客 - 欢迎关注 👀 和点赞 ⭐️
https://chenjiahao.xyz/blog
MIT License
9 stars 7 forks source link

桌面应用开发笔记Electron #11

Open ChenJiaH opened 5 years ago

ChenJiaH commented 5 years ago

首发于微信公众号《前端成长记》，写于 2016.05.11

编写步骤

  1. 安装nodejs以及npm

注意配置环境变量path，安装时勾选上可进行自动配置

  1. 使用淘宝npm镜像

因为现在换成https，故直接用npm安装报SSL配置问题，所以采用cnpm代替npm完成electron安装

npm install -g cnpm –registry=https://registry.npm.taobao.org
  1. 安装electron
cnpm install -g electron-prebuilt
  1. 安装git

官网下载安装，主要用于拉取electron在Github源码。自行下载electron的话可不安装。

  1. 初始化项目
git clone https://github.com/atom/electron-quick-start
npm install && npm start

接着会出现一个helloworld的桌面应用

打包步骤

  1. 下载electron框架

https://github.com/electron/electron/releases 选择对应系统的版本下载下来，得到一堆配置文件和locales以及resources文件夹，具体使用说明查看electron官网

  1. 安装asar，打包依赖组件
npm install -g asar
  1. 打包静态资源城app.asar
asar pack 文件夹名称 app.asar

文件夹里存放静态资源，最好不要放exe/dat等类型的文件；.asar的文件名必须为app.asar，必须！

  1. 将app.asar移至框架中的resources文件夹内

此时运行electron.exe，你会发现里面的内容已经换成你的资源了

  1. 通过winrar或者nsis等工具把刚才的资源制作成安装程序

至此，其他人通过下载该文件便安装你的桌面应用了。

（完）

本文为原创文章，可能会更新知识点及修正错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验 如果能给您带去些许帮助，欢迎 ⭐️star 或 ✏️ fork (转载请注明出处：https://chenjiahao.xyz)