hybird app(混合式app开发)cordova ionic 创建相应平台的app-白红宇

hybird app(混合式app开发)cordova ionic 创建相应平台的app

阅读量：5270 次

发布时间：2019-06-14

本文共 13791 字，大约阅读时间需要 45 分钟。

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.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 增加

添加一个空的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       320x480                        WQVGA2      400x240                        WQVGA3      432x240VGA         640×480     WVGA        800×480                        WVGA2       768 * 480                        FWVGA       854 * 480HVGA        480×320DVGA        960x640SVGA        800×600       WSVGA      1024×600 / 1024 * 576XGA         1024×768      WXGA       1280×768 / 1280×800 / 1280*960SXGA        1280×1024     WXGA+      1440×900SXGA+       1400×1050     WSXGA+     1680×1050UXGA        1600×1200     WUXGA      1920×1200QXGA        2048×1536     WQXGA      2560×1536PAL         576 * 520NTSC        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-P320×240, landscape: emulator -skin QVGA-L320×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:

...

</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)