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

如何,创建,一个,浏览器,window11 · 浏览次数 : 434

小编点评

**创建浏览器版的Window11** 1. 创建一个新的React项目： ``` npx create-react-app win11-react ``` 2. 导航到项目的根目录： ``` cd win11-react ``` 3. 运行代码以启动项目： ``` yarn start ``` 4. 打开项目主页面： ``` http://127.0.0.1:5173/ ``` **代码示例** **index.js** ```javascript import './utils/index.js'; const apps = [ { name: 'Unescape', icon: 'unescape', type: 'action', action: 'EXTERNAL', payload: 'https://blueedge.me/unescape', }, { name: 'token', icon: 'token', type: 'action', action: 'EXTERNAL', payload: 'https://blog.tokengo.top', }, ]; export default apps; ``` **utils/index.js** ```javascript const icons = [ { name: 'icon', path: 'public/img/icon.png', }, { name: 'token', path: 'public/img/token.png', }, ]; export default icons; ``` **项目效果图** [图片添加属于自己的一个应用找到 src\\utils\\apps.js可以看到apps这个参数，这个是所有的应用程序，```{ name: \"Unescape\", // 应用名称 icon: \"unescape\", // 应用的图标 type: \"action\", // 应用类型 action: \"EXTERNAL\", // 外部链接 payload: \"https://blueedge.me/unescape\", // 打开的链接 }``` [图片将token添加到desktop中的数组中，如图] [图片保存项目文件，效果如图]

正文

如何创建一个浏览器版的`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 ，效果如图

添加属于自己的一个应用

找到 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中，下面我们可以用一个示例添加

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

并且添加以下配置

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

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

我们可以将token添加到desktop中的数组中，如图

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

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

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

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

来自token的分享

技术交流群：737776595