ionic_ionicpopup - CSDN
精华内容
参与话题
  • Ionic入门】-Ionic简介

    千次阅读 2016-03-25 20:14:44
    Ionic是一个强大的混合式/hybrid ... Ionic是一个轻量的手机UI库,具有速度快,界面现代化、美观等特点  Ionic 关注外观和体验,以及和应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开

                                    

    Ionic介绍:

          Ionic是一个强大的混合式/hybrid HTML5移动开发框架,特点是使用标准的HTML、CSS和JavaScript,开发跨平台应用.

         Ionic是一个轻量的手机UI库,具有速度快,界面现代化、美观等特点

         Ionic 关注外观和体验,以及和应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发.


                

       

     Ionic主要部分:

          CSS 框架 - 提供原生App质感的CSS样式模拟. Ionic这部分的实现使用了Ionicons图标样式库.

          JavaScript  框架- 提供移动 Web 应用开发框架. Ionic 基于 AngularJS 基础框架开发,因此,在遵循

    AngularJS的框架约束之外,Ionic还是用了AngularJS UI Router实现前端路由.

          命令行 /CLI - 命令行工具集用来简化应用的开发、构造和仿真运行。Ionic 命令行工具使用了Cordova,依赖

    于平台SDK(Android & iOS)实现将移动 web 项目打包成原生 app.


         

     Ionic特点:

    1.ionic 基于Angular语法,简单易学.

    2.ionic 是一个轻量级框架.

    3.ionic 完美的融合下一代移动框架,支持 Angularjs 的特性, MVC ,代码易维护.

    4.ionic 提供了漂亮的设计,通过SASS构建应用程序,它提供了很多UI组件来帮助开发者开发强大的应用.

    5.ionic 专注原生,让你看不出混合应用和原生的区别.

    6.ionic 提供了强大的命令行工具.

    7.ionic 性能优越,运行速度快.


    扩展知识:

       SASS:(Syntactically Awesome StyleSheets) 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量嵌套规则、 mixins导入等众多功能, 并且完全兼容 CSS 语法.
                  
     AngularJS:为了克服HTML在构建应用上的不足而设计的.
                              

      Cordova:驱动PhoneGap的核心引擎

                                                    

        本篇主要介绍了Ionic,和主要的几大部分知识点,以及Ionic的特点.扩展部分知识,没有进行深入了解,在这里也只

    是知道有这么个东西,深入的学习还需要进一步.

        接下来的博客,会通过实例去介绍Ionic的CSS库及它的JS库和命令行等新鲜知识.


     

    展开全文
  • ionic的15个demo和一个真实项目

    热门讨论 2020-07-26 23:30:59
    包含15个样式demo和一个真实项目的例子,适合新手学习入门ionic
  • 一部分介绍ionic框的CSS布局功能,实现基于移动端应用的各类样式完成的过程。 另一部分介绍ionics框架的各种JS组件,用于完成webapp在移动端的各类与本地应用效果功能实现的过程。 第三部分通过2 个完整的应用案例来...
  • ionic介绍

    2018-12-13 10:51:27
    最近公司在使用ionic做混合APP,虽然是最后端,但是也查一下东西,介绍一下吧 这是菜鸟教程的 Ionic 一.介绍 ionic是一种老式的使用H5开发iOS和Android应用的方式,也可以使用新的语言React Native开发,当然对于H5...

    最近公司在使用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开发的应用,有时会发生莫名其妙的问题。

    展开全文
  • Ionic开发实战

    万次阅读 多人点赞 2016-04-05 11:12:33
    折磨的两个月!Ionic从零单排,到项目发布!遇到了很多问题但都一一解决了,此篇文章留作记录。

    折磨的两个月!Ionic从零单排,到项目发布!遇到了很多问题但都一一解决了,此篇文章留作记录。
    当初想着因为项目不大人力足够的并且因为团队没有移动开发经验的情况下,是不是能够是用hybrid app来代替原生来完成这个项目,经过一些技术调研之后选择了Ionic。当时是对Ionic一无所知,凭借一些盲目的自信,想着方正有开发文档能有什么问题呢。现在想想都觉得当时有点冲动万一中间出现什么坑或者无法解决的问题都找不到可以咨询的人。不过好歹结果是好的,基本实现了当初需求设计,并且效果还不错。

    因为Ionic是基于angularjs框架开发的,所以在使用Ionic之前需要对angularjs有一定的了解。
    可以看我另一篇文章:

    http://blog.csdn.net/i348018533/article/details/50779248

    步骤:

    1.Ionic环境安装

    Ionic开发是依赖于Nodejs环境的,所以在开发之前我们需要安装好Nodejs。下载安装:http://nodejs.org/
    安装完成之后打开PowerShell输入命令node -v和npm -v验证是否安装成功,如果返回版本号则说明成功。
    在PowerShell命令行中执行:

    npm install -g cordova ionic 

    这是使用npm包管理器安装cordova和ionic,-g的意思是全局安装,全局安装后在PowerShell中任何目录下都可以使用cordova和ionic的命令。

    PS. 安装过程需要打开VPN翻墙,貌似是资源被墙了,无语。

    2.创建Ionic项目

    Ionic官网提供了三个项目模板blank、tabs和sideMenu ,参阅:http://ionicframework.com/getting-started/
    我们使用blank空模板创建一个我们的应用,并且完成一个简单的tabs导航的小应用,打开PowerShell cd到开发目录,执行:

    ionic start myIonic blank

    其中myIonic为我们的项目名称
    执行过程它会从github下载项目源码,请等待。。。
    执行完毕后你到开发目录下查看会发现多了一个名为myIonic的文件夹,这个文件夹就是Ionic项目的所在目录了。
    目录下有以下文件:

    hooks           //google之后这个目录应该是在编译cordova时自定义的脚本命令,方便整合到我们的编译系统和版本控制系统中
    plugins         //cordova插件的目录,插件的安装下一节详述
    scss            //scss文件,发布时编译这个目录下的文件输出到www的css目录中
    www             //我们的开发目录,页面、样式、脚本和图片都放在这个目录下
    --css
    --img
    --js
    --lib
    --index.html
    bower.json      //bower配置文件
    config.xml      //Ionic的配置文件 ⱃ可以配置app的id,名称、描述起始页和一起其他配置
    gulpfile.js     //gulp构建工具的执行文件,在这个文件中创建任务实现编译scss,css、js优化等
    ionic.project   //Ionic的项目文件可以配置Ionic命令中livereload的监控文件
    package.json    //npm配置文件

    在开发初期的调试我们一般会使用浏览器作为我们的调试工具,Ionic提供了一个serve命令为我们的应用创建web站点可以非常方便的调试应用, cd到开发目录下,执行命令:

    ionic serve

    执行完毕后Ionic会自动帮我们打开我们的默认浏览器并跳转到我们的应用页面,浏览器打开页面时Ionic已经给我们开启了livereload模式,开启之后我们编辑www下的文件后保存时Ionic会通过websocket通知浏览器刷新页面,我们就不用每次修改完毕手动刷新页面了,又极大的提高了我们的工作效率。

    PS. 开启livereload后Ionic会默认监听www下面的文件,如果需要自定义的话请编辑ionic.projectwatchPatterns来设置需要监听的范围

    {
      "name": "myIonic",
      "app_id": "",
      "watchPatterns": [
            "www/js/*",
            "www/js/*/*",
            "www/*.html",
            "www/templates/*.html",
            "www/css/*.css"
       ]
    }

    www/index.html作为我们的程序入口文件,首先编辑这个文件,在body标签中加入

    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>

    这段标签对于对Ionic不熟悉的人来说可能有点陌生,Ionic针对移动端自定义了一套样式库,并且使用Angular的指令封装了各个模块,ion-nav-bar是导航页面头部、ion-nav-view是导航内容页面。inde.html入口页面我们已经写完了,接下来我们新建两个我们自己的页面。我们在www目录下新建一个templates文件夹,存放我们的页面并新建页面:tabs.html 作为我们tab应用的主页面:

    tabs.html

    <ion-tabs class="tabs-icon-top tabs-positive">
    
      <ion-tab title="Home" icon="ion-home" href="#/tab/home">
        <ion-nav-view name="home-tab"></ion-nav-view>
      </ion-tab>
      <ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
        <ion-nav-view name="about-tab"></ion-nav-view>
      </ion-tab>
    
    </ion-tabs>

    ion-tab为tab应用的底部菜单项 title是菜单按钮显示的文字,icon是菜单按钮图标,href是点击菜单的跳转地址,子元素ion-nav-view是点击菜单后子页面显示的位置,ion-nav-view属性name为该tab的名称,后面添加子页面会详细描述。

    然后在app.js中加入该页面的路由

    $stateProvider
          .state('tabs', {
              url: "/tab",
              templateUrl: "templates/tabs.html",
          })
    $urlRouterProvider.otherwise("/tab");

    保存之后页面会自动刷新显示的应该是介个样子:
    介个样子
    哈,我们tab应用的大概样子已经出来了,但是现在点击下面的菜单并没有什么反应,接下来我们就要开始添加我们的子页面了,在templates文件夹中新建:home.htmlfacts.htmlabout.html
    home.html 首页

    <ion-view view-title="Home">
        <ion-content class="padding">
          <p>
            <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
          </p>
        </ion-content>
    </ion-view>

    facts.html

    <ion-view view-title="Facts">
        <ion-content class="padding">
          <p>
            <a class="button icon icon-right ion-chevron-right" href="#/tab/home">Home</a>
          </p>
        </ion-content>
    </ion-view>

    about.html

    <ion-view view-title="About">
        <ion-content class="padding">
          <p>
            About Us
          </p>
        </ion-content>
    </ion-view>

    ion-view是我们子页面的内容,属性view-title可以设置页面头部的标题名称,添加好文件后我们需要在app.js中加入各个页面的路由,并且需要对之前的tabs路由做一个调整。

    $stateProvider
          .state('tabs', {
              url: "/tab",
              abstract: true,
              templateUrl: "templates/tabs.html",
          })
          .state('tabs.home', {
              url: "/home",
              views: {
                'home-tab': {
                  templateUrl: "templates/home.html"
                }
              }
          })
          .state('tabs.facts', {
              url: "/facts",
              views: {
                'home-tab': {
                  templateUrl: "templates/facts.html"
                }
              }
          })
          .state('tabs.about', {
              url: "/about",
              views: {
                'about-tab': {
                  templateUrl: "templates/about.html"
                }
              }
          })
    
    
       $urlRouterProvider.otherwise("/tab/home");

    大家发现tabs路由增加了一个abstract字段,该字段在angular中的解释是抽象页面,不能独立作为页面展示只能作为其他页面父页面,当加载子页面之前加载父页面。
    其他子页面的路由和tabs路由的配置有所不同名称命名是父路由.子路由的形式,并且增加了一个views字典,字段的key值对应着我们前面所说的tabs.htmlion-nav-viewname属性,表示该路由跳转的页面属于某个tab的子页面,同时修改我们的otherwise默认页为/tab/home
    保存之后浏览器自动刷新,我们来看一下效果。
    介个样子

    好了,我们来点点看吧,页面切换Ionic已经帮我们实现了类似原生app的切换动画效果,是不是有一点原生app的感觉了?下面章节我们会实现在移动端的部署。

    3.部署到手机和cordova插件的使用

    一个简单的Web应用我们已经开发完成了,接下来我们就要做一些部署到移动端之前的准备了。
    Ionic支持两个平台ios、android,默认的Ionic项目并没有添加这两个平台,我们需要手动添加,cd到开发目录下执行命令:

    ionic platform add android 
    ionic platform add ios

    一般项目都需要两个平台同时部署,所以我们就添加两个,执行完毕之后执行命令查看你已经添加的平台列表:

    ionic platform list

    结果:

    Installed platforms: android 4.0.0, ios 3.8.0
    Available platforms: amazon-fireos, blackberry10, browser, firefoxos, windows, windows8, wp8

    接下来的部署我们分开讲述:

    Android
    Android部署分真机和虚拟机,其实方法类似,在部署之前需要安装JDK、Android SDK到开发环境中,配置好JDK的JAVA_HOME和Android SDK的ANDROID_HOME到环境变量中去,并把Android SDK安装目录添加到Path中。
    配置好之后打开PowerShell输入命令返回正确:

    adb version

    接下来就简单了,把手机连接到电脑,并开启usb调试模式,执行命令:

    ionic run android 

    Ionic开始编译项目生成apk并远程安装到手机上后自动打开应用,是不是很简单?

    IOS
    ios部署需要一台mac电脑,在mac电脑上面根据本篇ionic的安装过程安装环境之后,添加ios平台到项目,因为apple开发的证书限制我们在没有申请购买apple账号的情况下,使用虚拟机来部署我们的应用,在部署之前需要使用npm安装一个ios-sim插件用来调用模拟器的,执行命令:

    sudo npm install -g ios-sim

    安装好之后,cd 到开发目录下执行:

    sudo ionic build ios

    开始编译项目,编译完成之后用Xcode打开开发目录下platform->ios->myIonic.xcodeproj的项目文件,Xcode中选择要运行的虚拟机版本并执行快捷键cmd+R运行虚拟机,虚拟机打开后会自动运行你应用。

    PS. 为什么不用run ios 命令直接启动虚拟机呢,因为我的环境下执行run会报错,虚拟机会打开但是无法运行程序,找了半天解决解决方案没有结果,索性直接用Xcode了,效果是一样样的

    到了这一步我们的app已经部署完毕了,接下来我们要为我们的app添加一个拍照功能,需要引用到cordova插件,而Ionic把一些常用到的插件用angularjs服务做了一层封装:http://ngcordova.com/ 我们只需要在项目中安装ngCordova插件就可以想使用angularjs的服务一样在我们的项目中调用了,我们先安装ngCordova(安装需要bower包管理器,并打开VPN。。。):

    bower install ngCordova

    安装完毕之后再www/index.html中引用

    <script type="text/javascript" src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script type="text/javascript" src="cordova.js"></script>

    PS. ng-cordova.js需要在cordova.js引用之前

    并在app.js中添加依赖注入关系,另外我发现一个问题如果安装的ngCordova的0.1.18-alpha版本,在引用时会报错,我撤回0.1.17-alpha版本就没有问题了,不知道是什么原因。

    angular.module('starter', ['ionic', 'ngCordova'])

    接下来cd到开发目录,我们使用ionic命令来安装插件:

    cordova plugin add cordova-plugin-camera

    安装完毕之后会在项目目录下的plugins文件夹中多出一个cordova-plugin-camera,这就是我们插件目录。
    下面我要在home页面中增加一点按钮调用摄像头,我们先在www/js中新增一个controller.js文件编写以下代码,并在index.html中引用:

    (function () {
        'use strict'
        angular
        .module('starter')
        .controller("homeCtrl", homeCtrl, ['$cordovaCamera'])
    
        function homeCtrl ($scope, $cordovaCamera) {
            $scope.openCamera = function () {
                var options = {
                  quality: 50,
                  destinationType: Camera.DestinationType.DATA_URL,
                  sourceType: Camera.PictureSourceType.CAMERA,
                  allowEdit: true,
                  encodingType: Camera.EncodingType.JPEG,
                  targetWidth: 100,
                  targetHeight: 100,
                  popoverOptions: CameraPopoverOptions,
                  saveToPhotoAlbum: false
                };
    
                $cordovaCamera.getPicture(options).then(function(imageData) {
                  var image = document.getElementById('myImage');
                  image.src = "data:image/jpeg;base64," + imageData;
                }, function(err) {
                  // error
                });
            }
        }
    
    })();

    我们新建了一个homeCtrl并添加$cordovaCamera的引用,在controller中定义一个openCamera方法来调用摄像头,在home.html中加入以下代码:

    <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
    <a class="button icon icon-right ion-chevron-right" ng-click="openCamera()">Camera</a>

    这里写图片描述
    增加了一个按钮去调用我们定义的方法openCamera,最后一步在app.js中绑定home路由和controller,在app.js中修改代码:

    .state('tabs.home', {
       url: "/home",
        views: {
          'home-tab': {
            templateUrl: "templates/home.html",
            controller:"homeCtrl"
          }
        }
    })

    到此我们的app增加的打开摄像头功能已经开发完了,我们来测试下,运行ionic的run方法来看看效果吧。
    这里写图片描述

    4.调试

    我们在前面已经说过,在开发前期我们一般会在web中调试,而Ionic为我们提供了非常方面的web调试环境,只需要执行ionic serve就可以实现lievereload,而在部署到移动端后也可以开启livereload的,我们只需要修改下我们run命令参数:

    ionic run android --livereload -c -s

    这是android的调试模式,无论在虚拟机上还是在手机上都可以实现livereload,ios则只需要把android修改为ios即可,不用每次开发完成编译再部署!-c是开启客户端日志输出,-s是开启服务器端日志输出。–livereload参数的的意义在于修改生成包中的起始页面地址,修改为远程服务器地址这样就可以做到修改即通知客户端刷新页面了。

    5.ios打包、android打包

    能使用Ionic来开发app的很可能对Ios和android的app打包发布流程不是很熟悉,我这里简单说明下:
    Android
    Android的打包比较简单执行命令:

    ionic build android -release 

    找到www/platform目录下生成的apk包,此时的apk还不能被安装到手机上,还需要一步签名操作,大家可以参考:
    http://www.cnblogs.com/qianxudetianxia/archive/2011/04/09/2010468.html

    IOS
    ipa文件的打包需要现在apple develop网站上注册一个账号,在网站申请生产环境的证书导入到你的开发机中和开发机绑定才可以使用xcode导出,详情参阅:
    http://blog.csdn.net/songrotek/article/details/8448331
    http://www.mexiqq.com/2014/07/25/xcode6+ios8%E6%9C%80%E6%96%B0%E7%9C%9F%E6%9C%BA%E8%B0%83%E8%AF%95%E6%95%99%E7%A8%8B/

    android使用crosswalk

    android内置浏览器大家都知道性能是硬伤,尤其是低端机,所有ionic支持使用crosswalk浏览器代替系统内置浏览器内核,使用crosswalk后性能提升效果比较明显,但是apk的包体积会增大大约20M,是不用取决于项目使用场景。
    使用crosswalk非常简单:

    ionic browser add crosswalk

    执行完成后在插件列表里会增加一个cordova-plugin-crosswalk-webview插件。
    安装完成后在打包时会自动下载对应的crosswalk包,如果下载失败尝试使用vpn,下载完成集成过程中我遇到了一些报错,报错的原因大致就是我的android sdk没有安装完全,这个大家在使用时需要注意下。

    结束语

    Ionic作为一个hybrid应用的开发框架总体来说还是很不错的,因为它的开发效率很高,并且可以跨平台的发布这两点可以让很多人心动了。另外Ionic在实际应用中的表现情况是这样的,在IOS平台中运行效率和原生的效果非常好,但是在Android中的就不是太理想了尤其是Android的低端机,不过Ionic的团队对于这方面的性能优化还在不断的努力,希望Ionic未来更牛逼。

    另外从这次的项目中体会到了尤其是一些新兴技术在国内的资料太少,遇到问题不得不翻墙去找国外资料,但是碍于英文水平往往过程是非常痛苦的,所以学好英语是非常重要的!!!

    最后介绍下这个应用是一款中介行业的房源管理软件,集成了gps、推送(最好用极光推送他们有对phonegap插件的支持)、摄像头拍照、时间控件、文件上传等原生API

    展开全文
  • 什么是ionic

    千次阅读 2015-12-03 16:07:30
    ionic从哪儿来? 什么是Ionic? 什么是Cordova? 什么是AngularJS ? 我们为什么选ionic ionic从哪儿来? 纵观互联网的历史,我们不难发现。计算机程序程序的发展都是一下几个规律和特点的。第一,都是...

    • ionic从哪儿来?
    • 什么是Ionic?
    • 什么是Cordova?
    • 什么是AngularJS ?
    • 我们为什么选ionic

    ionic从哪儿来?

    纵观互联网的历史,我们不难发现。计算机程序程序的发展都是一下几个规律和特点的。第一,都是由最初的CS结构和BS程序构成。但是,随着互联网的发展。BS结构的程序普及率和市场比重越来越大。这也是发展趋势,这也得益于网络、硬件的飞速发展。以前从拨号上网到现在的家用百M带宽和4G甚至是将来的5G……第二,BS结构的程序对客户端要求相对较少,而cs的客户端随着操作系统的淘汰,中间件的淘汰等等等等,在长期项目上BS明显比BS更经济,可维护性也更好。这样的用户体验也确实更好……

    现在我们处于正在爆发期的移动互联网时代,移动终端、智能手机的飞速发展,也同样有以上几个特点和规律,目前手机平台(IOS 、Android 、Windows Phone 等等)都是各有千秋,我们常常为了适配各种平台,投入的开发成本是多重的,为了灵活方便、节约成本,手机上各种类似于BS结构的技术不断涌现!早起的WAP、现在的HTML5 、CSS3 、Jquery Mobile等等用户体验越来越好。

    由于手机的硬件、网络等资源的限制,web应用的性能与原生APP的用户体验还是有点点差距。不过,这个差距一直在越来越小。越来越多的技术在努力缩小这种体验的差距,期中就有一个特别突出的“ionic”框架!

    什么是 ionic?

    IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从web的角度开发手机应用,基于PhoneGap的编译平台,可以实现编译成各个平台的应用程序。
    Ionic在最新的移动设备中表现非常卓越,运行非常流畅。 操作最少的 DOM,非 jQuery,和硬件加速过渡,用户体验体验不错,尤其是IOS平台,可媲美原生APP。

    什么是 Cordova?

    Cordova是一款开放源代码的App开发框架,旨在让开发者使用HTML、Javascript、CSS等Web APIs开发跨平台的移动平台应用程序,其原名称之为 PhoneGap,Adobe 收购Nitobi 公司后,PhoneGap 商标保留,代码贡献给了 Apache 基金会,而Apache 将其命名为 Apache Callback,其后发布新版本时,定名为 Apache Cordova。

    Cordova是一个行动设备的API接口集,利用JavaScript存取这些接口可以调用诸如摄影机、罗盘等硬件系统资源。配合上一些基于HTML5、CSS3技术的UI框架,如jQuery Mobile、Dojo Mobile或Sencha Touch,开发者得以快速地开发跨平台App而不需要编写任何的原生代码。注意到因为Cordova本身仍是一个原生程式,为App打包时依然需要用到这些系统平台的SDK。

    什么是 AngularJs?

    AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是一个框架,不是类库,是像backbone一样提供一整套方案用于设计web应用。它不仅仅是一个javascript框架,因为它的核心其实是对HTML标签的增强,有图有真相,请看官网描述:何为HTML标签增强?其实就是使你能够用标签完成一部分页面逻辑,具体方式就是通过自定义标签、自定义属性等,这些HTML原生没有的标签/属性在ng中有一个名字:指令(directive)。后面会详细介绍。那么,什么又是动态web应用呢?与传统web系统相区别,web应用能为用户提供丰富的操作,能够随用户操作不断更新视图而不进行url跳转。ng官方也声明它更适用于开发CRUD应用,即数据操作比较多的应用,而非是游戏或图像处理类应用。
    为了实现这些,ng引入了一些非常棒的特性,包括模板机制、数据绑定、模块、指令、依赖注入、路由。通过数据与模板的绑定,能够让我们摆脱繁琐的DOM操作,而将注意力集中在业务逻辑上。
    Angular遵循软件工程的MVC模式,并鼓励展现,数据,和逻辑组件之间的松耦合。通过 依赖注入(dependency injection) ,Angular为客户端的Web应用带来了传统服务端的服务,例如独立于视图的控制。因此,后端减少了许多负担,产生了更轻的Web应用!

    我们为什么选ionic

    什么是Hybrid App?

    混合应用(Hybrid App)相当于是利用Web开发技术编写的原生应用,如HTML5、CSS、JavaScript都是进入原生容器(Native Container)的比较常用的语言,原生应用包含了一个链接到HTML文件的WebView隐藏浏览器。而使用Cordova、PhoneGap或其他类似的解决方案,不但使整合HTML和原生代码成为可能,甚至不费吹灰之力便能做到,也让在应用商店中部署App更加容易。
    目前这种混合应用,开发者可以创建一个HTML5应用,然后以原生的方式运行。而Corodva,PhoneGap等解决方案也能够让混合应用像Native App那样访问照相机、加速计、位置和通讯录等设备功能。
    此外,混合应用开发还有很多好处。其中一个便是别出心裁的跨平台优势,既省钱又省时间。不仅如此,开发混合应用还是创意付诸实践的最佳捷径,所以优势之二是:Web开发者不论水平如何,只需经过短期培训就能成为合格的混合应用开发者。一方面公司的成本可以降低,另一方面学习难度也低于Objective-C、Swift、Java及其他原生语言。虽然从性能上讲,混合应用还稍逊Native App,但几经发展,混合应用也在不断提升的过程中。
    目前比较关注度和排名比较高的Ionic、Famo.us、F7、OnsenUI以及Angular Material Design,选择最合适的Hybrid App UI框架。
    那让我们好好那对比一下这几个框架:
    1. Ionic Framework

    整合了AngularJS的Ionic框架发布并不长,却已在混合&移动开发圈子里备受追捧。该框架的Git repo累计超过20,000星,几乎每天都在更新,而且Ionic论坛(Ionic Forum)也相当活跃,甚至比StackOverflow更能帮助开发者解决技术上的难题。Ionic越来越流畅。Ionic团队也在努力提高框架的效率和性能,尽可能实现原生质感。

    • Ionic的优劣势对比:
    优势 劣势
    完美融合AngularJS  
    全套UI组件(下拉刷新、无限加载、标签等) 变换&动画效果不够流畅
    社区活跃、框架适用范围广  

    - Ionic 评分:

    评分标准 得分
    文档 8.0
    快速入门 10.0
    性能 5.0
    社区 7.0
    学习曲线 7.0

    - Famo.us+ AngularJS的优劣势对比:

    优势 劣势
    60 fps的动画效果让应用更加生动,拥有着更好的用户体验 不提供菜单、标签、基本应用结构/布局等基础架构
    整合AngularJS 发展尚未成熟,可供参考的范例有限
    提供初学者工具包 文档中缺少“入门指南”

    - Famo.us 评分:

    评分标准 得分
    文档 6.0
    快速入门 4.0
    性能 10.0
    社区 4.0
    学习曲线 4.0

    FrameWork 7 还算比较流行,但是只是支持IOS,这个不能作为我们对比的对象

    综合看来,Ionic 的框架更适合去做跨平台的 Hybrid APP!


    您可自由转发此文, 但请保留出处:Ionic在线学习网站  http://www.ioniconline.com


    展开全文
  • Ionic 3 实战开发指南

    千次阅读 2019-07-05 10:04:13
    课程简介 在移动开发领域,各种不同的框架和工具可谓是百花齐放。从 Android 和 iOS 的原生应用,到...此达人课将介绍移动开发中的一个重要框架——基于 Apache Cordova 的混合移动应用开发方案 IonicIonic 的优势...
  • ionic3学习之环境搭建

    千次阅读 2018-06-14 14:17:27
    ionic 简介 ionic 是一款基于Angular、Cordova 的强大的HTML5 移动应用开发框架, 可以快速创建一个跨平台的移动应用。可以快速开发移动App、移动端 WEB 页面、微信公众平台应用,混合app web 页面。ionic 主要关注...
  • ionic初体验

    2019-11-05 18:20:28
    体验一把ionic
  • Ionic—简介

    2019-11-18 17:19:57
    一、Ionic框架 二、Cordova框架 一、Ionic框架 基本概念 Ionic是一个开源、免费的代码库。Ionic是一款成熟、跨平台的移动App混合开发框架,是一款基于Angular和Cordova的html5移动应用开发框架。 Ionic可以...
  • ionic教程 (4)--登录页的制作与实现

    千次阅读 2019-01-15 09:36:09
    目录 1、新建登录页 2、 修改app.module.ts 3、修改app.component.ts ... ...6、补充:路由带参跳转,数据双向...ionic g page login  会自动生成这几个文件 2、 修改app.module.ts 导入新生成的 Login im...
  • ionic3常用命令行集合

    千次阅读 2017-09-27 18:37:19
    npm install -g cnpm –registry=https://registry.npm.taobao.org(npm镜像源指向淘宝) cnpm install -g cordova ionic(安装cordova ionic) cnpm update -g cordova ionic(更新cordova ionicionic -help...
  • 现在的项目是移动端的,所以需要用cordova调用原生的设备,例如摄像头等,然后就是由于之前接触过ionIC,所以就它们之间的区别特意总结了一下。 很多新朋友ionic基础教程都学完了,还是不知道ionic 和...
  • ionic开发中屏幕的宽度和高度的获得

    千次阅读 2016-10-28 15:19:57
    ionic开发中屏幕的宽度和高度的获得screen.width //屏幕的宽度 screen.height //屏幕的高度题外话: 这个还是很有用的,画九宫格时候需要高度,不然屏幕尺寸一换就变长方形了,九宫格的宽可以用col col-33 实现 ,...
  • Couldn't find ionic.config.json file. Are you in an Ionic project? 二、解决方法 进入项目的路径,和一个能运行的项目一对比,发现少了些文件: 发现少了: platforms ...
  • Ionic3开发环境搭建-VS Code

    千次阅读 2018-01-29 10:36:24
    一、Ionic3在VS Code中的开发环境搭建 1.全局安装Ionic包 npm install -g cordova ionic使用 ionic -v命令,查看是否安装成功 2.使用ionic start xxx 命令创建Ionic3项目 ionic start myApp tabs注:tabs 是...
  • 第一个Ionic项目

    万次阅读 2015-03-27 15:26:33
    参照Ionic官网教程教程,完成了第一个Ionic项目的创建。过程记录如下:FOR IOS:1、安装node.js 2、安装cordova和ionic npm install -g cordova ionic 3、创建项目 ionic start myApp tabs 4、运行项目 cd ...
  • Ionic 2 - 10分钟Hello Word教程

    万次阅读 2016-04-13 08:58:28
    对于有任何web开发经验的人来说,利用Ionic CLI运行一个Ionic 2 app是非常简单是事情,在这个教程里,你会在10分钟之内构建一个“Hello World”程序 仅仅几行命令,你就可以快速通过模板,走在通往Shark Tank...
  • 理解Ionic、Angular、Cordova及插件之间的关系

    万次阅读 多人点赞 2017-03-11 09:24:27
    本文提及概念不区分Ionic 1/Angular 1和Ionic 2/Angular 2。 首先我们需要明确以下几个概念:1.即使我们将移动端web页面做得和原生应用及其相似,在我们的页面中也无法像原生应用那样调用原生的能力,当然通过输入框...
  • ionic3正式发布(ionic2升级到ionic3)

    千次阅读 2017-06-11 20:54:51
    ionic3 大概在2017年的复活节正式发布,相对于ionIc2有很多的新特性 官方网址 : http://blog.ionic.io/announcing-ionic-cli-v3/ ionic3的新特性介绍 : https://www.joshmorony.com/whats-new-in-ionic-3/ 1 ...
1 2 3 4 5 ... 20
收藏数 24,954
精华内容 9,981
关键字:

ionic