Electron を使用してデスクトップアプリケーションを作成する_html/css

Electron を使用してデスクトップアプリケーションを作成する_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:54:21

オリジナル

1845 人が閲覧しました

デスクトップアプリケーションといえば、ほとんどの人が使ったことがあるはずです。 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>

ログイン後にコピー

アプリを見てください。

アプリケーションパッケージの生成

前のプロジェクト生成プロセス中に、「どのプラットフォームにパッケージ化しますか?」という質問で、対応するパッケージングコードを生成するために、将来サポートされるオペレーティングシステムに対応する必要があります。

それでは、プログラムパッケージを生成しましょう: