读书
图标
下载地址在这里：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上，有需要的可以下载下来试试。有问题了可以联系我
微信公众号:水花一现，shuihuayixian
Github:https://github.com/shangjing105
QQ:787019494
网友评论