做好準備進入 heX 的世界了嗎?

開始一個 heX 應用程序

拿到 heX 的二進位包,你可能會感覺無從下手,下面將以 Windows 下的 web 開發者二進位包為例講述一個基本的開發流程。

現在從零開始,一起來製作一個 Hello World:

1. 下載 heX 二進位包

首先選擇一個合適的二進位包,對於 web 前端開發者而言,heX web 開發者發行包肯定是最好的選擇。(關於二進位包的更詳細的說明請參見 heX 二進位包說明。)

將二進位包解壓到本地後,hexclient.exe 是主程序文件,雙擊即可運行 heX,只不過此時打開的是 heX 的默認歡迎頁面chrome://version,裡面描述了一些基本信息。

2. 編寫 web 前端代碼

在 heX 主程序文件所在的目錄下創建一個用於寫 Hello World 程序的測試目錄test,同時在其中新建 HTML、CSS、JavaScript 等文件。如:

index.html

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Hello World</title><link href="hello.css" rel="stylesheet" type="text/css" /></head><body><h1>Loading...</h1><script> require("./test/hello_world");</script></body></html>

hello.css

h1 { font-family: "Trebuchet MS"; font-size: 5em; text-align: center;}

hello_world.js

window.setTimeout(function () { document.querySelector("h1").innerHTML = "Hello World!";}, 1000);

3. 修改 manifest.json

想要個性化定製 heX,則需要從 manifest.json 開始。(關於 manifest.json 的更詳細的說明請參見 heX 清單文件(Manifest)說明。)

這裡我們需要修改 first_page 參數,將其修改為$(AppDir)test/index.html,即將應用程序執行入口改為上面編寫的 web 頁面。

4. 運行程序

雙擊 hexclient.exe,窗口顯現,一秒鐘後,界面上的「Loading…」變為「Hello World!」。

推薦閱讀:

查看原文 >>
相關文章