Live2D專案，桌面可愛玩偶(可以動的),html桌面化(exe)的實現
阿新 • • 發佈：2021-06-26
Live2D專案，桌面可愛玩偶(可以動的),html桌面化(exe)的實現
原本為html的網頁嵌入程式碼，我運用了nw.js進行了桌面化的實現
下載地址：
https://wws.lanzous.com/iWr0Wnny5bg
密碼:i2on
下圖為html原始碼圖
下面為html原始碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Live2D desktop_cute_player</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"> <style> #github svg { transition: all 1s; fill: #222; color: #fff; position: absolute; top: 0; right: 0; border: 0; width: 80px; height: 80px; } #github:hover svg { width: 160px; height: 160px; } </style> </head> <body background="background.png"> <a id="github" href="https://github.com/stevenjoezhang/live2d-widget" target="_blank" title="Visit the open-source code on GitHub!"> </a> <script src="./autoload.js"></script> </body> </html>
程式碼比較簡單主要基於開源庫<看板踉>
html桌面化的實現:
首先，我使用了nwjs（一款基與谷歌瀏覽器的包裝器)
在百度搜索《nwjs》就有
使用方法：
1，將要打包的東西放到一個zip壓縮包下面
2，在zip裡面放入一個“package.json”檔案，程式碼詳細如下
{ "main": "demo.html", //入口 "name": "nw-demo",//字串必須是小寫字母或者數字，可以包含"." 或者"_"或者"-" ，不允許帶空格,必須唯一 "description": "demo app of node-webkit",//描述 "version": "0.1.0",//版本 "window": {//窗體配置 "title": "demo", //窗體的標題 "icon": "link.png",//窗體的ico圖示 "toolbar": false,//是否要工具欄 "frame": true,//bool值。如果設定為false，程式將無邊框顯示 也就是沒有系統預設的關閉，最小化，全屏按鈕 "width": 350,//視窗的大小 "height": 350, //視窗的大小 "position": "center", //字串。視窗開啟時的位置，可以設定為“null”、“center”或者“mouse”。 "min_width": 350,//最小寬度 "min_height": 250,//最小高度 "max_width": 350,//最大寬度 "max_height": 350,//最大高度 "as_desktop" :true,//是否作為桌面背景視窗顯示 "resizable":false,//是否允許調整視窗大小 "always-on-top":true,//視窗是否置頂 "fullscreen":false,//是否全屏顯示 "show_in_taskbar":true,//是否顯示工作列圖示 "show":true, //如果設定為false，啟動時視窗不可見 "kiosk":false //是否使用kiosk模式。如果使用kiosk模式，應用程式將全屏顯示，並且阻止使用者離開應用 }, "webkit": { "plugin": false,//bool值，是否載入外掛，如flash，預設值為false。 "java":false, //bool值 是否載入java applets " page-cache":false //是否啟用頁面快取 } }
詳細的可以自行修改，提示如上圖
3，將.zip壓縮包改名為.nw，
將這個.nw檔案放入與下載玩的nwjs同一個目錄下
開啟cmd
輸入
cd "你的nwjs"下載目錄
copy /b 你的nw檔案.nw+nw.exe 你的專案名字.exe
然後得到一個新的exe
打包完成
下載地址：
https://wws.lanzous.com/iWr0Wnny5bg
密碼:i2on
想要詳細原始碼的，可以加q：2180538217