Electron:將前端應用打包成桌面應用


  首先戳我下載安裝對應版本的node.js。

  安裝完成后,打開命令行輸入node -v以及npm -v查看對應版本。能夠正常顯示說明安裝成功。

  寫一個最簡單的hello world的nodejs應用。nodejs的基礎目錄結構如圖:

  ♦ node_modules文件夾用於存放開發或應用時的依賴

  ♦ index.html:初始化的頁面

  ♦ main.js:生命周期控制

  ♦ package.json:全局配置

  如果有小伙伴不知道怎么寫,可以參考https://github.com/electron/electron-quick-start

  我寫好了一個簡單的html:

注:如果在代碼中使用jQuery時遇到問題,請參考

  戳我下載Electron。下載完Electron后需要在package.json中添加如下代碼(版本號需要對應,別忘了用逗號分隔)

"devDependencies":{
    "electron":"1.6.2"
},

  打開Electron,將我們寫好的程序包拖到Electron下方的窗口中

  我們就得到了一個預覽版的桌面應用程序

  窗體的大小都可以在main.js中進行配置。

  下一步進行程序的打包,在cmd命令行中執行以下命令:

npm install electron-packager --save-dev

  打開package.json,發現devDependencies中新加了一個electron-packager的版本。

  在package.json中在加上如下代碼:

  "scripts": {
    "package":"electron-packager ./ demo --platform=win32 --arch=x64 --version=1.6.2"
  },

  ♦ package:script腳本的名稱

  ♦ demo:打包后的程序的名字

  ♦ platform:操作系統(這邊是windows系統)

  ♦ arch:系統的位數(這邊是64位)

  ♦ version:electron的版本號

  在cmd命令行中,運行如下代碼:

npm run-script package

  運行完了,當前目錄下會生成一個文件夾,名稱為程序名+操作系統+位數。

  成功將web應用轉化為桌面應用。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM