如何创建一个浏览器版的`Window11`
2024-10-21 03:33:17
如何创建一个浏览器版的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
最新文章
- Linux日志不记录问题
- Ubuntu下安装R语言和开发环境
- delphi XE5皮肤的使用
- 修复发生“由于数据移动，未能继续以 NOLOCK 方式扫描”错误的数据库
- C# 之 HttpWebResponse类
- JFS与JFS2的区别
- vim自动补全文章搜集
- http://docs.aliyun.com/#/rds/best-practices/collocation&security
- 部署vc2008开发的程序（vcredist_x86是其中一个办法）
- twrp 2.7.0 ui.xml简单分析，布局讲解，第一章
- Intellij 如何在新窗口中打开项目
- 《Netty5.0架构剖析和源码解读》【PDF】下载
- Zabbix如何设置脚本告警
- eos 创建两对的公钥和私钥, 钱包，交易所转账到主网，主网到交易所
- MySQL免安装版，遇到MSVCR120.dll文件丢失错误的解决方案
- PHP文件缓存包含三种格式
- invalidate和requestLayout
- sqlserver乱码问题解决
- 11G新特性 -- Expression Statistics
- ToString()、Convert.ToString()、(string)、as string 的区别