ホームページ > 記事 > ウェブフロントエンド > Electron を使用してデスクトップ アプリケーションを作成する_html/css_WEB-ITnose
Electron を使用してデスクトップ アプリケーションを作成する_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:54:211850ブラウズ
デスクトップアプリケーションといえば、ほとんどの人が使ったことがあるはずです。 Baofengyingyin、QQ、skype などは新しいものではありません。しかし、デスクトップ アプリケーションの書き方を理解したことがありますか?歴史的に、私たちはデスクトップ アプリケーションをどのように作成してきたのでしょうか?
実際、デスクトップ アプリケーションの歴史はそれほど長くはありません。さまざまな情報を検索せずに記憶だけで考えると、デスクトップ アプリケーションを作成する言語は、C++、Delphi、VB です。 、winForm、WPF、swing、awt、QT、flash、Objective-C、Swift... などなど。
学習コストは少し高いですか?言語技術はたくさんあります！ ！複数のプラットフォーム (それらのプラットフォームに顧客がいるかどうかに関係なく) でアプリをリリースしたいと熱望する重要な上司や PM に遭遇した場合、プログラマーとして、どうすべきでしょうか?あなたは、先頭に立って、その後、それぞれのテクノロジースタックから学ぶことができず、最終的には上司に感謝するために自殺するのに十分な勇気がありますか?それとも思い切って辞めますか？
もちろんそうではありません。怠け者のプログラマは、より簡単に実装でき、上司のニーズを満たすことができるソリューションを探す必要があります。それでは、今日のテーマである電子について見ていきましょう！
電子とは何ですか?
公式 Web サイトの説明によると、electron は Web テクノロジーを使用してクロスプラットフォームのデスクトップ アプリケーションを開発できるソリューションです。 HTML、JavaScript、CSS など、すでに知っているスキルを使用してデスクトップ アプリケーションを作成できることを実感してください。考えただけで少し興奮しませんか? ！
電子を使用しているのは誰ですか?
有名なフロントエンド IDE Atom は、electron を使用して記述されています。
他の有名なアプリケーションが Electron に基づいて書かれているのか見てみましょう:
それでは、始めましょう!
準備
-
nodejs のインストール
-
yeoman のインストール
プログラムを使用するジェネレーター
npm install -g generator-electron-naive
UNIX のようなオペレーティング システムを使用している場合は、コマンドの前に sudo を追加してください
プロジェクトを作成
次に、プロジェクトを作成しますまず単純に todo アプリと呼びます:
yo electron-naive
上記のコマンドを入力すると、ジェネレーターは一連の質問をするので、必要に応じて答えてください:
で使用しますリモート URL に関する質問ですが、リモート URL を直接ロードしますか? 「はい」を選択すると、正確なアドレスを入力するように求められます。
デバッグ
cd todonpm run dev
上記のコマンドが完了すると、次のアプリケーション インターフェイスが開きます。 🎜>
todo/src/index.html を見つけて、お気に入りの IDE で開き、次のコードをコピーして、index.html の元のコンテンツを上書きします。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>TODO</title> </head> <body> <ul id="todolist"></ul> <form action="#" method="post"> <div> <label for="newitem">Add item</label> <input type="text" name="newitem" id="newitem" placeholder="new item" /> <input type="submit" value="Add" /> </div> </form> <script> var todo = document.querySelector('#todolist'), form = document.querySelector('form'), field = document.querySelector('#newitem'); form.addEventListener('submit', function(ev) { var text = field.value; if (text !== '') { todo.innerHTML += '<li>' + text + '</li>'; field.value = ''; field.focus(); } ev.preventDefault(); }, false); todo.addEventListener('click', function(ev) { var t = ev.target; if (t.tagName === 'LI') { t.parentNode.removeChild(t); }; ev.preventDefault(); }, false); </script> </body></html>アプリを見てください。 アプリケーション パッケージの生成
前のプロジェクト生成プロセス中に、「どのプラットフォームにパッケージ化しますか?」という質問で、対応するパッケージング コードを生成するために、将来サポートされるオペレーティング システムに対応する必要があります。
それでは、プログラム パッケージを生成しましょう:
npm run dist最終的に生成された実行可能プログラムは、次の場所に表示されます:
ダブルクリックして使用してください。 ！ ！