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

巴特西

electron之环境安装、启动程序

最新文章

热门文章