如何建立一個瀏覽器版的`Window11`

tokengo發表於2023-03-01
瀏覽器

如何建立一個瀏覽器版的Window11

我們接下來將建立一個在瀏覽器執行的Window11，可以先看看效果圖

image

image

這是基於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 ，效果如圖

image

新增屬於自己的一個應用

找到 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中，下面我們可以用一個示例新增

image

將這個圖片下載並且命名token.png ，具體路徑如下圖

image

並且新增以下配置

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

然後開啟src/utils/index.js ，效果如圖

image

我們可以將token新增到desktop中的陣列中，如圖image

然後儲存專案檔案，效果如圖

image

taskbar是下面的工作列的圖示desktop就是桌面pinned就是開啟開始選單顯示的應用列表，recent顯示在最近的應用列表

也可以自定義相關應用的介面，這個是開源可自定義的超輕量級的Window11?

可以自定義成屬於自己的OS

來自token的分享

技術交流群：737776595

相關文章