ionicionic开发

ionic开发Android App学习笔记（一）

2015-10-23  本文已影响6473人  镜花水月一梦不觉

简介

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

官网：http://ionicframework.com/ 打开稍慢，但是没有被墙。

ionic特点：漂亮的界面　追求性能 　专注原生　免费开源

既然是开源的，就不得不提一下它的源代码地址：

ionic的github地址

已经有2万个star。

环境搭建

  1. 下载 Node.js

    上面的链接是Node的官网，当然也可以去中文网站下载，选择对应的平台和版本进行下载。

    ps：作者用的是mac电脑，也推荐用mac电脑进行以后的开发操作，各种命令用起来比较方便。

  2. 安装Node.js

    mac版本的Node.js下载下来的直接就是一个dmg的安装包，一直点下一步就能顺利安装成功。

    安装完成后，打开终端输入node -v ,出现版本号即为安装成功，如下图。

    查看node版本号

  3. 安装cordova和ionic

    node安装成功后，打开终端，执行 npm install -g cordova ionic 命令，如果出现无法写入的权限，则执行sudo npm install -g cordova ionic 输入mac登录密码以管理员身份进行下载安装。该下载过程可能比较缓慢，花费较长的时间。安装完成后，分别执行ionic -v 和cordova -v出现相应的版本号，即为安装成功。

  4. 安装Android SDK

    下载安装Android SDK这里不再多说

  5. 配置相关环境变量

    笔者开始是在.bash_profile文件中配置ANDROID_HOME ，但是在做相关操作的时候却好像没有按照这个配置的路径去找sdk，报找不到相应sdk的错误，所以参考了facebook上React Native的配置，又在.bashrc中进行了相同的配置。 如果找不到这2个文件，可以通过vi命令创建文件，然后将相应的配置写入保存，然后执行

    source .bash_profile和source .bashrc 即可。

创建ionic项目

相关的配置完成后，打开终端，在相应的目录下执行

ionic start myApp tabs

即可创建一个带tab页的项目，当然也可以创建其他风格的，如下

 ionic start myApp blank    创建一个空白的项目

ionic start myApp sidemenu  创建一个带侧滑栏的项目

如下图即为完整的项目目录：

目录结构

编译项目

进入项目目录，终端下执行

ionic platform add android

然后执行

ionic build android

即可进行编译，android采用的是gradle进行编译，第一次可能要去下载gradle，过程比较慢，花费较长时间。

等待，等待，出现 BUILD SUCCESSFUL 即为编译成功。

调试运行

还在当前项目目录下，执行如下命令

ionic emulate android

即可在模拟器上运行，如果没有模拟器可能会报错。

这里重点说明以下如何安装到真机上。

需要执行如下命令

ionic run --target=56112d22 android

说明：等号后面的是手机的标识码，可以通过adb devices获取到，当然前提是手机通过usb数据线连接到电脑上。

运行效果图如下：

运行效果图

默认的情况下，tab是在上面的，上图是笔者改过之后的效果，如何将tab栏从顶部移到底部呢？

参考链接：http://bbs.phonegap100.com/thread-1495-1-1.html

上面的链接中可能说的不是很清楚，笔者是进行如下操作的，找到

myApp/www/js/app.js 文件（ps：myApp是项目名称）

打开app.js，找到第24行，添加如下代码

.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
    $ionicConfigProvider.platform.ios.tabs.style('standard');
    $ionicConfigProvider.platform.ios.tabs.position('bottom');
    $ionicConfigProvider.platform.android.tabs.style('standard');
    $ionicConfigProvider.platform.android.tabs.position('bottom');

    $ionicConfigProvider.platform.ios.navBar.alignTitle('center');
    $ionicConfigProvider.platform.android.navBar.alignTitle('left');

    $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
    $ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');

    $ionicConfigProvider.platform.ios.views.transition('ios');
    $ionicConfigProvider.platform.android.views.transition('android');
})

贴上改完之后完整的app.js代码

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

    .run(function ($ionicPlatform) {
        $ionicPlatform.ready(function () {
            // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
            // for form inputs)
            if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
                cordova.plugins.Keyboard.disableScroll(true);

            }
            if (window.StatusBar) {
                // org.apache.cordova.statusbar required
                StatusBar.styleLightContent();
            }
        });
    })
    .config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
        $ionicConfigProvider.platform.ios.tabs.style('standard');
        $ionicConfigProvider.platform.ios.tabs.position('bottom');
        $ionicConfigProvider.platform.android.tabs.style('standard');
        $ionicConfigProvider.platform.android.tabs.position('bottom');

        $ionicConfigProvider.platform.ios.navBar.alignTitle('center');
        $ionicConfigProvider.platform.android.navBar.alignTitle('left');

        $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
        $ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');

        $ionicConfigProvider.platform.ios.views.transition('ios');
        $ionicConfigProvider.platform.android.views.transition('android');
    })
    .config(function ($stateProvider, $urlRouterProvider) {

        // Ionic uses AngularUI Router which uses the concept of states
        // Learn more here: https://github.com/angular-ui/ui-router
        // Set up the various states which the app can be in.
        // Each state's controller can be found in controllers.js
        $stateProvider

            // setup an abstract state for the tabs directive
            .state('tab', {
                url: '/tab',
                abstract: true,
                templateUrl: 'templates/tabs.html'
            })

            // Each tab has its own nav history stack:

            .state('tab.dash', {
                url: '/dash',
                views: {
                    'tab-dash': {
                        templateUrl: 'templates/tab-dash.html',
                        controller: 'DashCtrl'
                    }
                }
            })

            .state('tab.chats', {
                url: '/chats',
                views: {
                    'tab-chats': {
                        templateUrl: 'templates/tab-chats.html',
                        controller: 'ChatsCtrl'
                    }
                }
            })
            .state('tab.chat-detail', {
                url: '/chats/:chatId',
                views: {
                    'tab-chats': {
                        templateUrl: 'templates/chat-detail.html',
                        controller: 'ChatDetailCtrl'
                    }
                }
            })

            .state('tab.account', {
                url: '/account',
                views: {
                    'tab-account': {
                        templateUrl: 'templates/tab-account.html',
                        controller: 'AccountCtrl'
                    }
                }
            });

        // if none of the above states are matched, use this as the fallback
        $urlRouterProvider.otherwise('/tab/dash');

    });

改完之后，再次运行，tab栏就移到了底部。

至此，整个ionic项目从创建到运行就都完成了。

WebStorm开发

用webstorm打开整个项目，目录结构如下：

WebStorm项目目录结构

添加运行的module，如下图配置，即可直接在webstorm中运行ionic项目，部署到真机上

module运行配置

就酱！！！

参考链接:

http://www.ionic.wang/

http://bbs.phonegap100.com/thread-1495-1-1.html

上一篇 下一篇

猜你喜欢

热点阅读