Hybrid APP操作手册说明V2

混合式移动端批注［W1】：单君文档标邀•意义不明、作用不明

安装及环境配置

1.安装javajdk

2.安装androidsdk

解压后android-sdk-windowa.zip,甲.面有两个程序："SDKManager,exe”负责

下载或更新SDK包。和“AVDManager.exe"负责创建管理虚拟机。先进行SDK

下载。请参考androudsdk帮助文档批注［w2］:对安装目录是否有特殊需求霜要明确，如，

是否不能有空格，不能有中文之类

3.安装node.js批注［w3):node.js安装容易配置出错，需要更详细的过

程

4.安装ionic&cordova

npminstallgcordovaionic批注［w4］:指出是windows自带cmd控制台,还是某软

件shell中执行命令会更明确

5.环境配置

右击我的电腑一〉属性一〉高级系统设置一〉高级-->环境变量

系统变量'ANDRO1D_HOME值androidsdk安装路径例：G:\adE-bundle-windows-x86-20130917.

46”61976骨加-0m<116-3皿€1038-86-2013091八8(^

其它在安装过后，会自动添加

6.创建项目

ionicstartTesttabs批注【w5J:向批注“4

可选模板为sidemenu侧滑、tabs底部lab切换、blank空白

7.添加平台

迸入Test项目目录下

ionicplatformaddandroid--android

ionicplatformaddios--ios

8.添加插件

cordovapluginaddcordova-plugin-device--班本设备信息

cordovapluginaddcordova-plugin-camera--畏像

cordovapluginaddcordova-plugin-media-capture一相册

cordovapluginaddcordova-plugin-media--媒体

cordovapluginaddcordova-plugin-network-information--网络连接

cordovapluginaddcordova-plugin-battery-status--电池事件

cordovapluginaddcordova-plugin-contacts一联系人

cordovapluginaddcordova-plugin-splashscreen■■闪屏

cordovapluginaddcordova-plugin-inappbrowser--打开新的浏览器

cordovapluginaddcordova-plugin-console--调试主控制台

cordovapluginaddcordova-plugin-file

cordovapluginaddcordova-plugin-file-transfer--访问文件

cordovapluginaddcordova-plugin-dialogs一弹窗

cordovapluginaddcordova-plugin-vibration--振动

9.eclipse导入ionic项目

File--Import-->android-->ExistringAndroidCodeIntoWorkspace--)选择项目路径一

->Finish

导入完成后8clipsePackageExplo匕er■出现CordovaLib与MainActiuicy两个项目

10.ionic调用摄像头

11

angular.module(starter*t[ionic*,•ngCordova",•starter.controllers*)).con

fig(function($stateProvider/$urlRouterProvider,SionicConfigProvider){

SstateProvider.state(*tab',(

url-

abstract:true,

templateUrl:,,templates/tabs.html',

)>

.state('tab.home(

11

url:/homer

views:{

•tab-home*:(

templateUrl:Mtempiates/hone/home.html

•«

/

controller:*homecontroller,

)

}

})

)

这是home页面

<ion-viewview-title=*{{title}},>

<ion-content>

<divclass="first-list">

<divclass=Mrowrow-h-2M>

<divclass-Mcolcol-50M>

<divclass-^calm-bglightc-h-2back-roW*ng-click-^goCamera{)M>

<div>摄像头</div>

<iclass="iconion-camera"></i>

</div>

</div>

</div>

</div>

</ion-content>

</ion-view>

Controller添加依赖

angular.module('starter.controllers',['ionic']).controller('homeController',funct

ion($scope,ENV,$cordovaCamera){

$scope.title・'首页

$-'homecontroller';

$scope.env=ENV;

$scope.goCamera=function(){

console.log('goCamera');

$scope.show_camera«true;

varoptions={

quality:50,

destinationType:Camera.DestinationType.DATA^RL,

sourceType:Camera.PictureSourceType.CAMERA,

allowEdit:true,

encodingType:Camera.EncodingType.DPEG,

targetwidth:100,

targetHeight:100,

popoverOptions:CameraPopoverOptions,

saveToPhotoAlbum:false,

correctOrientation:true

}；

$cordovaCamera.getPicture(options).then(function(imageData){

Sscope.imageSrc="data:image/jpeg;base64,"+imageData;

$scope.show_camera=false;

},function(err){

console,log(•保存失败

})；

)；

!)

11.封装crosswalk核心浏览器

下载好的crosswalk-cordova-15.44.334.12-arm或crosswalk-cordova-14.43.343.23-x8

6解压

一：使用命令

(1)进入Test目录下

(2)将解压好的crosswalk-cordova-15.44.384.12-arm目录中的framework/!所有文件拷贝

到p1atforms/android/CordovaLib中(叫果你实在需要同时支持arm和N86平台，那把两个该目录下

的文件都抵进去就可以了。普通情况下，一段没必要为N86平台浪费那20«b体积

cp-a<path_to_unpackcd_bund1c>/framcwc1•!</♦

\p1atfonns/nndroid/Cordoval-ib/

(3)将VERSION拷贝到Android项目根目录

cp-a<path_to_bund1c>/VERS1ONplatforns/android/

(4)Crosswalk需要两个权艰才能运作，如果你安装的插件里没有.那就需要手动在pla

tforms/android/AndroidManifest.xml里布加一下

<usespermissionandroid:name=*android.permission.ACCESS_WIFISTATE"/>

<uses-permissionandroid:name=*'android.permission.ACCESS_NETIORK_STATE*/>

(5)按顺序^译项目

xwalk_cor(*_library

CordovaLib

MainActivity

二：使用ADT/Eclipse

(1)将解压好的crosswalk-cordova-15.44.384.12-arm目录中的fra«ewor

k导入

File--Import-->android-->ExistringAndroidCodeIntoWorkspace-->fni»ework-->F

inish

导入完成后，出现两个项目framework与xwalk_corelibrary

(2)修改依赖

右键点击主项目，选择属性/Properties.点击Android，点击Rdd…/渗加….这里要把framewor

k和xwalkcorelibrary项目都作为主项目的依赖库。

(3)主项目主入口

publicclassMainActivitvextendsActivity{

privateXWalkViewxWalkView;

©Override

publicvoidonCreate(BundlesavedlnstanceState){

super.onCreate(savedlnstanceState);

setContentView(R.layout.acti\/ity_main);

xlMalkView=(XWalkView)findViewById(R.id.activity_main);

xldalkViPUJ.load("ra<;.g7.rpgn.rn"jnul1);

}

（4）清理所有的项目

（5）编译项目

二：调试项目

安卓手机USB调试模式打开

Android4.0.x,点击设芭一＞开发人员选项一＞USB调试（勾选）批注［w6］：不同机型操作方式不完全一样,有的机型默

连接数据线（手机•电脑）认是没有开发人员选项的.需要查看手机信息，在版本

Eclipse启动主项0RunAs->l.AndroidApplication号上连点5~7次进行开启

Eclipse中Console日志输出如下

[2016-05-2115:15:02-MainActivity]

[2016-05-2115:15:02-MainActivity]AndroidLaunch!

[2016-05-2115:15:02-MainActivity]adbisrunningnormally.

[2016-05-2115:15:02-MainActivity]Performing

com.ionicframework.myapp493603.MainActivityactivitylaunch

[2016-05-2115:15:02-MainActivity]AutomaticTargetMode:Unabletodetect

devicecompatibility.Pleaseselectatargetdevice.

[2016-05-2115:15:05-MainActivity]UploadingMainActivity.apkontodevice

'HIROJJAASKSGKRHI'

[2016-05-2115:15:17-MainActivity]InstallingMainActivity.apk...

[2016-05-2115:15:54-MainActivity]Success!

[2016-05-2115:15:54-MainActivity]Startingactivity

com.ionicframework.myapp493603.MainActivityondeviceHIROJ3AASKSGKRHI

[2016-05-2115:15:55-MainActivity]ActivityManager:Starting:Intent

{act=android.intent.action.MAINcat=[android.inten