# (📖#3) ionic 3 A1行動版

###### tags: `A1`

### * 前言
本文只提一些大重點，以目前專案內容做一些解析。
相關行動版文件請閱<span style="font-weight: bold;bold;text-decoration: underline;">公司好幫手說明文件</span>。

---

### * Page & Provider
**Page** : 很像我們A1專案的component，在手機版每一頁都是用Page。
<div style="display: flex;">
<img src="https://i.imgur.com/n50sUYZ.jpg" style="height: 425px;"></img>
</div>

<br>

**Provider** : 等於我們A1專案的service。

---

### * 插件安裝(Plugins)
我們就以"Call Number(撥打電話)"來舉例。
在終端機使用官網提供的安裝指令。

$ ionic cordova plugin add call-number
$ npm install --save @ionic-native/call-number@4

<div style="display: flex;">
<img src="https://i.imgur.com/O2kRgif.png" style="height: 425px;"></img>
</div>

<br>

並且Usage有使用方式。
<div style="display: flex;">
<img src="https://i.imgur.com/JWL7awa.png" style="height: 425px;"></img>
</div>

<br>

用在VsCode就會是這樣。
<div style="display: flex;">
<img src="https://i.imgur.com/KC97xqZ.png" style="height: 425px;"></img>
</div>
<div style="display: flex;">
<img src="https://i.imgur.com/sf7Oc61.png" style="height: 425px;"></img>
</div>

<br>

如此一來我們就可以透過number變數所代表的數字來撥打電話了。

---

### * 生命週期
點開連結，[**官網Life Cycle**](https://ionicframework.com/docs/v3/api/navigation/NavController/) 搜尋「Lifecycle events」。

目前專案中大量使用的是**ionViewDidLoad**，少量使用**ionViewDidEnter**。

※延伸閱讀 : [**ionic的生命週期**](https://www.twblogs.net/a/5cb1401ebd9eee480f0768f8) (官網的中文版，其實在官網用翻譯都一樣)

---

### * ModalController & NavController
[**ModalController**](https://ionicframework.com/docs/v3/api/components/modal/ModalController/) - 我稱為「開窗」。
使用時機 : 通常為該筆資料可以做修改，又或者是要新增一筆資料時使用。
下圖範例 : 洽談記錄的某筆資料做修改時的跳窗。
(可以發現ModalController是<span style="font-weight: bold;bold;text-decoration: underline;">從底部往上方彈窗</span>)
</div>
<div style="display: flex;">
<img src="https://i.imgur.com/1qc7wHu.gif" style="height: 425px;"></img>
</div>

<br>

[**NavController**](https://ionicframework.com/docs/v3/api/navigation/NavController/) - 我稱為「開新頁」。
使用時機 : 非ModalController使用時機，例如純瀏覽非修改等。
下圖範例 : 客戶的某筆資料打開瀏覽頁面。
(NavController則是<span style="font-weight: bold;bold;text-decoration: underline;">浮現出一個頁面</span>的感覺)
</div>
<div style="display: flex;">
<img src="https://i.imgur.com/0s8mYLJ.gif" style="height: 425px;"></img>
</div>

<br>

※延伸閱讀 : [**ionic3實現頁面間傳值**](https://www.jianshu.com/p/8bf31fc8d8a8) (覺得講的很好XD)

---

### * Mobiscroll
Mobiscroll是一個用於觸控裝置的日期和時間選擇器，它的使用不會改變HTML5、PhoneGap以及混合應用的原生使用者體驗。作為一款jQuery滑動選擇**外掛**，使用者可以自定義主題樣式，為自己的移動專案UI元件添色。
嗯...網路上是這樣解釋...

這裡奉上[**mobiscroll官網**](https://demo.mobiscroll.com/)，裡面就跟ionic一樣有提供方法如何寫，順帶一題，這是文傑學長說我們部門有買才可以使用的。

安裝方法 : 先從經理得知mobiscroll帳號密碼，將最新版本下載下來，之後的操作方式如**鼎新前端資料夾 → 行動版專案 → ionic與mobiscroll → 安裝與啟動Ionic、mobiscroll.docx**
(文件中安裝的mobiscroll版本為之前的，取而代之使用從官網下載最新)

---