《AppCan初級工程師學(xué)員實訓(xùn)標(biāo)準(zhǔn)化操作手冊》

AppCan.cn

-站關(guān)移動開發(fā)服務(wù)平臺

AppCan初級工程師

案例手冊

AppCanHybrid開發(fā)技術(shù)，使你一起分享移動互聯(lián)網(wǎng)紅利

o

項目實戰(zhàn)-大板柱項目案例...............................................1

一、項目案例詳情說明..............................................1

二、預(yù)期效果......................................................2

三、項目開發(fā)流程..................................................2

3.1主頁頁面實現(xiàn)過程(Index_content.html)..........................................3

3.2公司介紹主窗口頁面實現(xiàn)過程(about.html)...................................7

3.3公司介紹浮動窗口頁面實現(xiàn)過程(about_content.html)..................7

3.4企業(yè)招聘頁面實現(xiàn)過程(job.html)...................................................9

3.5產(chǎn)品簡介主窗口頁面實現(xiàn)過程(producl.hlml)..............................13

3.6產(chǎn)品簡介浮動窗口頁面實現(xiàn)過程(product_content.html)............14

3.7合作伙伴主窗口頁面實現(xiàn)過程(co叩eration.html).......................15

3.8合作伙伴浮動窗口頁面實現(xiàn)過程(cooperation_content)..............16

3.9經(jīng)典案例主窗口頁面實現(xiàn)過程(case.html)...................................16

3.10經(jīng)典案例浮動窗口頁面實現(xiàn)過程(case_content.html)................17

3.11聯(lián)系我們主窗口頁面實現(xiàn)過程(contact.htmD..............................18

3.12聯(lián)系我們浮動窗口頁面實現(xiàn)過程(conlacl_conlenl.html)...........19

四、項目涉及知識點...............................................20

五、注意事項.....................................................20

項目實戰(zhàn)?大棱柱項目案例

一、項目案例詳情說明

本項目分為主頁、公司介紹、企業(yè)招聘、產(chǎn)品簡介、合作伙伴、經(jīng)典案例、聯(lián)系我們共

七個頁面。其中主頁為六棱柱特效，然后在六棱柱上不同的棱面跳轉(zhuǎn)至不同的頁面。在項目

中我們用到了六棱柱特效插件、ajax網(wǎng)絡(luò)請求方法、圖片滑塊控件、選項卡控件、多頁面浮

動窗口的加載等技術(shù)手段，

預(yù)期效果

Lt，■■黃零■*，zu±

?KIfTM

2.?QOKMK尹》?,AppCanEMM

工?????（京愴rtt/cWicnM企業(yè)修◎管理平臺

4.。峪乂*，.-*，??”

產(chǎn)品體系

S.Mr?x>|Vlz-a&

主頁公司介紹企業(yè)招聘產(chǎn)品簡介

合作伙伴經(jīng)典案例聯(lián)系我們

三、項目開發(fā)流程

準(zhǔn)備工作

搭建工DE開發(fā)環(huán)境（企業(yè)版或大眾版均可）；如果使用的大眾版工DE,需要提前在官

網(wǎng)注冊一個賬號，用來在線打包創(chuàng)建項目。然后同步到IDE中去。如果使用企業(yè)版IDE,

需要部署好自己的私有打包服務(wù)器，然后在打包服務(wù)器中創(chuàng)建應(yīng)用同步到企業(yè)版的IDE中。

"text":"企業(yè)招聘”

(

"pic":"res:〃3.png”，

“text"：“產(chǎn)品簡介”

),(

"pic":nres://4.png",

"text":"合作伙伴”

},(

"pic":"res://5.png"z

"text":“經(jīng)典案例”

},(

“pic”:Hres://6.png",

“text"："聯(lián)系我們”

))

}；

varjsonstr2={

"value":[{

"pic":"res://al.png",

"text":"公司筒介”

},(

"pic":"res://a2.png",

"text":"企業(yè)招聘”

},(

"pic":"res://a3.png'\

"text":"產(chǎn)品簡介”

),(

"pic":Hres://a4.png",

"text":“合作伙伴”

},(

"pic":"res:〃a5.png”,

"text":“經(jīng)典案例”

},(

"pic":"res:〃a6.png”，

"text":"聯(lián)系我們”

!)

}；

varw=screen.availWidth;

varh=screen.availHeight;

varvalue-uexWidgetOne.platformName;

if(value==HiOS"){

uexHexagonal.setPrismParam(JSON.stringify(jsonstr));

}else{

uexHexagonal.setPrismParam(JSON.stringify(jsonstr2));

//uexHexagonal.setPrismParam(JSON.stringify(jsonstr));

uexHexagonal.open(0,0,w,h);

uexHexagonal.onltemClic：k-function(index){

//alert(index);

uexHexagonal.close();

switch(index){

case0:

appcan.window.open({

name:"about”,

data:"about.html"

!)；

break;

case1:

appcan.window.open({

name:"job",

data:"job.html"

})；

break;

case2:

appcan.windov/.open({

name:"product",

data:"product.html''

!)；

break;

case3:

appcan.window.open({

name:"cooperation".,

data:"cooperation.html"

})；

break;

case4:

appcan.window.open({

name:"case",

data:"case.httnl"

})；

break;

default:

appcan.window.open({

name:"contact",

data:"contact.html',

));

)

三、在和css與js平級的目錄處創(chuàng)建wgtRes文件夾，用于存放六棱柱中需要加

載的圖片。并將準(zhǔn)備好的圖片放至該文件夾下。如下圖：

B昂phone

0③css

□wgtRes

刎Lpng

iff]2.png

印3.png

(S?l4.png

翻5?Png

扇6.png

扇al.png

扁a2.png

扇a3.png

另a4.png

鬲a5.png

麗a6.png

注意：在定義圖片路徑的時候，直接寫：“pic”：“res://l.png“即可，無需寫：

"pic":"wgtRes://I.png”。具體可參考文檔中心：

/index.html?temp=ate工d=301

PathTypes

處議頭Android對應(yīng)跖徑(反中?/—card/?等同于?左贏ge/emulated/0/5iOS對曲徑一

|re17/"^^^^?Widget/wgtRes/jwidget/wgtRes____________________

l/storage/emulated/O/widgetone/apps/BlwIdgetAppId)/Qocuments/apps/xxxhWgetAppId)/

[wgts〃⑶。rage/emulated/O/widgetone/widgets/|/Documents/widgets/

[file:〃/sdcard/%torage/emulated/0/氏

四、插件上傳

由于要實現(xiàn)六棱柱特效效果，我們在程序中調(diào)用立方體旋轉(zhuǎn)效果的方法，所以需要對應(yīng)的插

件進(jìn)行支持。因此要在工DE中對插件進(jìn)行上傳。上傳方式如下圖：

五、本地或在線打包進(jìn)行效果測試。

3.2公司介紹主窗口頁面實現(xiàn)過程(about.html)

目標(biāo)效果:

；H!O號?GM56%”1653

<ikikiwn-

正慕視北京聞授有*公司，成立于2010年.?

期編出州中關(guān)村.在上舞、廣州、黜1、就州、■

慶.反漢.西er南京等地均設(shè)有分公小刈沙,正

a無皿下■曹b內(nèi)■大的稀動欣用開發(fā)率g

AppCanai,在移動授術(shù)與痔的互聯(lián)同應(yīng)用方面有■漫

修的技術(shù)底anc豐的項目買加、.星專注于為軟件

開發(fā)育和企事業(yè)■仗.建供■前能海動皿瞰木與企

業(yè)梃xa電化?懶聯(lián)方EH3UF技術(shù)企業(yè).

實現(xiàn)過程:

一、創(chuàng)建about頁面(選擇“帶返回按鈕”的簡潔布局+空模板)

二、頭部信息修改：頭部欄文字修改成“企業(yè)簡介”

三、引入my.js文件。目的是監(jiān)聽安卓系統(tǒng)的返回鍵事件，并將my.js文件放入

項目的js文件夾下。<scriptsrc="js/my.jsnx/script>

3.3公司介紹浮動窗口頁面實現(xiàn)過程(about_content.html)

目標(biāo)效果:

Q夠與at■心體算女方Mfi?au時的:企*.

實現(xiàn)過程:

一、在body區(qū)域定義一個div用來存放圖片和文字:_________

<bodyclass=,,um-vpbc-bgwh100gg_ffq"ontouchstart>

<divclass=,,ub-imglaboutwhl00">

<divid="company,'style—line-height:1.8em;text-indent:2em;

padding:lemlem0lem;"></div>

</div>

</body>

二、創(chuàng)建一個my.css文件，并在my.css文件中定義上面div中用到的參數(shù):

.about{background-image:url(res/about.png);}

.whlOO{height:100%;width:100%;)

.bg_fff{background-color:#fff;}

.bg_g{background-color:HD9F1F6;}

注意：別忘記引用my.css文件：<1inkrel=nstylesheet*'href="css/my.css">

將about.png圖片放到css/res路徑下面。

三、在appcan.ready中添力口數(shù)據(jù)獲取方式(使用appcan.request.ajax)

<script>

appcan.ready(function(){

vardataUrl="http://testmas.appcan.cn:8082/xm2/OD7";

appcan.window.openToast("數(shù)據(jù)力「我中“，“5000“，”5",“0");

appcan.request.ajax({

type:"get",

url:dataUrlz

dataType:"json"z

success:function(data){

appcan.window.closeToast();

$("ttcompany").text(data.data[1].Comp_pro);

}/

error:function(e){

alert(”數(shù)據(jù)請求失敗"+e);

}

))；

));

</script>

四、定義返回按鈕id,添加appcan.window.publish('2*z'hi'),向2通道發(fā)送hi消息,

使主頁能接收消息，如果能正常接收消息、，那么關(guān)閉六棱柱打開的頁面，返回上一頁。

appcan.button("#re~"z''btn-act",function(){

appcan.window.close(-1);

appcan.window.publish('2'z'h');

})

五、效果預(yù)覽。需在本地或在線打包才能正常演示。

3.4企業(yè)招聘頁面實現(xiàn)過程(job.html)

目標(biāo)效果:

O48Mpp9:16

JavaScript聯(lián):件開發(fā)工程建

1.計算相關(guān)專業(yè)大專以上學(xué)歷.2年以上

相關(guān)工作鋰臉：

2、RiflJavascnptJFXiBM:

3.IK券熟練使用htm(5/css/Javascnpt前

■開發(fā)工作：

4.?|通SQL語句，熟思Kt據(jù)庫的“本操作;

5,熟悉nodejs、linux者優(yōu)先：

實現(xiàn)過程:

一、創(chuàng)建job頁面，選擇帶返回箭頭的空頁面

,?■11中國聯(lián)通令上年11:59@。S9%BD]

<-AppCan

二、頭部欄

1、將頭部欄的標(biāo)題改成“企業(yè)招聘”

1定義返回按鈕id二ret,添加appcan.window,publish('2,,*hi1),向2通道發(fā)送

hi消息，使主頁能接收消息，如果能正常接收消息，那么關(guān)閉六棱柱打開的頁面，返回上一頁。

appcan.button("#,"btn-act",function(){

appcan.window.close(-1);

appcan.window.publish('2','h1);

})

2、在＜!—header結(jié)束—＞的位置添加一個選項卡(tabview),該選項卡分為五個

選項，并調(diào)整至符合需求的狀態(tài)：

<divid="tabview"class="ufsc-bgH></div>

根據(jù)需求，按照如下參數(shù)對選項卡的js框架進(jìn)行調(diào)整：

vartabview=appcan.tab({

selector:"#tabview"z

haslcon:false,

hasAnim:true,

hasLabel:true,

hasBadge:false,

data:[{

label:

Hicon":"fa-qq"

1/{

label："java",

"icon":"fa-windows"

},(

label:"實施I：程”，

'?icon":"fa-weixin"z

badge:1

},(

label:"前局開發(fā)”，

,,icon',:"fa-weixin",

badge:1

},(

label:歸設(shè)M”,

"icon"^'fa-weixin",

badge:1

}]

!)；

3、對頭部欄進(jìn)行加高，使選項卡屬于頭部欄的一部分:

appcan.ready(function(){

vartitHeight=

$('theader').offset().height+$('#tabview*).offset().height;

4、在appcan.ready中添加打開多頁面浮動窗口的方法:

window.onorientationchange=window.onresize1function(){

appcan.frame.resize("content",0ztitHeight);

)

})；

4、在tabview.on-click中設(shè)置多頁面浮動窗口跳轉(zhuǎn)到的子頁面窗口的索引。判斷我們

所選擇的選項卡：

tabview.on("c^ick",function(obj,index){

appcan.window.selectMultiPopover("(r:en",index);

})

三、浮動窗口加載

1、分別創(chuàng)建主窗口要加載的5個浮動窗口(job_js、job_java>job_ss、

job_web、job_ui),刪除主窗口，只保留這些頁面的浮動窗口。選擇空模板即可。如下

圖：

Saphone

SwgtRes

aabout.contenthtml

aabouthtml

4conftgjcml61915-7?8上午%52root

$kon.png61915-7-8上年金52root

index.conttnthtml619：5?7?8上二652root

心indrxhtml61915-7-8上午9:52root

國job.corKenthtml

Cjobjava.conttnc.Hml

尸jobjt.coMtntHml

Cjob.ui.conttnthtml

rjjobwebcorneot-html

四、分別對5個浮動窗口(job_js>job_java>job_ss>job_web>job_ui)進(jìn)

行內(nèi)容的加載。以jobjs_conten.html浮動窗口為例：

1、在浮動窗口的body區(qū)域添加浮動窗口要加載的圖片。如下代碼所示：

<bodyclass="jm-vpbc-bg'*ontouchstart>

<imgclass?"whlOOnstyle?"height:auto**src?"css/res/Jsjob.pnc"/>

</body>

2、由于上面加載圖片時用到了my.css文件中定義的高寬參數(shù)定義(whlOO),因此需

要對mycss文件進(jìn)行引用：<linkrel=*'stylesheet"href=,,css/my.css'*>

3、將要加載的圖片放至src="css/res/Js_job.png”定義的路徑中。

4、引入my.js文件。目的是監(jiān)聽安卓系統(tǒng)的返回鍵事件，并將my.js文件放

入項目的js文件夾下?！磗criptsrc=njs/my.js"x/script>

5、效果預(yù)覽。其他窗口實現(xiàn)的方式一樣(略)

3.5產(chǎn)品簡介主窗口頁面實現(xiàn)過程(product.html)

目標(biāo)效果：

AppCanEMM

企業(yè)移動管理平臺

產(chǎn)品體系

實現(xiàn)過程:

一、創(chuàng)建product頁面，選擇帶返回箭頭的空頁而

?,H中8）聯(lián)通令上午11:59@。$9%?D

AppCan

1umthepopview.

二、頭部欄

1、將頭部欄的標(biāo)題改成“產(chǎn)品介紹”

2、定義返回按鈕id=ret,添加appean.window,publish('2'z'hi*)>向2通道發(fā)送

hi消息，使主頁能接收消息，如果能手常接收消息，那么關(guān)閉六棱柱打開的頁面，返回上一頁。

appean.button("btn-act",furction(){

appean.window.close(-1);

appean.window.publish('2','h?);

})

3、引入my.js文件。目的是監(jiān)聽安卓系統(tǒng)的返回鍵事件，并將my.js文件放

入項目的js文件夾下。<scriptsrc=njs/my.js"x/script>

3.6產(chǎn)品簡介浮動窗口頁面實現(xiàn)過程(product_content.html)

目標(biāo)效果:

AppCanEMM

企業(yè)移動管理平臺

產(chǎn)品體系

實現(xiàn)過程：

一、在body區(qū)域添加一個圖片滑塊slider,然后將圖片滑塊的參數(shù)調(diào)整至如下

狀當(dāng)：

(script〉

appcan.ready(function(){

H；

varslider=appcan.slider({

selector:'ttslider',

aspectRatio:10/6,

hasLabel:true,

index:0

!)；

slider.set([(

img:"css/res/producr.png",

label:"AppCanMEAP感動應(yīng)用開發(fā)平臺“

},(

img:"-ss/r^^/pr：duct.?.png"f

label:"AppCanEMM企業(yè)移動泮理平臺，

}])

slider.on("clickitem",function(index,data)(

})

</script>

二、將上面定義的對應(yīng)圖片放至對應(yīng)的圖片路徑。

三、效果演示。

3.7合作伙伴主窗口頁面實現(xiàn)過程(cooperation.html)

目標(biāo)效果：

實現(xiàn)過程:

一、倉1J建cooperation頁面,選擇帶返回箭頭的空頁面

,?■11中國聯(lián)通令上年11:59@。S9%BD]

<-AppCan

Iamthepopview.

二、頭部欄

1、將頭部欄的標(biāo)題改成“合作伙伴”

2定義返回按鈕id=ret,添加appcan.window,publish(*2*z*hi*),向2通道發(fā)送

hi消息，使主頁能接收消息，如果能正常接收消息，那么關(guān)閉六棱柱打開的頁面，返回上一頁。

appcan.button("#rel"z"btn-act”,function(){

appcan.window.close(-1);

appcan.window.publish('2'z'h');

))

3、引入my.js文件。目的是監(jiān)聽安卓系統(tǒng)的返回鍵事件，并將my.js文件放

入項目的jS文件夾下。<scr,src="js/my.js"X/script>

3.8合作伙伴浮動窗口頁面實現(xiàn)過程(cooperation_content)

目標(biāo)效果:

實現(xiàn)過程:

一、在浮動窗口的body區(qū)域添加浮動窗口要加載的圖片。如下代碼所示：

<bodyclass=,,am-vpbc-bg1*ontouchstart's

<imgclass?,,whlOOMstylew，,height:auto**src?,,css/res/cooperation.png,,/>

</body>

二、由于上面加載圖片時用到了my.css文件中定義的高寬參數(shù)定義(whlOO),因此需要

對my.css文件進(jìn)行引用：<linkrel=",stylesheet"href=Hcss/niy.cssH>

三、將要加載的圖片放至src="css/res/cooperation.png”定義的路徑中。

四、效果演示。

3.9經(jīng)典案例主窗口頁面實現(xiàn)過程(case.html)

目標(biāo)效果：

實現(xiàn)過程:

一、創(chuàng)建case頁面，選擇帶返回箭頭的空頁面

?■中國聯(lián)通臺上午11:59@。59%HD

AppCan

Ianthepopview.

二、頭部欄

1、將頭部欄的標(biāo)題改成“經(jīng)典案例”

2、定乂返回按鈕id=ret,添加appcan.window.publish('2*,,hi*)>向2通道發(fā)送

hi消息，使主頁能接收消息,，如果能正常接收消息，那么關(guān)閉六棱柱打開的頁面，返回上一頁。

appcan.button('^retj'1,"btn-act",function(){

appcan.window.close(-1);

1

appcan.window.publish('/'z'h);

})

3、引入my.js文件。目的是監(jiān)聽安卓系統(tǒng)的返回鍵事件，并將my.js文件放

入項目的js文件夾下°<scriptsrc=njs/my.js"x/script>

3.10經(jīng)典案例浮動窗口頁面實現(xiàn)過程(case_content.html)

目標(biāo)效果:

4A號H38X1D1332|

實現(xiàn)過程:

一、在浮動窗口的body區(qū)域添加浮動窗口要加載的圖片。如下代碼所示：

<bodyclass="im-vpbc-bg'*ontouchstart>

<imgclass=HwhlOOMstyle-Mheiqht:auto"src=ncss/res/case.png"/>

</body>

二、由于上面加載圖片時用到了my.css文件中定義的高寬參數(shù)定義（whlOO）,因此需要

對my.css文件進(jìn)行引用：<linkrel="stylesheet“href=,,css/my.css'*>

三、將要加載的圖片放至src="css/res/case.png"/定義的路徑中。