Web夢探しライオンionic 1実戦1-環境構築及びプロジェクト紹介
3330 ワード
ionic 1ショッピングモールプロジェクト
プロジェクト展示スクリーンショット(2018年2月1日正式にオンライン)
技術紹介
ionic
Ionicは入門レベルのフレームワークではなく、Web開発技術に専念し、HTML 5に基づいて携帯電話プラットフォームのオリジナルアプリケーションに似た開発フレームワークを作成しています.AngularJSとSASSがバインドされています.このフレームワークの目的は,webの観点から携帯電話アプリケーションを開発し,PhoneGapのコンパイルプラットフォームに基づいて,各プラットフォームにコンパイルされたアプリケーションを実現することである.だから、Ionicを学ぶ前に、まずIonicを学ぶために必要なスキルを理解しなければなりません.
1、使いこなす
2、使いこなす
3、使用している
angularJS
1.まずangularはmvcフレームワークであり、jqueryとは異なり、前者はmvcコードのデカップリングに力を入れ、model、controller、view方式でコードを組織し、後者は多くのAPi関数を提供し、多くのオリジナルjsを書くことなく、アニメーションなどの複雑な効果を実現することができます.animate、このような効果は原生jsで書く必要があると、コード量が膨大になります.
2.次に、jQueryはあなたのコードをどのように組織するかを定義していません.それを別のjsファイルに置いて参照したり、ページに直接書いたりしてscriptラベルで包んだり、htmlラベルに直接インラインで書くこともできますが、angularjsはHTMLページをいくつかのモジュールに分けて、各モジュールは自分のscopeを作ることができます.サービスおよびdirectiveでは,各モジュール間で通信も可能であるが,全体的に構造が明確であり,コード組織方式がモジュール化されている.
3.最後に、jQueryの考えは、まずページを設計し、既存のページに基づいてdom操作を行ってページを表示することですが、angularのviewはフレームワークにすぎず、viewに対するdom操作や時間傍受はdirectiveで実現されている可能性があります.また、modelを傍受する限り、自分で直接Dom操作コードを書くことは一般的ではありません.モデルが変化するとviewも変化します.
学習サイト:AngularJS菜鳥教程
cordova
Apache Cordovaを使用する人:
モバイルアプリケーション開発者は、各プラットフォームの言語やツールセットで再実現することなく、アプリケーションの使用プラットフォームを拡張したいと考えています.
Web開発者は、自分のWebアプリをパッケージして配置し、各アプリケーションストアのポータルに配布したいと考えています.
モバイルアプリケーション開発者は、オリジナルアプリケーションの構築とWebView(特別なブラウザウィンドウ)を混合してデバイスA級PIに触れることができるか、オリジナルとWebViewコンポーネント間のプラグインインタフェースを開発したいと考えています.
学習サイト:w 3 cSchool学習Cordova入門レベル
npm
NPMはNodeJSとともにインストールされたパッケージ管理ツールであり、NodeJSコードの導入上の多くの問題を解決することができ、一般的な使用シーンは以下の通りである.
NPMサーバから他者が作成したサードパーティ製パッケージをダウンロードしてローカルで使用できるようにします.
NPMサーバから他の人が作成したコマンドラインプログラムをダウンロードしてインストールしてローカルで使用できるようにします.
ユーザーが自分で作成したパッケージまたはコマンドラインプログラムをNPMサーバにアップロードして他の人が使用できるようにする.
新版のnodejsはnpmを統合しているので、前にnpmも一緒にインストールしました.同様に、「npm-v」を入力してインストールに成功したかどうかをテストできます.コマンドは次のとおりです.インストールに成功したことを示すバージョンプロンプトが表示されます.
bower
Bowerはパッケージ管理ツールです.パッケージの内容には制限はありません.例えば、jsライブラリ、フレームワーク、ピクチャ/フォントリソースなど、またはそれらの組み合わせが可能です.必要であれば、bowerに登録して公開公開公開公開公開公開することもできます(もちろん、Bowerはプライベートパッケージライブラリの構築もサポートしています).
bower使用マニュアル
gulp
gulpはフロントエンドの開発過程でコードを構築するツールであり、自動化プロジェクトの構築の利器である.彼女はウェブサイトの資源を最適化することができるだけでなく、開発の過程で多くの繰り返しの任務が正しいツールを使って自動的に完成することができます.彼女を使用すると、コードを楽しく書くだけでなく、仕事の効率を大幅に向上させることができます.
gulpはNodejsベースの自動タスク実行器で、javascript/coffee/sass/less/less/html/image/cssなどのファイルのテスト、検査、マージ、圧縮、フォーマット、ブラウザの自動リフレッシュ、配置ファイルの生成を自動化し、ファイルが変更された後に指定されたこれらのステップを繰り返してリスニングすることができます.実現上、彼女はUnixオペレーティングシステムのパイプ(pipe)思想を参考にして、前のレベルの出力は、直接後のレベルの入力になって、操作の上でとても簡単です.本稿では,Gulpを用いて開発プロセスを変更し,開発をより迅速かつ効率的にする方法を学習する.
gulpはgruntと非常に類似しているが、gruntの頻繁なIO操作に比べてgulpのストリーム操作は、構築作業をより迅速かつ容易に完了することができる.
この例では、gulp-lessを例に挙げて(lessをcssにコンパイルするgulpプラグイン)gulpの一般的な使い方を示します.gulpプラグインを1つ使用することをマスターすれば、他のプラグインはヘルプドキュメントを見る必要があります.一緒にgulpを勉強しましょう.^^;
gulp共通アドレス:
gulp自動化の使用と紹介
gulp公式サイト
gulpプラグインアドレス
gulp公式API
gulp中国語API
プロジェクトの説明
プロジェクトの概要
プロジェクトモジュール
環境構築
windows
mac os
フレームワーク
ディレクトリ分析
プロジェクト展示スクリーンショット(2018年2月1日正式にオンライン)
技術紹介
ionic
Ionicは入門レベルのフレームワークではなく、Web開発技術に専念し、HTML 5に基づいて携帯電話プラットフォームのオリジナルアプリケーションに似た開発フレームワークを作成しています.AngularJSとSASSがバインドされています.このフレームワークの目的は,webの観点から携帯電話アプリケーションを開発し,PhoneGapのコンパイルプラットフォームに基づいて,各プラットフォームにコンパイルされたアプリケーションを実現することである.だから、Ionicを学ぶ前に、まずIonicを学ぶために必要なスキルを理解しなければなりません.
1、使いこなす
HTML、CSS、JavaScript ; 2、使いこなす
HTML5の新しい要素.3、使用している
JavaScriptフレームワークの経験、特に熟知AngularJSフレーム.angularJS
1.まずangularはmvcフレームワークであり、jqueryとは異なり、前者はmvcコードのデカップリングに力を入れ、model、controller、view方式でコードを組織し、後者は多くのAPi関数を提供し、多くのオリジナルjsを書くことなく、アニメーションなどの複雑な効果を実現することができます.animate、このような効果は原生jsで書く必要があると、コード量が膨大になります.
2.次に、jQueryはあなたのコードをどのように組織するかを定義していません.それを別のjsファイルに置いて参照したり、ページに直接書いたりしてscriptラベルで包んだり、htmlラベルに直接インラインで書くこともできますが、angularjsはHTMLページをいくつかのモジュールに分けて、各モジュールは自分のscopeを作ることができます.サービスおよびdirectiveでは,各モジュール間で通信も可能であるが,全体的に構造が明確であり,コード組織方式がモジュール化されている.
3.最後に、jQueryの考えは、まずページを設計し、既存のページに基づいてdom操作を行ってページを表示することですが、angularのviewはフレームワークにすぎず、viewに対するdom操作や時間傍受はdirectiveで実現されている可能性があります.また、modelを傍受する限り、自分で直接Dom操作コードを書くことは一般的ではありません.モデルが変化するとviewも変化します.
学習サイト:AngularJS菜鳥教程
cordova
Apache Cordovaはオープンソースのモバイル開発フレームワークです.標準的なwebテクノロジー-HTML 5、CSS 3、JavaScriptでプラットフォーム間開発を行うことができます.各プラットフォームでのアプリケーションの具体的な実行はカプセル化され、センサ、データ、ネットワーク状態など、標準的なAPIバインドに依存して各デバイスにアクセスする機能に依存する.Apache Cordovaを使用する人:
モバイルアプリケーション開発者は、各プラットフォームの言語やツールセットで再実現することなく、アプリケーションの使用プラットフォームを拡張したいと考えています.
Web開発者は、自分のWebアプリをパッケージして配置し、各アプリケーションストアのポータルに配布したいと考えています.
モバイルアプリケーション開発者は、オリジナルアプリケーションの構築とWebView(特別なブラウザウィンドウ)を混合してデバイスA級PIに触れることができるか、オリジナルとWebViewコンポーネント間のプラグインインタフェースを開発したいと考えています.
学習サイト:w 3 cSchool学習Cordova入門レベル
npm
NPMはNodeJSとともにインストールされたパッケージ管理ツールであり、NodeJSコードの導入上の多くの問題を解決することができ、一般的な使用シーンは以下の通りである.
NPMサーバから他者が作成したサードパーティ製パッケージをダウンロードしてローカルで使用できるようにします.
NPMサーバから他の人が作成したコマンドラインプログラムをダウンロードしてインストールしてローカルで使用できるようにします.
ユーザーが自分で作成したパッケージまたはコマンドラインプログラムをNPMサーバにアップロードして他の人が使用できるようにする.
新版のnodejsはnpmを統合しているので、前にnpmも一緒にインストールしました.同様に、「npm-v」を入力してインストールに成功したかどうかをテストできます.コマンドは次のとおりです.インストールに成功したことを示すバージョンプロンプトが表示されます.
bower
Bowerはパッケージ管理ツールです.パッケージの内容には制限はありません.例えば、jsライブラリ、フレームワーク、ピクチャ/フォントリソースなど、またはそれらの組み合わせが可能です.必要であれば、bowerに登録して公開公開公開公開公開公開することもできます(もちろん、Bowerはプライベートパッケージライブラリの構築もサポートしています).
bower使用マニュアル
gulp
gulpはフロントエンドの開発過程でコードを構築するツールであり、自動化プロジェクトの構築の利器である.彼女はウェブサイトの資源を最適化することができるだけでなく、開発の過程で多くの繰り返しの任務が正しいツールを使って自動的に完成することができます.彼女を使用すると、コードを楽しく書くだけでなく、仕事の効率を大幅に向上させることができます.
gulpはNodejsベースの自動タスク実行器で、javascript/coffee/sass/less/less/html/image/cssなどのファイルのテスト、検査、マージ、圧縮、フォーマット、ブラウザの自動リフレッシュ、配置ファイルの生成を自動化し、ファイルが変更された後に指定されたこれらのステップを繰り返してリスニングすることができます.実現上、彼女はUnixオペレーティングシステムのパイプ(pipe)思想を参考にして、前のレベルの出力は、直接後のレベルの入力になって、操作の上でとても簡単です.本稿では,Gulpを用いて開発プロセスを変更し,開発をより迅速かつ効率的にする方法を学習する.
gulpはgruntと非常に類似しているが、gruntの頻繁なIO操作に比べてgulpのストリーム操作は、構築作業をより迅速かつ容易に完了することができる.
この例では、gulp-lessを例に挙げて(lessをcssにコンパイルするgulpプラグイン)gulpの一般的な使い方を示します.gulpプラグインを1つ使用することをマスターすれば、他のプラグインはヘルプドキュメントを見る必要があります.一緒にgulpを勉強しましょう.^^;
gulp共通アドレス:
gulp自動化の使用と紹介
gulp公式サイト
gulpプラグインアドレス
gulp公式API
gulp中国語API
プロジェクトの説明
プロジェクトの概要
プロジェクトモジュール
環境構築
windows
mac os
フレームワーク
ディレクトリ分析