ホームページ >ウェブフロントエンド >htmlチュートリアル >heX は Web を使用してデスクトップ アプリケーションを開発する_html/css_WEB-ITnose
heX は Web を使用してデスクトップ アプリケーションを開発する_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:50:441385ブラウズ
カテゴリ: WEB フロントエンド 時間: 2015 年 8 月 19 日
heX プロジェクトは Youdao チームによって開始され、HTML5 と Node.js を使用してデスクトップ アプリケーションを構築しますソリューション。 heX は基本的に node-webkit と同じであり、デスクトップ アプリケーションを構築する新しい方法を提供し、Web テクノロジを使用してクロスプラットフォーム デスクトップ アプリケーションを迅速に構築できます。 heX は CEF に基づいており、Chromium と Node.js を統合しているため、Web ページでさまざまな Node.js ネイティブ モジュールやサードパーティの拡張機能を使用できると同時に、これらのモジュールや拡張機能で HTML の DOM 要素にアクセスすることもできます。 。
1. heX バイナリ パッケージをダウンロードします
まず、Web フロントエンド開発者にとって、heX Web 開発者配布パッケージが最良の選択です。バイナリ パッケージをローカルで解凍します。
2. Web フロントエンド コードを記述します
heX メイン プログラムが配置されているディレクトリに Hello Raykaeso プログラムを記述するためのテストを作成します。ファイルは leixuesong ディレクトリにあり、その中に新しい HTML、CSS、JavaScript、その他のファイルを作成します。例:
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello Raykaeso</title> <link href="leixuesong.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Loading...</h1> <script> require('./leixuesong/main'); </script> </body> </html> leixuesong.css
h1 { font-family: 'Trebuchet MS'; font-size: 5em; text-align: center; } main.js
window.setTimeout(function () { document.querySelector('h1').innerHTML = 'Hello Raykaeso!'; }, 1000);
3. heX manifest.json を変更します
first_page パラメータを $(AppDir)leixuesong/index.html に変更します。つまり、アプリケーションの実行エントリを上記の Web ページに変更します。
4. プログラムを実行します
hexclient.exe をダブルクリックすると、ウィンドウが表示され、1 秒後にインターフェースに「Loading...」と表示されます。 「こんにちは、レイカエソ！」に変更します。幸せは突然やってくると思いませんか？これらはすべて、HTML を使用してデスクトップ アプリケーションを開発する、よく知られた Web フロントエンドの知識ポイントです。 HTML を exe デスクトップ アプリケーションにパッケージ化するのは非常に簡単です。これで、誰もがデスクトップ アプリケーション開発の楽しみを楽しむことができます。