水花一現APP技術解析-ionic篇

時間 2019-11-12

標籤水花 app 技術解析 ionic 简体版

原文原文鏈接

下載地址在這裏：https://www.pgyer.com/0qj6css

APP下載只能夠安裝android版的，至於iOS版的沒有iOS簽名是不能安裝，我也是隻給本身手機安裝了一個ios版的，有android手機的能夠下載試試。html

水花一現使用的ionic技術android

ionic=ionic myApp + ThemeableBrowser + ImgDownloader + Clipboard

ionic技術初識

ionic是一個用來開發混合手機應用的，開源的，免費的代碼庫。能夠優化html、css和js的性能，構建高效的應用程序，並且還能夠用於構建Sass和AngularJS的優化。ionic會是一個能夠信賴的框架。ios

Ionic(ionicframework)一款接近原生的Html5移動App開發框架　會html css js就能夠開發app。git

我本身也是無心從網上了解到這個技術，當我明白這個技術後，我就想也建立一個我本身的APP，我理想的app由我本身來定義。做爲一個技術人員我對html,css,js不說很瞭解，可是也會基本使用。可是說正在的ios和android開發，本身想必去學習就比較麻煩，既然瞭解到這個技術，我感受憑藉本身的能力，是能夠完成本身構想的app的。github

ionic技術使用開始

開始用Ionic建立咱們的移動應用，若是您已經安裝好了Cordova，您能夠直接把Ionic看成Html5框架，用Cordova開發Ionic，無需進行下面步驟。npm

1.安裝ionic/Install Ionic瀏覽器

$ npm install -g cordova ionic微信

2.經過Ionic建立一個項目app

$ ionic start myApp tabs

3.運行咱們剛纔建立的Ionic項目

$ cd myApp

$ ionic platform add ios

$ ionic build ios

$ ionic emulate ios

也能夠經過中文官網去學習http://www.ionic.wang/start-index.html

運行起來的界面是這樣的

ionic技術完成構想

對ionic技術有了初步的瞭解後，並本身運行起官方的demo後。我感受挺簡單的，而且ios，android均可以打包，這簡直太方便了。

因而我就仔細想一想了我打算作的app的構想，而且慢慢將我要的界面原型設計出來了。原型圖以下：

有了原型圖我感受離我要實現的目標近了一步，而且在我接下來的空閒時間一直不斷的去完善，去解決開發過程當中遇到的新問題。

ionic技術實現APP

在實現的過程當中我總共打算作4個菜單，分別是：精選，美圖，笑話，個人，最終我完成了我界面的3個菜單的開發，個人這個菜單並無開發，由於具體要作什麼有些不肯定，最後也就放棄了，在個人界面寫了關於個人一些狀況。

精選菜單

這個菜單我使用的官方demo(名字是myApp)的原型上作修改的，在後臺定時任務去抓取不一樣網站的文章，新聞連接和標題，並在這裏作顯示，點擊標題就跳轉到連接所對應的文章。

在跳轉其餘網站連接方面我使用的cordova的高度自定義的瀏覽器插件ThemeableBrowser，而且根據本身的狀況定義了菜單

美圖菜單

這個菜單內容徹底是自定義的，在樣式顯示方面我若是全部圖片平鋪就會顯的比較單調，因而我對圖片的排列進行了有規則的調整，具體看圖片效果

在單擊圖片顯示大圖上我用的也是ionic的一個放大圖片插件：ionic-zoom-view,這是github上的一個插件，有興趣的能夠去搜索瞭解一下

而且我在原有插件的基礎上增長了一個下載圖片的功能（使用的有下載插件ImgDownloader），能夠下載到手機上

iOS是下載到照片裏
android是下載到sd卡的水花一現目錄裏

笑話菜單

笑話菜單很簡單，爬取各類段子和笑話而後作顯示，常常看對本身的會不斷提高本身的幽默能力啊!

我這文字上面增長了複製段子的能力，使用的插件是Clipboard.

我在ionic項目上使用的插件有如下各類

com.okmemo.cordova.imgdownloader 0.1.0 "ImgDownloader"
com.verso.cordova.clipboard 0.1.0 "Clipboard"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-console 1.0.3 "Console"
cordova-plugin-device 1.1.2 "Device"
cordova-plugin-file 4.2.0 "File"
cordova-plugin-file-transfer 1.5.1 "File Transfer"
cordova-plugin-splashscreen 3.2.2 "Splashscreen"
cordova-plugin-statusbar 2.1.3 "StatusBar"
cordova-plugin-themeablebrowser 0.2.17 "ThemeableBrowser"
cordova-plugin-whitelist 1.2.2 "Whitelist"
ionic-plugin-keyboard 2.2.0 "Keyboard"