基于html5開發(fā)的Win12網頁版，搶先體驗
據 MSPoweruser 報道，Windows 11雖然剛剛開始步入正軌，但最新爆料稱微軟已經在開啟下一個計劃，Windows 12 的開發(fā)將在 去年3 月份開始。德國科技網站 Deskmodder.de 稱，根據內部消息，微軟將在 2022年3 月開始開發(fā) Windows 12 系統，盡管 Windows 11 正式版才在去年 10 月份發(fā)布。即使 Windows 12 很快進入開發(fā)階段，我們也可能要等待相當長的一段時間，才會迎來微軟的官方宣布，畢竟一款系統的開發(fā)需要多年的時間。
個人體驗
不得不說，windows的更新進度太快了，記得當年上大學的時候，大家用的還是windows xp，之后是windows 7，然后沒有經歷windows10，現在直接是windwos11。據說微軟的系統版本有個特點，就是隔代勝出。比如win xp和win7之間的vista，還有win7和win10之間的win8，都失敗了。不知道win12是否能成功。
以下就是win12的體驗界面
win12體驗界面
體驗地址：https://win12.gitapp.cn
本網頁是基于第三方開源項目https://github.com/tjy-gitnub/win12開發(fā)的，
開發(fā)要點
整個項目的開發(fā)是基于html5+jquery+javascript+css實現的，目前實現的功能包括：
基本功能與應用
外觀整體優(yōu)化
加入特效
窗口功能
應用完善
添加更多個性化方面的設置
添加 Edge 應用
為更多應用添加標簽頁
完善小組件，添加到桌面等功能
動態(tài)壁紙
代碼結構
該項目結構共分為9個文件夾和主入口文件desktop.html和boot.html。代碼結構如下圖所示。其中，scripts文件夾包含了所有的js文件，media文件夾包含了所有的音頻文件，比如開機啟動音樂；img文件夾包含了所有的靜態(tài)圖片。
?
關鍵代碼
啟動流程是先進入到boot.html，然后進入到desktop.html。
desktop.html關鍵代碼如下：
<head>
? ?<meta charset="UTF-8" />
? ?<meta http-equiv="X-UA-Compatible" content="IE=edge" />
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
? ?<meta name="format-detection" content="telephone=no" />
? ?<link rel="stylesheet" href="./desktop.css">
? ?<link rel="stylesheet" href="bootstrap-icons.css">
? ?<!-- Apps style -->
? ?<link rel="stylesheet" href="apps/style/setting.css">
? ?<link rel="stylesheet" href="apps/style/explorer.css">
? ?<link rel="stylesheet" href="apps/style/calc.css">
? ?<link rel="stylesheet" href="apps/style/about.css">
? ?<link rel="stylesheet" href="apps/style/notepad.css">
? ?<link rel="stylesheet" href="apps/style/terminal.css">
? ?<link rel="stylesheet" href="apps/style/edge.css">
? ?<link rel="stylesheet" href="apps/style/camera.css">
? ?<link rel="stylesheet" href="apps/style/pythonEditor.css">
? ?<link rel="stylesheet" href="apps/style/run.css">
? ?<link rel="stylesheet" href="apps/style/whiteboard.css">
? ?<link rel="stylesheet" href="apps/style/defender.css">
? ?<link rel="stylesheet" href="apps/style/taskmgr.css">
? ?<link rel="stylesheet" href="widgets.css">
? ?<!-- 掌聲歡迎 Copilot 的 css 引入(bs -->
? ?<link rel="stylesheet" href="apps/style/copilot.css">
? ?<link rel="manifest" href="pwa/manifest.json">
? ?<link rel="shortcut icon" href="./pwa/logo.png" type="image/x-icon">
? ?<link rel="stylesheet" href="apps/style/login.css">
? ?<!-- 各個模塊 -->
? ?<link rel="stylesheet" href="module/tab.css">
? ?<base target="_blank">
? ?<title>Windows 12 網頁版</title>
? ?<meta name="description" content="Windows 12網頁版是一個在線體驗Windows 12操作系統的開源項目,使用 HTML、CSS 和 JavaScript 模擬 Windows 12 操作系統的界面與交互。">
? ?<meta name="keywords" content="Windows 12, Windows 12網頁版, 在線Windows 12">
? ?<meta name="keywords" content="Windows 12, Windows 12網頁版, 在線Windows 12"></head>
部署運行（nginx）
將代碼下載到本地后，在D盤新建文件夾html，然后將源碼放到里面，然后配置nginx的html根目錄即可。nginx配置如下：
? ?server {
? ? ? ?listen ? ? ? 80;
? ? ? ?server_name ?localhost;
? ? ? ?location / {
? ? ? ? ? ?root ? D:\html; // 你的代碼目錄
? ? ? ? ? ?index ?desktop.html;
? ? ? ?try_files $uri $uri/ /desktop.html;
? ? ? ?}
? ?} ? ?
然后瀏覽器訪問 localhost即可
參考知識
github的desktop頁面寫法
javascript學習教程
CSS學習教程
html學習教程
基于jquery開發(fā)的Windows 12網頁版
