ionic介绍

最近公司在使用ionic做混合APP,虽然是最后端,但是也查一下东西,介绍一下吧

这是菜鸟教程的
在这里插入图片描述

Ionic

一.介绍

ionic是一种老式的使用H5开发iOS和Android应用的方式,也可以使用新的语言React Native开发,当然对于H5实现复杂的或者交互性没有那么好的,就可以使用iOS和Android的插件实现;

二.Ionic特点

a.开发方面:
1.ionic 基于Angular语法,简单易学.
2.ionic 是一个轻量级框架.
3.ionic 完美的融合下一代移动框架,支持 Angularjs 的特性, MVC ,代码易维护.
4.ionic 提供了漂亮的设计,通过SASS构建应用程序,它提供了很多UI组件来帮助开发者开发强大的应用.
5.ionic 专注原生,让你看不出混合应用和原生的区别.
6.ionic 提供了强大的命令行工具.
7.ionic 性能优越,运行速度快.
b.对开发的描述:
1.混合型APP的优势是:提高开发效率和迭代速度、降低开发成本;
2.劣势是:较差的用户体验和限制一定的本地资源和能力。

三.使用
a.安装环境
1.安装node.js
2.安装cordova (命令行: sudo npm insall –g cordova)
3.安装ionic(命令行: sudo npm insall –g ionic)
b.创建应用
1.Desktop 创建文件夹 例如appIonicTest
2.cd 到 appIonicTest 文件夹
3.ionic start myApp
c.创建平台应用(iOS . Android)
1.cd myApp
2.ionic cordova platform add ios
3.ionic build ios (打开iOS 项目)
4.ionic emulate iOS (模拟器运行)
d.开发
1.src 主要开发区域 ,开发完成后 同步到手机端
2.ionic cordova build ios
3.ionic platform add iOS

四.Ionic分析
a.优势

  1. 基于angularjs,同时兼容iso和android(虽然还不太完善)。
  2. 创业团队资源不足情况下,ionic很有优势。
  3. 适合没太多互动性的app,开发效率比较高。
    4.可实现在线更新, 允许加载动态加载web js。
    b.劣势
  4. android, list界面上下滑动会lag
  5. ios下,当键盘弹出时,你可以选择整个页面scroll,也可以选择不scroll,但是这两种情况都有问题,scroll体验很糟,不scroll在某些情况下键盘弹出,但是input看不到。。。。。(后来发现有keyboard-attach)
  6. 应用内的文字不能复制出去,看了论坛里面一些帖子,似乎只能修改ionic官方js代码
  7. ios header部分在进入时会莫名跳跃闪烁,似乎和处理statusbar的占位有关系,后用变通方式修复了一部分,没完全修复
  8. 下拉反弹有问题,可能和我们的代码结构有关
  9. 缓存机制有问题,从list进入detail,list自动销毁,再返回list,从头看起,也就是不知道你上次看到哪儿了,有变通解决方案,花了巨多精力来修复这个问题。此外,切换tab后,同样数据不保留,干嘛一定要destroy啊,留个缓存多好…
  10. 比较依赖一些现成的cordova plugin,如果没有plugin那很多功能的代价就高了,甚至无法实现
  11. 界面间的跳转动画很难自定义
  12. 在有底部tab的情况下,list进入detail,想隐藏底部tab并使其不占位置,得单独做些处理,如果不熟悉的话,需要花一些时间

ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML、 CSS和JavaScript,开发跨平台(目前支持:Android、iOS,计划支持:Windows Phone、Firefox OS) 的原生App应用:

ionic主要包括三个部分:

CSS框架 - 提供原生App质感的CSS样式模拟。ionic这部分的实现使用了ionicons图标样式库。
JavaScript框架 - ionic基于AngularJS基础框架开发,遵循AngularJS的框架约束;主要提供了适应移动端UI的 AngularJS的扩展,主要包括指令和服务。此外,ionic使用AngularUI Router来实现前端路由。
命令行/CLI - 命令行工具集用来简化应用的开发、构造和仿真运行。ionic命令行工具使用了 Cordova,依赖于平台SDK(Android & iOS)实现将移动web项目打包成原生app。
由于ionic使用了HTML5和CSS3的一些新规范,所以要求 iOS7+/ Android4.1+。 在低于这些版本的手机上使用ionic开发的应用,有时会发生莫名其妙的问题。

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
实现了首页商品分类,广告栏,分类菜单 <ion-view view-title="阿哥汇商城" hide-nav-bar="true"> <ion-header-bar align-title="left" class="bar-balanced"> <div class="buttons"> <!--ui-sref="category"--> <div class="button icon-left ion-navicon button-clear" ng-click="toggleCategory()"></div> <!--<div class="button icon-left ion-navicon button-clear" ng-click="modal.show()"></div>--> </div> <label class="item-input-wrapper" ui-sref="search" style="height: 33px;"> <i class="icon ion-ios-search placeholder-icon" style="margin: 20px 0px;color: #BBBBBB"></i> <input class="small-text" type="search" ng-model="searchStr" style="background: transparent;width: 100%" placeholder="请输入商品名称"> </label> <div class="buttons"> <div class="button icon-right ion-ios-cart-outline button-clear" ng-click="toCart()"></div> <i class="badge icon-right assertive" style="height:15px;font-size: 10px;margin-left: -10px;top: -8px;padding:0px 5px;float: inherit;background: #FFFFFF" ng-show="true">{{cartSize}}</i> </div> </ion-header-bar> <ion-content scroll="false" ng-show="isCategory" style="height:100%;background-color: rgba(0, 0, 0, 0.50);z-index: 900"> <div style="height: 85%;margin-bottom: 50px;"> <div class="row" style="width: 100%;height:100%;margin: 0;padding: 0;"> <div class="col-50" style="padding: 0;height: 100%;"> <div class="list" style="padding: 0"> <div class="item item-icon-right item-icon-left" ng-repeat="item in categoryAndProducts" ng-click="selectItem(item, $index)" ng-class="{active: activeItem == item}"> <i class="icon balanced" ng-class="iconArr[$index]"></i> {{item.cat_name}} <i class="icon ion-ios-arrow-right balanced" style="font-size: 24px;align-items:center"></i> </div> </div> </div> <div class="col-50" style="padding: 0;height: 100%;"> <div class="list" style="padding: 0;background: #dedede"> <div class="item active-item item-button-right" ng-repeat="cat in subCategory" ng-click="selectCategory(cat.cat_id)" style="background: #dedede"> {{cat.cat_name}} <button class="button button-clear">{{cat.goods_total}}ddd</button> </div> </div> </div> </div> </div> </ion-content> <ion-content class="false" overflow-scroll="true" style="overflow: hidden;"> <!-- <ion-refresher> 下拉刷新指令 --> <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()" spinner="android"></ion-refresher> <ion-slide-box active-slide="myActiveSlide" auto-play="true" does-continue="true" show-pager="true" slide-interval="2000" ng-if="ads" style="height: 108px;"> <ion-slide ng-repeat="ad in ads"> <div class="box blue"> <!--<h1>BLUE</h1>--> <img src="{{APPCONFIG.picURL}}/{{ad.src}}" style="width: 100%;height:inherit"> </div> </ion-slide> </ion-slide-box> <ion-list style=""> <ion-item style="padding: 0px;border-color:#FFF"> <!--<h2>{{item.id}}</h2>--> <div style="height: auto; width:100%;padding: 0"> <div class="row row-center" style="height: 40px;width: 100%;padding: 0;font-size: 16px" onclick="save($index)"> <i class="icon" style="width: 4px;height: 50%;background: {{colors[0]}}"></i> <div class="padding" style="width: 100%"><h2 style="font-size: 20px;color:{{colors[0]}}">热门店铺</h2></div> 更多<i class="icon icon-right ion-ios-arrow-right" style="font-size: 24px;margin-right: 20px;margin-left: 3px"></i> </div> <div class="row row-wrap" style="height:auto; width: 100%;padding: 0;margin-top: 0 "> <div class="col col-33 img" ng-repeat="image in hotsuppliers" style="margin: 0px;padding: 7px auto;height: 60px"> <img ng-src="{{APPCONFIG.picURL}}{{image.logo}}" style="height: 45px;width: 90px"/> </div> </div> <div style="background: #F3F3F3;height: 10px;width: 100%"></div> </div> </ion-item> <ion-item collection-repeat="item in categoryAndProducts" style="padding: 0;border-color:#FFF"> <!--<h2>{{item.id}}</h2>--> <div style="height: auto; width:100%;padding: 0"> <div class="row row-center" style="height: 40px;width: 100%;padding: 0;font-size: 16px" ng-click="selectCategory(item.cat_id)"> <i class="icon" style="width: 4px;height: 50%;background: {{colors[(item.cat_id%5)]}}"></i> <div class="padding" style="width: 100%"><h2 style="color: {{colors[(item.cat_id%5)]}};font-size: 20px"> {{item.cat_name}}</h2></div> 更多<i class="icon icon-left ion-ios-arrow-right" style="font-size: 24px;margin-right: 20px;margin-left: 3px"></i> </div> <div class="row row-center" style="padding: 0;margin-top: 0"> <div class="col-33" ng-repeat="product in item.goods" style="padding: 5px" ng-click="goProductDetail(product.goods_id)"> <div class="img" style="width: 100%"> <img class="item-product-img" ng-src="{{APPCONFIG.picURL}}/{{product.goods_thumb}}" style="width: 90px;height: 90px"> <div class="desc" style="text-overflow: ellipsis;white-space:nowrap; overflow:hidden;font-size: 16px;margin-top: 5px"> {{product.goods_name}} </div> <div style="background: #DEDFE0;height: 1px;margin: 2px"></div> <div class="desc assertive" style="text-overflow: ellipsis;overflow:hidden;font-size: 16px"><b>{{product.price | currency:"¥"}}</b></div> </div> </div> </div> <div style="background: #F3F3F3;height: 10px;width: 100%"></div> </div> </ion-item> </ion-list> </ion-content>
IONIC 功能全演示 ===================== - 使用Ionic提供的UI 组件。Ionic本身是致力于建立统一的移动混合app构建平台,核心基础是Angular+Cordova。 - 通过Angular指令封装,以及预定义的CSS,提供了开箱即用的HTML5 Mobile组件。 - 构建与开发支持,能够直接运行www目录下的index.html进行开发调试。同时也支持发布人员利用gulp构建输出到dist目录 - 利用gulp,同样演示了单元测试以及场景测试。 - [在线演示,内有地址二维码,可手机浏览](http://1.thm1118.sinaapp.com/static/ionic/www/index.html) ## 预览 ![信息卡片](screenshot/card.png) ![下拉刷新](screenshot/pullrefress.png) ![表单元素](screenshot/form.png) ![菜单](screenshot/menu.png) ![列表左滑按钮](screenshot/option.png) ![弹出层](screenshot/pop.png) ![tab](screenshot/tab.png) ![幻灯](screenshot/slide.png) ![图片水平滚动](screenshot/hscroll.png) ![毛玻璃效果](screenshot/blure.png) ![2000条数据搜索](screenshot/search.png) ![输入自动完成](screenshot/autocomplete.png) ![列表自动分组](screenshot/autogroup.png) ![媒体相册](screenshot/galaxy.png) ![chartjs统计图](screenshot/chartjs.png) ![百度统计图](screenshot/echat.png) ![图片延时加载](screenshot/imageload.png) ## 基础环境 纯webapp运行或演示,只需要一个 web server部署即可。 ## 目录结构说明 - www 目录:源码目录 - dist目录:构建输出目录 ## 利于开发,测试和打包部署的nodejs环境 简单开发可以不依赖nodejs环境。但是有了基于nodejs的javascript完整开发周期环境,会极大提升开发效率,保障质量。 - nodejs 最新版。 - 有些node包的安装需要c++编译,x86版本只需要 x86的C++编译器,windows上的x64 c++编译器需要特别设置。 - npm 会很慢,要么使用代理,要么使用国内镜像,比如 [淘宝镜像](http://npm.taobao.org/) , 使用淘宝镜像后,npm命令需要替换成cnpm命令。 - `npm install -g gulp` - `npm install -g ionic` - 如需编译sass的话,安装 [ruby](https://www.ruby-lang.org/zh_cn/),再执行 `gem install sass`(如遇到ssl错误,修改为http源:gem source -a http://rubygems.org/) - `npm install -g node-gyp` - 有的node包依赖python编译,安装 [python2.7](https://www.python.org/) - c++编译环境[MSVStudio 免费版](https://www.visualstudio.com/downloads/download-visual-studio-vs#d-express-windows-desktop).。注意根据studio不同版本指定 --msvs_version=2013 选项 - 安装项目开发依赖包,在项目根目录下运行 `npm install` ### “所见即所得”式开发 - 在项目根目录下运行 `ionic serve`,即可在www目录下开展“所见即所得”的方式开发 - 另外一种方式,在webstorm里对index.html 按debug运行,同样是“所见即所得”的方式开发 ### CROS支持 - 生产环境的 CROS支持要么使用jsonp技术,要么在服务端设置代理。 - 而开发环境下要么 基于不安全做法,服务端api 设置头`Access-Control-Allow-Origin:*" `,要么按如下便捷设置: 基于`ionic serve`, 可以在开发时使用本地代理。ionic.project 内设
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值