【Ionic】我为自己在实际工作中学习Ionic时参考的技巧文章做了总结！！

2 年 ago
文, 翔
1 minute

我叫Yoki（@enyyokii）。

我在渋谷的一家IT企业担任应用工程师。
在工作中，我会涉及到iOS、Android、Web前端等方面的工作，周末的时候我会利用这个时间进行个人开发并兼顾学习。

在业务中，有机会使用Ionic框架进行新应用程序开发。
本文总结了对Ionic初学者来说很有用的内容，希望大家能够注意一下?。

嗨，Ionic你好…

Ionic是什么？

Ionic是一种基于Google的Angular框架开发的，可以用Typescript + HTML5 + CSS(Sass)进行应用开发的框架。

【官方网页】

    • Angular

 

    • Ionic version 3

 

    Ionic version 4（最新は4系なので新規開発する場合はこちらを参考にすると良いと思います）

关于Angular和Ionic

    Angularの開発ではTypeScriot, そしてRxJsを使用していきます〜

TypeScript是由Microsoft开发的一种扩展了JavaScript的新语言。它是JavaScript ES2015的超集，并且还包含了新版本JavaScript的功能。使用TypeScript，即使不使用Babel，也可以编写最新的JavaScript代码。此外，TypeScript具有强大的类型系统，并且通过类型注释和类型接口可以进行代码的静态分析。

RxJS是一种实现”响应式编程”以灵活处理异步操作和事件的库。它将观察者模式、迭代器模式和函数式编程特征融合在一起。RxJS以连续的数据流形式处理各种事件，并对其进行映射、过滤、分割、合并等处理。这个库被用于Angular的HTTP模块和部分内部处理。执行HTTP请求时，返回的通常是Observable（可观察对象），而不是普通的Promise。这是一个功能强大但稍微复杂的库。需要熟悉各种类型的Observables/Subjects（可观察对象）并掌握近百个方法和运算符。对于处理WebSocket和其他许多连续的数据流非常方便，但在其他情况下可能过于复杂。然而，如果在Angular中进行开发，了解基本内容仍然是很有益的。

开发者应该选择React还是Angular？
开发者要选择React还是Angular？

    IonicはAngularの開発プラットフォームです。で、AngularはJavascriptのフレームワークですよ。Javascriptだと今はReactとかVueが勢いあるけど、Angularて何？ReactやVueとの違いは？という人にはこの記事

【JavaScript】让我们比较一下三个主要的框架Angular，React和Vue.js（2018年4月）

    Angularのバインディング方法について

Angular 数据绑定

    TypeScript、型があるのって嬉しいの？

我：说实话，模型之类的东西只是麻烦而已吧？

    やっぱり基本はライフサイクルを知ること

【Ionic】生命周期【生命周期事件】（https://mosapride.com/index.php/2018/04/25/post-838/）
（此文为Ionic 3版本的内容。注意，Ionic 4版本有所变更。关于变更详情请参考下面的文章。）

    ionic 4のライフサイクル

Ionic 4以及Angular中的生命周期钩子

    コンポーネント化、コンポーネントにまとめて綺麗なプロジェクトをつくろう

【Ionic3（Angular）】整理创建组件并分割HTML的方法

時代已轉變為RxJs。

    オペレーターはたくさんあるけど、20個ぐらい理解しておけばなんとかるんじゃ

学习 RxJS #2 – 常用 (或者认为) 的15个操作符

    • まとめて投げて且つ返ってくる順番も保証して欲しいときあるよね

 

    RxJSのforkJoinはPromise.all相当

在Angular中动态更改CSS。

    NgClass: How to assign CSS classes in Angular

CSS refers to Cascading Style Sheets, which is used to define the visual appearance and layout of a website. UI stands for User Interface, which focuses on how users interact with the website or application.

大家都喜欢fontAwesome。

    【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

CSS的命名规则

    • BEM を使うべき5つの理由（なぜ BEM が G.R.E.A.T といえるのか）

 

    一番詳しいCSS設計規則BEMのマニュアル

基本思想和前提
基于BEM中特别被称为MindBEMding的命名法
使用SCSS
基本上希望使用单类设计
尽量将HTML结构和SCSS结构分离
不要在元素内嵌套元素定义

CSS的实用技巧

    • 要素を横並びにするならflex boxしかない！

 

    • [SCSS]便利な&（アンパサンド）の使い方メモ

 

    • これからのレイアウトはGrid Layoutで決まり？特徴で使い分けたいCSSレイアウト手法

 

    [CSS]Sassの@extendとは？使い方も紹介

结束

希望对对Ionic感兴趣或者开发者有所帮助。?

✖
广告
将在 10 秒后关闭
bannerAds