第一次写博客,见谅
注意:
- 真的从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 .了一下,可以运行了?