electron学习

介绍

主要讲我第一次使用electron的感受，简直是非常糟心！

安装步骤

安装node.js

设置npm代理

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

electron 项目npm install时经常会下载卡死，然后报错误，很是麻烦，即使设置了代理也是很慢，
所以很不想用electron,要经常尝试 npm install。

安装electron

npm install -g electron --verbose

--verbose 查看安装进度

输入“electron”

• doc ： https://electronjs.org/docs?utm_source=default_app 查看文档

• repository: github 资源

• api demo

如上可看可不看，我是从官网开始入门的：

https://electronjs.org/

学习

下载 electron api demo

下载 electron-quick-start

按照提示一步步都还算正常

参考api demo尝试

• 糟糕的开始

自己在electron-quick-start 上怎么验证都没有任何反应，index.html、renderer.js 验证了很多次就是不行。
无奈只能去github 找到electron-api-demos-master 源码下载查看，并比较了相关代码，并没有发现自己哪里有写错。上网搜索electron 提供的其他示例“simple-samples”，也未找到相关原因。

• 调试
  在main.js 中增加 ，

  // Open the DevTools.
    mainWindow.webContents.openDevTools();

提示”const {BrowserWindow} = require(‘electron’).remote “ 这行“Uncaught ReferenceError: require is not defined”， 还有如下提示

For more information and help, consult
https://electronjs.org/docs/tutorial/security.

• 打开提示网站
  将网站看完，并看到“Disable the remote module”，并去electron api demo 中查找main.js 中窗口的对应设置，发现需要增加 “nodeIntegration: true”

  function createWindow () {
    // Create the browser window.
    mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
        preload: path.join(__dirname, 'preload.js'),
        nodeIntegration: true
      }
    })

• 测试验证
  增加之后，点击‘new-window’ 按钮，并弹出了一个新的对话框。

构建

安装electron-builder

cnpm install -g electron-builder

设置 package.json

简单设置

{
  "name": "xxxx",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "author": "xxxx",
  "license": "ISC",
  "build": {  
    "productName":"xxxx",
    "appId": "com.xxx.xxxxx",
    "copyright":"xxxx.home",
    "directories": { 
      "output": "build"
    }, 
    
    "win": {  
    }  
  },
  "devDependencies":{
    "electron": "8.2.3"   //正确设置版本，否则会"Cannot compute electron version from installed node"
  }
}

打包

electron-builder

依赖包无法下载，则直接使用浏览器下载，并放置的缓存目录

C:\Users\yourname\AppData\Local\electron\Cache 下

要下载

electron-v8.2.3-win32-x64.zip
winCodeSign-2.6.0.7z
nsis-3.0.4.1.7z
nsis-resources-3.4.1.7z

打包完成之后，就是一个40M左右的安装包

总结

别人的demo是由浅入深，electron第一个demo就困了我一天，这坑也太大了。