生活随笔
收集整理的這篇文章主要介紹了
heX桌面应用程序
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
heX官網首頁
1. 下載 heX 二進制包
二進制包
首先選擇一個合適的二進制包，對于 web 前端開發者而言，heX web 開發者發行包肯定是最好的選擇。
將二進制包解壓到本地后，hex/Release/hexclient.exe 是主程序文件，雙擊即可運行 heX，只不過此時打開的是 heX 的默認歡迎頁面chrome://version，里面描述了一些基本信息。
2. 編寫 web 前端代碼
在hex/Release主程序文件所在的目錄下創建一個用于寫 Hello World 程序的測試目錄test，同時在其中新建 HTML、CSS、JavaScript 等文件。如：
test/html/index.html
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>林揚生</title><link rel="stylesheet" href="../css/index.css">
</head>
<body>
<img id="img" src="data:image/webp;base64,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" alt=""><script>require('./test/js/index');</script>
</body>
</html>
test/css/index.css
body {margin: 0
;padding: 0
;width: 100vw
;height: 100vh
;display: flex
;justify-content: center
;align-items: center
;
}
#img {width: 100px
;height: 100px
;border-radius: 50%
;-webkit-user-drag: none
;cursor: pointer
;
}
test/js/index.js
window
.setTimeout(function () {document
.getElementById("img").style
.borderRadius
="10%";}, 1000);
3. 修改 manifest.json
想要個性化定制 heX，則需要從 manifest.json 開始。
這里我們需要修改 first_page 參數，將其修改為$(AppDir)test/html/index.html，即將應用程序執行入口改為上面編寫的 web 頁面。
{"first_page": "$(AppDir)test/html/index.html", "application_title": "qianhuiya", "application_shortname": "qianhuiya", "use_grit_package": true, "icon_path": "", "use_node": true, "version": "1.0", "locale": "zh-CN", "multiple_process": false, "launch_node_in_all_pages": false, "load_node_manually": false, "disable_async_node_apis": false, "remote_debugging_port": 65432, "disable_debug_log": true, "quit_after_main_window_closed": false, "cache_path": "data", "npapi_plugin_directory": "", "disable_ime_composition": false, "extensions": [ "hex_dialog","hex_sleep","hex_shortcut"],"extension_path": "", "single_instance": true, "window_class_name": "qianhuiya", "form": {"style": "captionless", "plain": false, "system_buttons": true, "transmission_color": "none", "transparent_browser": true, "fixed": false, "disable_form_apis": false, "opacity": "none", "hook_system_command": false, "launch_state": "normal", "launch_width": 800, "launch_height": 600, "launch_x": "screen_centered", "launch_y": "screen_centered", "min_width": 0, "min_height": 0, "max_width": 0, "max_height": 0, "border_width": 5 },"browser": {"no_proxy_server": false,"winhttp-proxy-resolver": false,"disable_gpu": true,"disable_3d_apis": false,"disable_databases": false,"disable_experimental_webgl": false,"disable_file_system": false,"disable_geolocation": false,"disable_gpu_process_prelaunch": true,"disable_java": false,"disable_javascript": false,"disable_javascript_i18n_api": false,"disable_local_storage": false,"disable_logging": false,"disable_plugins": false,"disable_renderer_accessibility": false,"disable_session_storage": false,"disable_speech_input": false,"disable_web_sockets": false,"in_process_gpu": false,"in_process_plugins": false,"enable_media_stream": true,"web_security_disabled": true,"file_access_from_file_urls_allowed": true,"universal_access_from_file_urls_allowed": true}
}
4. 運行程序
雙擊 hex/Release/hexclient.exe，窗口顯現出現圖片。
總結
以上是生活随笔為你收集整理的heX桌面应用程序的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
