ionic的用法和作用

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

基本内容
ionic 是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架。绑定了AngularJS和Sass。这个框架的目的是从web的角度开发手机应用,基于PhoneGap的编译平台,可以实现编译成各个平台的应用程序。
ionic的开发添加 android和 ios环境。
ionic提供很多 css组件 和javascript UI库。
ionic可以支持定制android和ios的插件,也支持服务端REST的敏捷开发。

ionic 的特点
1.ionic 基于Angular语法,简单易学。
2.ionic 是一个轻量级框架。
3.ionic 完美的融合下一代移动框架,支持 Angularjs 的特性, MVC ,代码易维护。
4.ionic 提供了漂亮的设计,通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。
5.ionic 专注原生,让你看不出混合应用和原生的区别
6.ionic 提供了强大的命令行工具。
7.ionic 性能优越,运行速度快。

“`
这个时候你可以学习这个网址进行学习
http://www.runoob.com/ionic/ionic-tutorial.html

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
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 内设
实现了首页商品分类,广告栏,分类菜单 <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>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值