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

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    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项目
$ 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

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

关键词：