使用Electron创建一个Windows应用

  1. 参考链接

  2. 初始化

    安装node.js
    创建目录my_app
    命令行进入my_app目录
    添加:
    index.html
    main.js
    package.json
    执行:
    npm init
    全默认
    
  3. 安装electron

    打开~/.npmrc
    修改代码为:
    registry=https://registry.npm.taobao.org
    sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
    phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs
    ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
    之后再cmd执行:
    npm install -g -d electron-prebuilt
    npm install -g -d electron-packager
    npm install -g -d electron
    npm install -g -d asar
    
  4. 运行my_app

    [windows]
    electron .
    没加入环境变量则执行
    .\node_modules\.bin\electron .
    [macOS / Linux]
    electron .
    没加入环境变量则执行
    ./node_modules/.bin/electron .
    
  5. 打包应用

    注意:这里生成asar文件的名字只能是app
    asar pack my_app app.asar
    
  6. 创建外壳

    electron-packager ../my_app system windows x64 --version 1.7.6
    electron-packager 项目路径 打包名 操作系统 系统位 --version 1.7.6
    命令说明: 
    * location of project:项目所在路径 
    * name of project:打包的项目名字 
    * platform:确定了你要构建哪个平台的应用(Windows、Mac 还是 Linux) 
    * architecture:决定了使用 x86 还是 x64 还是两个架构都用 
    * electron version:electron 的版本 
    * optional options:可选选项
    
  7. 删除资源

    删除【my_app-win32-x64\resources\】下的app目录
    
  8. 发布

    将【app.asar】移动到【my_app-win32-x64\resources\】下
    【my_app-win32-x64】此时即为发布目录
    

results matching ""

    No results matching ""