Ionic环境配置及android打包

时间 2019-11-20

标签 ionic 环境配置 android 打包栏目 Android 繁體版

原文原文链接

环境搭建步骤：css

一、安装node.js 这是为了使用npm来安装ant，cordova，ionichtml

验证是否安装好node.js的方法是在命令提示符中输入“node -v” 若出现版本号，证实安装成功。java

nodejs 中文网站 http://nodejs.cn/ 下载安装就能够了安装步骤能够参考 http://www.runoob.com/nodejs/nodejs-install-setup.htmlnode

二、下载jdk，并配置java环境（网上教程不少）
验证是否安装好的方法是在命令提示符中输入“javac”
若出现以下内容，证实安装成功。 android

三、安装ant,并配置相应的环境（网上搜教程）ios

验证是否安装好ant的方法是在命令提示符中输入“ant -v”git

若出现版本号，证实安装成功。angularjs

四、安装cordova github

安装不成功经过以下方式： npm install -g cnpm --registry=https://registry.npm.taobao.org
执行成功后，输入 cnpm install -g cordova 安装web

验证是否安装好cordova的方法是在命令提示符中输入“cordova -v”

若出现版本号，证实安装成功。

五、安装express

cmd 输入：npm install express 等待一会便可

六、安装android sdk 配置环境变量 cmd->adb

七、安装Ionic

验证是否安装好ionic的方法是在命令提示符中输入“ionic -v”

若出现版本号，证实安装成功。

建立Ionic项目

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

ionic start myIonic blank

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

由于Ionic是基于angularjs框架开发的，因此在使用Ionic以前须要对angularjs有必定的了解。
在开发初期的调试咱们通常会使用浏览器做为咱们的调试工具，Ionic提供了一个serve命令为咱们的应用建立web站点可

ionic serve

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

PS. 开启livereload后Ionic会默认监听www下面的文件，若是须要自定义的话请编辑ionic.project的watchPatterns来设置须要监听的范围

{  
  "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应用的主页面：

<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中加入该页面的路由

// 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'  
angular.module('starter', ['ionic']).config(function ($stateProvider, $urlRouterProvider) {  
  $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");  
})  
  
.run(function($ionicPlatform) {  
  $ionicPlatform.ready(function() {  
    if(window.cordova && window.cordova.plugins.Keyboard) {  
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard  
      // for form inputs)  
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);  
  
      // Don't remove this line unless you know what you are doing. It stops the viewport  
      // from snapping when text inputs are focused. Ionic handles this internally for  
      // a much nicer keyboard experience.  
      cordova.plugins.Keyboard.disableScroll(true);  
    }  
    if(window.StatusBar) {  
      StatusBar.styleDefault();  
    }  
  });  
})

哈，咱们tab应用的大概样子已经出来了，可是如今点击下面的菜单并无什么反应，接下来咱们就要开始添加咱们的子页面了，在templates文件夹中新建：home.html、facts.html、about.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路由作一个调整。

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

好了，咱们来点点看吧，页面切换Ionic已经帮咱们实现了相似原生app的切换动画效果，是否是有一点原生app的感受了？下面章节咱们会实如今移动端的部署

部署到手机和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并远程安装到手机上后自动打开应用，是否是很简单？

调试

咱们在前面已经说过，在开发前期咱们通常会在web中调试，而Ionic为咱们提供了很是方面的web调试环境，只须要执行ionic serve就能够实现lievereload，而在部署到移动端后也能够开启livereload的，咱们只须要修改下咱们run命令参数：

ionic run android --livereload -c -s

这是android的调试模式，不管在虚拟机上仍是在手机上均可以实现livereload，不用每次开发完成编译再部署！-c是开启客户端日志输出，-s是开启服务器端日志输出。

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

建立key，须要用到keytool.exe (位于jdk1.6.0_24\jre\bin目录下)，使用产生的key对apk签名用到的是jarsigner.exe (位于jdk1.6.0_24\bin目录下)，把上两个软件所在的目录添加到环境变量path后，打开cmd输入

 
         D:\>keytool -genkey -alias demo.keystore -keyalg RSA -validity 40000 -keystore demo.keystore 
        
         /*说明：-genkey 产生密钥 
        
         -alias demo.keystore 别名 demo.keystore 
        
         -keyalg RSA 使用RSA算法对签名加密 
        
         -validity 40000 有效期限4000天 
        
         -keystore demo.keystore */ 
        
         D:\>jarsigner -verbose -keystore demo.keystore -signedjar demo_signed.apk demo.apk demo.keystore 
        
         /*说明：-verbose 输出签名的详细信息 
        
         -keystore  demo.keystore 密钥库位置 
        
         -signedjar demor_signed.apk demo.apk demo.keystore 正式签名，三个参数中依次为签名后产生的文件demo_signed，要签名的文件demo.apk和密钥库demo.keystore.*/

　　注意事项：android工程的bin目录下的demo.apk默认是已经使用debug用户签名的，因此不能使用上述步骤对此文件再次签名。正确步骤应该是:在工程点击右键->Anroid Tools-Export Unsigned Application Package导出的apk采用上述步骤签名。