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 FilesJavajdk1.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)Androidandroid-sdk
path下追加 %ANDROID_HOME%platform-tools;%ANDROID_HOME% ools;
验证配置: 命令行运行 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 320x480 WQVGA2 400x240 WQVGA3 432x240 VGA 640×480 WVGA 800×480 WVGA2 768 * 480 FWVGA 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×1536 PAL 576 * 520 NTSC 486 * 440 VGA：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%uild-tools20.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 // 上传