hybird app(混合式app开发)

之ionic 框架平台 guide

cordova 创建相应平台的app

1. npm install -g cordova //全局安装cordova-cli

2.cordova create hello com.example.hello HelloWorld  
//创建 hello:项目文件夹名, com.example.hello:java包名 HelloWorld:app应用安装名

3. cd hello
 cordova platform add ios --save   //添加平台 ios需要mac osx操作系统
 cordova platform add android --save
 cordova platform ls  // 列出项目现在支持的平台(添加过的平台)

4.
4.1检查开发环境要求是否ok  (比如开发android,需要的基础要求jdk,和android sdk,相应配置放在文下面)
cordova requirements

4.2检查项目运行配置(相应配置放在文下面)
运行app需要一个AVD(Android Virtual Device)安卓虚拟机,或者说安卓模拟器(Android emulator)

5.构建app (build app)
cordova build  // 构建全部添加平台的app
cordova build ios // 指定构建平台的app
//生成的apk文件在 platforms/android/build/outputs/apk/下

6.测试app
cordova emulate android  
//第一次运行命令由于android虚拟机启动很缓慢而且在pc极卡,所以可能会超时而失败,
不关闭启动的虚拟机,重试此命令即可用同一个虚拟机实例重复以上rebuild,在虚拟机上安装apk,run的步骤
退出后也可在安装的应用主页中看到相应的应用
或者
使用插入pc的手机测试
$ cordova run android
 note:
 需手机连接pc打开usb调试
 使用 cordova run --list 查看(可用设备)available device
 若无打开pc上的设备管理器,查看adb interface的驱动是否有叹号
 
 有叹号则安装驱动:
 http://adbdriver.com/  通用adb驱动    
    在windows8,10上不能安装 unsigned drivers because the system enables driver signature enforcement by default.
    http://adbdriver.com/documentation/how-to-install-adb-driver-on-windows-8-10-x64.html
装完驱动后再运行 cordova run android即可

7.添加插件 add plugin
(通过安装插件库的方式,为js api提供本地sdk函数的调用,插件库放在npm仓库上,使用npm安装)
比如照相机

插件搜索
$ cordova plugin search camera

插件安装
$ cordova pluign add cordova-plugin-camera
  // Fetching plugin "cordova-plugin-camera@~2.1.0" via npm
  // Installing "cordova-plugin-camera" for android
  // Installing "cordova-plugin-camera" for ios
  // ...

8.定制不同平台(using merges)

不要直接去修改 platforms下第一级子目录下www文件夹内的内容,因为在编译转换过程中它们会被跨平台的项目根目录下的www下的文件所替换
每个平台下的子目录 'merges' 提供了地方去放那些特定平台下的内容允许你覆盖或者新加文件到特定平台

编辑www/index.html 增加
<link rel="stylesheet" type="text/css" href="css/overrides.css" />

添加一个空的www/css/overrides.css  防止其他平台编译时error找不到文件

merges/android 下增加css/目录 在这个目录下写 overrides.css 的相应代码

merges新增相应平台的文件 比如ios平台增加一个后退按钮
merges/ios/img/back_button.png

9.cordova的更新
$ sudo npm update -g cordova

更新平台
$ cordova platform update android --save
$ cordova platform update ios --save

其它 :
启动www目录的本地 web服务器
 cordova serve [port]  // 不指定端口则默认监听8000

访问项目:http://HOST_IP:PORT/PLATFORM/www

查看帮助:
cordova help [command]
cordova [command] -h
cordova -h [command]

4.1
安装好jdk并设置类似:
JAVA_HOME=C:\Program Files\Java\jdk1.7.0_67

下载好android sdk后
1.sdk manager 安装包 install package  (有点儿漫长的安装过程...文件很多也很占空间)
    note:
    1.Tools目录全选
    主要安装 :
    Android SDK Tools
    Android SDK Platform-tools
    Android SDK Build-tools (highest version)

2.选择安装多个 Android X.X
    主要安装:    
    SDK Platform
    A system image for the emulator, such as
    ARM EABI v7a System Image
        关于安卓系统的模拟cpu
        Intel x86 Atom System Image是支持X86的Android模拟器，ARM EABI v7aSystem Image是模拟ARM体系，创建模拟器时模拟的CPU不同，ARM运行速度较慢，所以Intel推出了支持x86的Android模拟器，这将大大提高启动速度和程序的运行速度，允许Android模拟器以原始速度（真机运行速度）运行在使用Intel x86处理器的电脑中
    　　要使用的话需要安装 英特尔硬件加速执行管理器
    　　https://software.intel.com/zh-cn/android/articles/intel-hardware-accelerated-execution-manager
    　　在SDK中勾选Android版本对应的Intel x86 Atom System Image点击Install package即可
        注意：Intel x86 Atom System Image仅仅是X86版本的模拟器 不是Android版本

2.设置环境变量
'ANDROID_HOME'  C:\Program Files (x86)\Android\android-sdk
path下追加    %ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;

验证配置: 命令行运行 adb 和 android list 有反应说明配置ok

4.2项目配置(运行用的虚拟机配置)
运行app需要一个AVD(Android Virtual Device)安卓虚拟机,安卓模拟器(Android emulator)
    配置avd
    $ android avd

相关设置说明:
skin:
nexus 5 尺寸: 360x640 像素1920x1080
定制Android模拟器skin
参考:http://blog.chinaunix.net/uid-10212972-id-2969114.html

标屏        分辨率        宽屏        分辨率QVGA        320×240     WQVGA       320x480WQVGA2      400x240WQVGA3      432x240VGA         640×480     WVGA        800×480WVGA2       768 * 480FWVGA       854 * 480
HVGA        480×320
DVGA        960x640
SVGA        800×600       WSVGA      1024×600 / 1024 * 576
XGA         1024×768      WXGA       1280×768 / 1280×800 / 1280*960
SXGA        1280×1024     WXGA+      1440×900
SXGA+       1400×1050     WSXGA+     1680×1050
UXGA        1600×1200     WUXGA      1920×1200
QXGA        2048×1536     WQXGA      2560×1536PAL         576 * 520
NTSC        486 * 440VGA：Video Graphics Array，即：显示绘图矩阵，相当于640×480 像素；
HVGA：Half-size VGA，即：VGA的一半，分辨率为480×320，像三星盖世Ace S5830就是使用这分辨率
QVGA：Quarter VGA，即：VGA的四分之一，分辨率为320×240，一般用于小屏手机 像三星盖世Mini S5570就是使用这分辨率；
WQVGA：Wide Quarter VGA，即：扩大的QVGA，分辨率比QVGA高，比VGA低，一般是：400×240，480×272；
WVGA：Wide Video Graphics Array，即：扩大的VGA，分辨率为800×480像素，像三星i9000就是使用这分辨率；
FWVGA：Full Wide VGA ，数码产品屏幕材质的一种，VGA的另一种形式，比WVGA分辨率高，别名 ： Full Wide VGA, ，其分辨 率为854×480象素(16:9)240×320, portrait : emulator -skin QVGA-P
320×240, landscape: emulator -skin QVGA-L
320×480, portrait : emulator -skin HVGA-P (default)
480×320, landscape: emulator -skin HVGA-L

2.使用ionic框架

1.npm -g cordova ionic

2.建立ionic项目
$ ionic start myApp tabs   //myApp:项目名文件夹名 tabs:初始类型

新建的基础项目:
$ ionic start myApp blank
$ ionic start myApp tabs
$ ionic start myApp sidemenu

3.设置项目:
cd myApp
ionic setup sass  //设置项目使用sass
$ ionic platform add ios  // 添加相应平台 ios / android
$ ionic build ios         // 构建相应平台的app

4.运行预览项目app
ionic serve       //浏览器查看并(实时重载)live reload
$ ionic emulate ios     // 调用那个平台的模拟器测试app

目前ionic构建的app支持
ios6+, Android4.0+

ionic start 命令将构建
如下项目结构
├── bower.json     // bower dependencies
├── config.xml     // cordova configuration
├── gulpfile.js    // gulp tasks
├── hooks          // custom cordova hooks to execute on specific commands
├── ionic.project  // ionic configuration
├── package.json   // node dependencies
├── platforms      // iOS/Android specific builds will reside here
├── plugins        // where your cordova/ionic plugins will be installed
├── scss           // scss code, which will output to www/css/
└── www            // application - JS code and libs, CSS, images, etc.

www/ index.html
www下lib/ionic/js
all AngularJS extensions in the ionic.bundle.js
推荐其它angular模块放在 lib/js/angular下

cordova.js or phonegap.js 文件在开发环境下是不可见的,但是他会包含在运行的安卓模拟器的app里

www/js
app.js(项目js入口文件)
开始写
1.编辑angular.module('todo', ['ionic'])
2.index.html添加 <script src="js/app.js"></script>
3. <body ng-app="todo">

4.做不同平台的一些特定文件和改变,可以直接将platforms/platform作为 XCode或Android Eclipse项目的根目录,
此时若工作的www目录作了一些更改,通过
$ cordova prepare ios/android  //将www/目录的更改同步的相应平台的www文件夹下

chrome上做安卓手机webapp的远程调试
http://developer.android.com/guide/webapps/debugging.html

5.写html template:
<script id="new-task.html" type="text/ng-template">
  <div class="modal">
    ...
  </div>
</script>
模板可以从本地或者远程载入,模板的url是它的id

6.加模态框后 写控制器
angular.module('todo', ['ionic'])

.controller('TodoCtrl', function($scope, $ionicModal) {
  // No need for testing data anymore
  $scope.tasks = [];

// Create and load the Modal
  $ionicModal.fromTemplateUrl('new-task.html', function(modal) {
    $scope.taskModal = modal;
  }, {
    scope: $scope,
    animation: 'slide-in-up'
  });

// Called when the form is submitted
  $scope.createTask = function(task) {
    $scope.tasks.push({
      title: task.title
    });
    $scope.taskModal.hide();
    task.title = "";
  };

// Open our new task modal
  $scope.newTask = function() {
    $scope.taskModal.show();
  };

// Close the new task modal
  $scope.closeNewTask = function() {
    $scope.taskModal.hide();
  };
});

7. 发布app时的一些工作
7.1.调整清理插件如: 构建发行版时去掉控制台输出的插件
$ cordova plugin rm cordova-plugin-console

7.2.发布
$ cordova build --release android
这行命令的生成基于config.xml的配置
自己定制此配置文件参考: http://cordova.apache.org/docs/en/latest/guide/platforms/android/config.html

7.3.
apk签名
platforms/android/build/outputs/apk/HelloWorld-release-unsigned.apk

7.3.1.
使用jdk的keytool命令行工具生成 私钥 (如果已有,可跳过)
$ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
输入口令,以及几个问题
生成my-release-key.keystore文件,保存这个文件,如果丢失这个文件将不能更新app.

7.3.2.
对这个未签名的apk签名 (sign the unsigned APK) 使用jdk的jarsigner命令
$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name

7.3.3.使用zipalign工具优化apk (..../Android/sdk/build-tools/VERSION/zipalign):来自android sdk
 '/path/to/Android/sdk/build-tools/VERSION/zipalign' (需要选择具体版本的zipalign加入path %ANDROID_HOME%\build-tools\20.0.0;)
$ zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk
得到最终的HelloWorld.apk

8.更新app 版本
修改config.xml,增加version value,然后重新构建即可

$ionic serve 命令相关选项
  restart or r        //  重启客户端app
  goto or g 然后给一个 url  // 让app导航到指定的url
  consolelogs or c    // 启用/禁用控制台输出
  serverlogs or s    //启用/禁用服务器日志输出
  quit or q    // 关闭web服务器并停止服务

视频教程: Ionic Crash Course
https://www.youtube.com/watch?v=C-UwOWB9Io4&feature=youtu.be

平台支持:
cordova -v
http://cordova.apache.org/docs/en/latest/guide/support/index.html(注意选择命令执行后得到的对应版本)

cordova:
cordova 6.0 : 需安装jdk1.7或更高  
  同时安装如android-sdk 5.1 配 android build tools 19.1.0或更高

ionic:
目前ionic构建的app支持
ios6+, Android4.0+

android:
android 6.0   (API level 23)
android 5.1.1 (API level 22)
android 4.2.2 (API level 17)
android 4.0.3 (API level 15)
android 2.3.3 (API level 10)

nexus 5 5.1
nexus 5(初上市2015 os:4.4 32GB:2600rmb)

相关文档:
http://ionicframework.com/docs/
http://docs.ionic.io/
https://cordova.apache.org/docs/en/latest/guide/overview/
http://developer.android.com/sdk/index.html#Other

上传应用:
上传google play store(应用商店)
创建开发者账号: https://play.google.com/apps/publish/   需要:$29 money
apple开发者需要 $99 money

ionic已经包含一些app的样式详见: http://ionicframework.com/docs/components/#header

ionic 平台定制
几种方式:
1. platform classes
2.使用js ,angularjs with style
3.dynamic template

1.platform classes
ionic会在不同设备上的app的body元素上添加特定class
比如在ios上会添加 class=" platform-ios"

1.1 platform device class:
浏览器         platform-browser     当应用程序运行在电脑桌面版的浏览器里时,比如你使用ionic serve 命令调试时
Cordova     platform-cordova     当应用程序运行在设备上,设备使用cordova来显示时
Webview     platform-webview     当应用程序运行在Webview的本地应用程序时
iOS         platform-ios         当应用程序运行在ios设备上时
iPad         platform-ipad         当应用程序运行在ios 的ipad设备,它会附加到platform-ios上
Android         platform-android     当应用程序运行在安卓设备上时
Windows Phone     platform-windowsphone     当应用程序运行在windows phone上时

1.2 platform os version class: (不同操作系统版本的类)
iOS 8         platform-ios8         设备上的操作系统是ios8
iOS 8.4     platform-ios8_4     设备上的操作系统是ios8.4,这个类会被附加到platfrom-ios8后
Android 4     platform-android4     设备上的操作系统是安卓4
Android 4.4     platform-android4_4     设备上的操作系统是android4.4,这个类会被附加到platfrom-android4后

使用示例:
.platform-android .bar-header {
  text-transform: uppercase;  
}

2.使用工具模块制定相应样式 ionic.Platform

示例:
.controller('AppCtrl', function($scope) {
  $scope.platform = ionic.Platform.platform();  //得到平台 android/ios /...
});

元素上:
<ion-tabs class="tabs-stable" ng-class="{'tabs-positive': platform == 'android', 'tabs-icon-top': platform != 'android'}">
  <!-- ion-tab directives go here -->
</ion-tabs>

<!-- if the platform is android don't add an icon, all other devices get an icon -->
<ion-tab title="Home" ng-attr-icon="{{ platform != 'android' ? 'ion-home' : undefined}}" href="#/tab/home">

3.根据不同的平台加载不同平台的html template
.state('tab', {
  url: "/tab",
  abstract: true,
  controller: 'AppCtrl',
  templateUrl: function() {
    if (ionic.Platform.isAndroid()) {
        return  "templates/home-android.html";
    }
    return "templates/home.html";
  }
})

3.2. cordova的merges目录不再默认加入项目中了,但是它仍然是一个很有用的工具用来定制不同平台的app,
你可以在项目第一级路径下(和www 或者platforms同级)加merges目录

可参考:http://cordova.apache.org/docs/en/3.5.0/guide/cli/index.html#The%20Command-Line%20Interface_using_merges_to_customize_each_platform

示例:
如果每个平台有自己单独的index.html
merges/
    ios/
        index.html
    android/
        index.html

覆盖重写css js文件
merges/
    ios/
        index.html
        css/
            platform.css
        js/
            app.js
    android/
        index.html
        css/
            platform.css
        js/
            app.js

javascript 部分:

1.$ionicActionSheet
向上推出的面板,让用户选择一些选项,危险选项红色高亮

使用: controller内注入 $ionicActionSheet
示例:
.controller(function($scope, $ionicActionSheet, $timeout) {

// Triggered on a button click, or some other target
 $scope.show = function() {

// Show the action sheet
   var hideSheet = $ionicActionSheet.show({
     buttons: [
       { text: '<b>Share</b> This' },
       { text: 'Move' }
     ],
     destructiveText: 'Delete',
     titleText: 'Modify your album',
     cancelText: 'Cancel',
     cancel: function() {
          // add cancel code..
        },
     buttonClicked: function(index) {
       return true;
     }
   });

// For example's sake, hide the sheet after two seconds
   $timeout(function() {
     hideSheet();
   }, 2000);

};
});

选项: http://ionicframework.com/docs/api/service/$ionicActionSheet/

2.$ionicBackdrop
灰色背景,在popup等一些或其它html表面的
多个ui组件都需要这样一个灰色背景,但是在同一时间dom上只需要一个灰色背景
因此每个组件显示backdrop的时候都调用 $ionicBackdrop.retain();,
当动作完成释放它时调用 $ionicBackdrop.release();

每次retain()后都需要release(),backdrop才会消失
如果调用三次retain(),那么也需要调用三次release()才会消失backdrop.

$ionicBackdrop 会从rootScope向下级scope广播 backdrop.shown 和 backdrop.hidden 事件

示例:
function MyController($scope, $ionicBackdrop, $timeout, $rootScope) {
  //Show a backdrop for one second
  $scope.action = function() {
    $ionicBackdrop.retain();
    $timeout(function() {
      $ionicBackdrop.release();
    }, 1000);
  };

// Execute action on backdrop disappearing
  $scope.$on('backdrop.hidden', function() {
    // Execute action
  });

// Execute action on backdrop appearing
  $scope.$on('backdrop.shown', function() {
    // Execute action
  });

}

3.content

$ionicScrollDelegate:
ionContent 指令可以很方便的配置使用ionic定制scroll view,或使用浏览器overflow 的scroll

可以使用 ionRefresher 指令实现下拉刷新
可以使用 ionInfiniteScroll 指令实现 无限滚动

如果ion-content内的内容是动态的,确保在内容加载后再触发$ionicScrollDelegate 的resize()方法.

ionic-cli
更新ionic
$ ionic lib update
如果安装了bower,这行命令将调用 bower update ionic,否则的话,命令行会从ionic'CDN上下载更新本地静态的ionic文件

在手机端或者模拟器调试时继续使用live reload

run / emulate 命令时加上 --livereload

当live reload被启用了,调试信息一样可以通过--consolelogs 或者 -c

[--livereload|-l] .......  Live Reload app dev files from the device (beta)
[--consolelogs|-c] ......  Print app console logs to Ionic CLI (live reload req.)
[--serverlogs|-s] .......  Print dev server logs to Ionic CLI (live reload req.)
[--port|-p] .............  Dev server HTTP port (8100 default, live reload req.)
[--livereload-port|-i] ..  Live Reload port (35729 default, live reload req.)
[--debug|--release]

Generate splash screens and icons with ionic resource
http://ionicframework.com/blog/automating-icons-and-splash-screens/

cd [project]

ionic login  // 输入ionic 邮箱名和登录密码

ionic upload // 上传