electron起步 | 易学教程

1、安装node.js

2、安装淘宝镜像

　　npm install -g cnpm --registry=https://registry.npm.taobao.org

3、安装全局electron

　　npm install -g electron

4、创建package.json文件

　　npm init

5、若全局安装，则忽视。局部安装命令

　　npm install --save-dev electron

6、package.json内容　　

{
  "name": "testapp",
  "version": "0.0.1",
  "description": "testapp",
  "main": "main.js",
  "dependencies": {},
  "devDependencies": {
    "electron": "^7.1.2",
    "electron-packager": "^14.1.1"
  },
  "scripts": {
    "start": "electron .", 
    "packager": "electron-packager . haha --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1"
  },
  "author": "",
  "license": "ISC"
}

7、main.js内容

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
 
let win
 
function createWindow () {
  win = new BrowserWindow({width: 800, height: 600})
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
 
  win.on('closed', () => {
    win = null
  })
}

app.on('ready', createWindow)
app.on('window-all-closed', () => {
  
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
 
app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

8、index.html内容

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>aaa</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
 
  </head>
  <body >

    <input type="number" value="">
	  asdfads
    <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>

9、启动命令①

　　electron .

10、启动命令②

　　前提先安装局部依赖

　　npm install　　

　　npm start

11、安装electron-packager打包工具

　　npm install electron-packager -g

12、配置打包命令

  "scripts": {
    "start": "electron .", 
    "packager": "electron-packager . haha --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1"
  }

13、启动打包

　　npm run packager

来源：https://www.cnblogs.com/ancms/p/11957370.html

标签

electron

软件

win