教你在浏览器里运行 Win11 ~原创

哈喽，大家好，我是于皮，正如大家所见啊，咱用上了WINDOWS11，还能在一个电脑上拆多个WINDOWS11，是不是很羡慕啊？虽然我知道WINDOWS11运行了，但是并没有完全运行，仔细一看就发现啊，这什么关机键都点不了，明显就是高仿的。其实啊，这波WINDOWS11只是运行在我WIN10系统上的浏览器而已，所以我想开几着就能开几着，但即使它并不是真正的WINDOW11，乍一看还是挺牛逼的，界面啊，体验啊，还有很多的细节啊，都是和这个WINDOWS11保持一致的，倒是可以帮我这种没有在第一时间吃到WIN11螃蟹的同学体验一波。我甚至还能在这里运行浏览器，访问我自己的编程导航网站，浏览器里还能再运行浏览器无线套娃，还可以执行控制台命令，比如说查看磁盘。

甚至啊，我们还可以在这里写代码，大家看和这个真实的Windows系统写代码的感觉基本上是一模一样，作者真的是非常细心啊，就连这个应用商店都模仿的是惟妙惟肖，还可以灵活调整布局。还内置了记事本，怎么样？大家觉得牛逼不可以一起把牛逼两个字打在公屏上，牛逼，什么牛逼，不要被我带了节奏啊，其实这就是一个网页而已，只要你想，你也可以做一个，你看看放大了之后都是bug。

不过这个设计还有制作的用心程度的确值得敬佩。当然我也不是在自夸，因为这不是我做的，而是一位国外的大神，他的这个网页版WIN11完整代码也已经开源到GI top上，并收获了3000多的收藏。其实我从上到下把整个代码读完了一遍，发现它其实就是一个简单的网页制作，用到的技术站士react主流前端开发框架，还有原生的CSS，还有一些javascript。此外呢，作者没有使用任何的组件库，应该也没有组件库能满足WIN11的样式要求，用到了photo sum字体图标库，然后用到了这个CSS模块化，然后不得不说这个作者真的是很厉害啊，我以为要花个半个月到一个月啊，但他坦诚的说，我只用了十天左右就把它做出来了。然后这个作者也是非常的幽默啊，什么是生命的意义，宇宙还是一切，现在整个网页功能不多实现了。

啊，什么菜单栏啊，小组件啊，然后整体的界面风格啊，浏览器啊，终端啊，商店啊，然后计算器啊，还有我们刚刚看到的记事本，在线写代码啊，白板啊等等，乍一看啊，感觉实现这些功能好像挺厉害的，但其实很简单，下面我就带大家去揭秘一下，那既然源代码都有了，我们可以直接把它下载到本地，然后在本地去运行，这样方便我们随时修改代码去查看效果，可以直接把代码下载下来，然后用自己熟悉的编辑器打开它，我这里是Vs code，然后打开终端。因为这是一个前端工程项目，所以我们需要自行安装node jsn PM或者雅恩，安装好这些之后呢，先要输入延或者NPM。

这个包管理器来安装这个项目中用到的一些依赖库，像字体啊，React啊什么的，安装完毕后你运行NPM或者雅恩run start就可以在本地运行了，然后大家看，我现在就在本机的3000端口运行了WINDOWS11，我还可以在本地随便修改代码，比如说把这个public目录下的一些壁纸啊都替换成自己的。作者还提供了容器文件，只要你想，可以把整个网页运行在容器中。这个前端网页的项目结构还是比较工整和清晰的，正在学习react的朋友可以用这个项目学习一下，像这个组件啊，状态管理啊，划分的都很清晰，拿来学习网页布局也是极好的。那我这里为了防止观众朋友们跑掉，就不带大家分析代码了。下面我们来揭秘一下这个网页中运行浏览器，网页中运行写代码的工具是怎么实现的。打开浏览器。

我们可以按F12打开网页调试工具，哎呀，好多报错呀，点击选择器，选中这样一个浏览器窗口，然后我们一级一级往下看。找到这里，诶，大家看这是什么？这是一个I啊I frame的作用就是可以在网页中去嵌入其他的网页，所以说大家看到的这些浏览器里的这个效果，其实并不是作者自己写的，真相大白了，然后再看一下代码编辑器。然后选中大家看，果不其然，这个代码编辑器也就是引用了一个叫get top1秒的在线看代码网站而已，所以整个网站它的技术难点并不大，最佩服的还是创意和脑洞，也能给我们一些启发吧。假如说你正在学习前端，做出来这样一个项目，或者说做一个鸿蒙OS的网页版，只要用心，相信还是可以让面试官眼前一亮的。

还有之前火爆朋友圈的便携小空调也都是同样的道理，其实小空调项目的代码也公开了，大家如果对这些项目感兴趣的话，就还是要利用好j tub，不知道怎么用j tub访问j tub慢想要一些j tub的优质免费教程，还有这些好玩的项目源码，我都帮大家整理好，放到我的原创公众号程序员鱼皮中了，欢迎关注，回复gib自取。以上就是本期分享，我是于皮一边工作一边变秃，一边持续分享编程学习经验和技术干货的程序员up。喜欢本视频还请帮忙点赞收藏投币三连支持，谢谢大家，我们下期再见，哎哟，我靠，太热了，把这空调打开。爽。