如何创建一个浏览器版的`Window11`

时间：2021-10-10 00:38:10

我们接下来将创建一个在浏览器运行的Window11，可以先看看效果图

如何创建一个浏览器版的`Window11`

如何创建一个浏览器版的`Window11`

这是基于Windows 11 in React修改的功能，我们接下来就将使用Windows 11 in React来创建我们的浏览器的Window11

通过Git拉取源码

git clone https://github.com/blueedgetechno/win11React.git

拉取完成以后使用VSCode打开项目，然后执行初始化命令，yarn更快初始化

yarn | npm i

初始化完成以后就可以启动项目

yarn start | npm run start

然后访问http://127.0.0.1:5173/就可以看到默认的Window11 ，效果如图

如何创建一个浏览器版的`Window11`

添加属于自己的一个应用

找到 src\utils\apps.js可以看到apps这个参数，这个是所有的应用程序，

{
    name: "Unescape", // 应用名称
    icon: "unescape", // 应用的图标
    type: "action",  // 应用类型
    action: "EXTERNAL", // 外部链接
    payload: "https://blueedge.me/unescape", // 打开的链接
  }

以上的配置是一个Unescape应用程序的配置，EXTERNAL是打开一个新标签打开的就是payload的地址，

添加一个图标：

将 png图片添加到public\img\icon中，下面我们可以用一个示例添加

如何创建一个浏览器版的`Window11`

将这个图片下载并且命名token.png ，具体路径如下图

如何创建一个浏览器版的`Window11`

并且添加以下配置

  {
    name: "token",
    icon: "token",
    type: "action",
    action: "EXTERNAL",
    payload: "https://blog.tokengo.top",
  },

然后打开src/utils/index.js ，效果如图

如何创建一个浏览器版的`Window11`

我们可以将token添加到desktop中的数组中，如图如何创建一个浏览器版的`Window11`

然后保存项目文件，效果如图

如何创建一个浏览器版的`Window11`

taskbar是下面的任务栏的图标desktop就是桌面pinned就是打开开始菜单显示的应用列表，recent显示在最近的应用列表

也可以自定义相关应用的界面，这个是开源可自定义的超轻量级的Window11????

可以自定义成属于自己的OS

来自token的分享

技术交流群：737776595

相关文章