水花一现APP技术解析-ionic篇

下载地址在这里：https://www.pgyer.com/0qj6

APP下载只能够安装android版的，至于iOS版的没有iOS签名是不能安装，我也是只给本身手机安装了一个ios版的，有android手机的能够下载试试。

水花一现使用的ionic技术

ionic=ionic myApp + ThemeableBrowser + ImgDownloader + Clipboard

ionic技术初识

ionic是一个用来开发混合手机应用的，开源的，免费的代码库。能够优化html、css和js的性能，构建高效的应用程序，并且还能够用于构建Sass和AngularJS的优化。ionic会是一个能够信赖的框架。

Ionic(ionicframework)一款接近原生的Html5移动App开发框架　会html css js就能够开发app。

我本身也是无心从网上了解到这个技术，当我明白这个技术后，我就想也建立一个我本身的APP，我理想的app由我本身来定义。做为一个技术人员我对html,css,js不说很了解，可是也会基本使用。可是说正在的ios和android开发，本身想必去学习就比较麻烦，既然了解到这个技术，我感受凭借本身的能力，是能够完成本身构想的app的。

ionic技术使用开始

开始用Ionic建立咱们的移动应用，若是您已经安装好了Cordova，您能够直接把Ionic看成Html5框架，用Cordova开发Ionic，无需进行下面步骤。

1.安装ionic/Install Ionic

$ npm install -g cordova ionic

2.经过Ionic建立一个项目

$ 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"

最后一段

以上这些就是关于ionic部分的简单技术介绍，过程当中也遇到过很多的坑，索性最后都找到解决的办法。

你们能够关注个人github帐号，关于APP的代码我都放在了github上，有须要的能够下载下来试试。有问题了能够联系我

博客:http://www.shuihua.me

微信公众号:水花一现，shuihuayixian

邮箱:shangjing105@163.com

Github:https://github.com/shangjing105

QQ:787019494