Electron学习-HelloWorld（2021.1.25）

第一次写博客，见谅

注意：

真的从0开始，只有一点C/C++基础，所以js这方面完全是真·零基础，完全亦步亦趋跟着老师走的。看的是b站上“技术胖”老师的视频，学成必谢555(老师的网站是jspang.com,视频、文章都是免费的，太良心了555)
之前的学习记录都在电脑里，之后有空慢慢传上来
学的是electron，用的是vs code
写这个的主要目的是怕自己之后忘了，方便捡起来

--electron是啥：

electron是github开发的开源框架，可以商用，可以用于写桌面应用程序
electron=Chromium+node.js+api(这个不太记得了，不准确。上一条已经满足我的需求，所以，开搞！)

--学习内容：

安装node.js
直接到官网上安装就好。我模仿老师打开nodejs.org发现转不动，然后科学上网才打开了这个网页。左边是长期维护版本，右边是最新版本，应该没啥区别
```
npx node -v//检验是否成功下载
```
安装electron
我卡死在过这里一次。我之前那次用的是命令行工具，我看到老师用的是vsCode，所以我也下载了一个。弹幕有人说只要是js的编辑器就行。
正常套路是:首先建立一个文件夹。用vsCode打开这个文件夹，然后调出终端，先npm init,再直接npm install -g electron或者npm install electron --save-dev,前者是全局安装，后者是安装在这个项目文件夹里。
然后就会发现，下载速度极其之慢。
于是按照评论里说的，用cnpm：
```
npm install cnpm -g --registry=https://registry.npm.taobao.org   //首先下载npcm
cnpm init
cnpm install electron --save-dev
```
看到WARN什么的先别紧张，先npx electron -v检查一下下载成功没，成功就不用管，没成就再来一把。
cnpm不认，说"系统禁止脚本运行的错误"参考这个：https://www.cnblogs.com/yuerdong/p/13953514.html

新建html文件
新建一个file,命名为index.html。
输入html会自动弹出选项，可以快速创建一个h5页面

在title和body里面修改为Hello World!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World!</title>
</head>
<body>
    Hello World!
</body>
</html>

新建js文件
新建另一个file,命名为index.js。

var electron=require('electron')

var app =electron.app//引用app属性
var BrowserWindow=electron.BrowserWindow//窗口控制引用

var mainWindow=null//主窗口（相当于一个对象）
//on:监控
app.on('ready',()=>{
    mainWindow=new BrowserWindow({width:500,height:500})
    mainWindow.loadFile('index.html')//加载页面ui：启动渲染进程
    mainWindow.on('closed',()=>{
        mainWindow=null
    })
})

npm init --yes
此举自动生成一个package.json文件。不需要修改
electron .
运行，直接在terminal里输入
```
electron .
```
*这个地方一开始他不认electron,所以我不得不又安装了一遍electron，还是不行。于是我输入npm start，他说没定义start，然后我又跑去定义了一个start，不行。这时候我又绕回来electron .了一下，可以运行了？

Electron学习-HelloWorld（2021.1.25）

Guess you like