Hybrid APP操作手冊說明V2

混合式移動端批注［W1】：單君文檔標(biāo)邀?意義不明、作用不明

安裝及環(huán)境配置

1.安裝javajdk

2.安裝androidsdk

解壓后android-sdk-windowa.zip,甲.面有兩個(gè)程序："SDKManager,exe”負(fù)責(zé)

下載或更新SDK包。和“AVDManager.exe"負(fù)責(zé)創(chuàng)建管理虛擬機(jī)。先進(jìn)行SDK

下載。請參考androudsdk幫助文檔批注［w2］:對安裝目錄是否有特殊需求霜要明確，如，

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

3.安裝node.js批注［w3):node.js安裝容易配置出錯(cuò)，需要更詳細(xì)的過

程

4.安裝ionic&cordova

npminstallgcordovaionic批注［w4］:指出是windows自帶cmd控制臺,還是某軟

件shell中執(zhí)行命令會更明確

5.環(huán)境配置

右擊我的電腑一〉屬性一〉高級系統(tǒng)設(shè)置一〉高級-->環(huán)境變量

系統(tǒng)變量'ANDRO1D_HOME值androidsdk安裝路徑例：G:\adE-bundle-windows-x86-20130917.

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

其它在安裝過后，會自動添加

6.創(chuàng)建項(xiàng)目

ionicstartTesttabs批注【w5J:向批注“4

可選模板為sidemenu側(cè)滑、tabs底部lab切換、blank空白

7.添加平臺

迸入Test項(xiàng)目目錄下

ionicplatformaddandroid--android

ionicplatformaddios--ios

8.添加插件

cordovapluginaddcordova-plugin-device--班本設(shè)備信息

cordovapluginaddcordova-plugin-camera--畏像

cordovapluginaddcordova-plugin-media-capture一相冊

cordovapluginaddcordova-plugin-media--媒體

cordovapluginaddcordova-plugin-network-information--網(wǎng)絡(luò)連接

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

cordovapluginaddcordova-plugin-contacts一聯(lián)系人

cordovapluginaddcordova-plugin-splashscreen■■閃屏

cordovapluginaddcordova-plugin-inappbrowser--打開新的瀏覽器

cordovapluginaddcordova-plugin-console--調(diào)試主控制臺

cordovapluginaddcordova-plugin-file

cordovapluginaddcordova-plugin-file-transfer--訪問文件

cordovapluginaddcordova-plugin-dialogs一彈窗

cordovapluginaddcordova-plugin-vibration--振動

9.eclipse導(dǎo)入ionic項(xiàng)目

File--Import-->android-->ExistringAndroidCodeIntoWorkspace--)選擇項(xiàng)目路徑一

->Finish

導(dǎo)入完成后8clipsePackageExplo匕er■出現(xiàn)CordovaLib與MainActiuicy兩個(gè)項(xiàng)目

10.ionic調(diào)用攝像頭

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)進(jìn)入Test目錄下

(2)將解壓好的crosswalk-cordova-15.44.384.12-arm目錄中的framework/!所有文件拷貝

到p1atforms/android/CordovaLib中(叫果你實(shí)在需要同時(shí)支持arm和N86平臺，那把兩個(gè)該目錄下

的文件都抵進(jìn)去就可以了。普通情況下，一段沒必要為N86平臺浪費(fèi)那20?b體積

cp-a<path_to_unpackcd_bund1c>/framcwc1?!</?

\p1atfonns/nndroid/Cordoval-ib/

(3)將VERSION拷貝到Android項(xiàng)目根目錄

cp-a<path_to_bund1c>/VERS1ONplatforns/android/

(4)Crosswalk需要兩個(gè)權(quán)艱才能運(yùn)作，如果你安裝的插件里沒有.那就需要手動在pla

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

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

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

(5)按順序^譯項(xiàng)目

xwalk_cor(*_library

CordovaLib

MainActivity

二：使用ADT/Eclipse

(1)將解壓好的crosswalk-cordova-15.44.384.12-arm目錄中的fra?ewor

k導(dǎo)入

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

inish

導(dǎo)入完成后，出現(xiàn)兩個(gè)項(xiàng)目framework與xwalk_corelibrary

(2)修改依賴

右鍵點(diǎn)擊主項(xiàng)目，選擇屬性/Properties.點(diǎn)擊Android，點(diǎn)擊Rdd…/滲加….這里要把framewor

k和xwalkcorelibrary項(xiàng)目都作為主項(xiàng)目的依賴庫。

(3)主項(xiàng)目主入口

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）清理所有的項(xiàng)目

（5）編譯項(xiàng)目

二：調(diào)試項(xiàng)目

安卓手機(jī)USB調(diào)試模式打開

Android4.0.x,點(diǎn)擊設(shè)芭一＞開發(fā)人員選項(xiàng)一＞USB調(diào)試（勾選）批注［w6］：不同機(jī)型操作方式不完全一樣,有的機(jī)型默

連接數(shù)據(jù)線（手機(jī)?電腦）認(rèn)是沒有開發(fā)人員選項(xiàng)的.需要查看手機(jī)信息，在版本

Eclipse啟動主項(xiàng)0RunAs->l.AndroidApplication號上連點(diǎn)5~7次進(jìn)行開啟

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