《AppCan初级工程师学员实训标准化操作手册》

AppCan.cn

-站关移动开发服务平台

AppCan初级工程师

案例手册

AppCanHybrid开发技术，使你一起分享移动互联网红利

o

项目实战-大板柱项目案例...............................................1

一、项目案例详情说明..............................................1

二、预期效果......................................................2

三、项目开发流程..................................................2

3.1主页页面实现过程(Index_content.html)..........................................3

3.2公司介绍主窗口页面实现过程(about.html)...................................7

3.3公司介绍浮动窗口页面实现过程(about_content.html)..................7

3.4企业招聘页面实现过程(job.html)...................................................9

3.5产品简介主窗口页面实现过程(producl.hlml)..............................13

3.6产品简介浮动窗口页面实现过程(product_content.html)............14

3.7合作伙伴主窗口页面实现过程(co叩eration.html).......................15

3.8合作伙伴浮动窗口页面实现过程(cooperation_content)..............16

3.9经典案例主窗口页面实现过程(case.html)...................................16

3.10经典案例浮动窗口页面实现过程(case_content.html)................17

3.11联系我们主窗口页面实现过程(contact.htmD..............................18

3.12联系我们浮动窗口页面实现过程(conlacl_conlenl.html)...........19

四、项目涉及知识点...............................................20

五、注意事项.....................................................20

项目实战•大棱柱项目案例

一、项目案例详情说明

本项目分为主页、公司介绍、企业招聘、产品简介、合作伙伴、经典案例、联系我们共

七个页面。其中主页为六棱柱特效，然后在六棱柱上不同的棱面跳转至不同的页面。在项目

中我们用到了六棱柱特效插件、ajax网络请求方法、图片滑块控件、选项卡控件、多页面浮

动窗口的加载等技术手段，

预期效果

Lt，■■黄零■*，zu±

«KIfTM

2.•QOKMK尹》・,AppCanEMM

工・•»••（京怆rtt/cWicnM企业修◎管理平台

4.。峪乂*，.­*，・•”

产品体系

S.Mr«x>|Vlz-a&

主页公司介绍企业招聘产品简介

合作伙伴经典案例联系我们

三、项目开发流程

准备工作

搭建工DE开发环境（企业版或大众版均可）；如果使用的大众版工DE,需要提前在官

网注册一个账号，用来在线打包创建项目。然后同步到IDE中去。如果使用企业版IDE,

需要部署好自己的私有打包服务器，然后在打包服务器中创建应用同步到企业版的IDE中。

"text":"企业招聘”

(

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

“text"：“产品简介”

),(

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

"text":"合作伙伴”

},(

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

"text":“经典案例”

},(

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

“text"："联系我们”

))

}；

varjsonstr2={

"value":[{

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

"text":"公司筒介”

},(

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

"text":"企业招聘”

},(

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

"text":"产品简介”

),(

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

"text":“合作伙伴”

},(

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

"text":“经典案例”

},(

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

"text":"联系我们”

!)

}；

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平级的目录处创建wgtRes文件夹，用于存放六棱柱中需要加

载的图片。并将准备好的图片放至该文件夹下。如下图：

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对应跖径(反中•/—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/氏

四、插件上传

由于要实现六棱柱特效效果，我们在程序中调用立方体旋转效果的方法，所以需要对应的插

件进行支持。因此要在工DE中对插件进行上传。上传方式如下图：

五、本地或在线打包进行效果测试。

3.2公司介绍主窗口页面实现过程(about.html)

目标效果:

；H!O号•GM56%”1653

<ikikiwn-

正慕视北京闻授有*公司，成立于2010年.«

期编出州中关村.在上舞、广州、黜1、就州、■

庆.反汉.西er南京等地均设有分公小刈沙,正

a无皿下■曹b内■大的稀动欣用开发率g

AppCanai,在移动授术与痔的互联同应用方面有■漫

修的技术底anc丰的项目买加、.星专注于为软件

开发育和企事业■仗.建供■前能海动皿瞰木与企

业梃xa电化・懒联方EH3UF技术企业.

实现过程:

一、创建about页面(选择“带返回按钮”的简洁布局+空模板)

二、头部信息修改：头部栏文字修改成“企业简介”

三、引入my.js文件。目的是监听安卓系统的返回键事件，并将my.js文件放入

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

3.3公司介绍浮动窗口页面实现过程(about_content.html)

目标效果:

Q够与at■心体算女方Mfi»au时的:企*.

实现过程:

一、在body区域定义一个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>

二、创建一个my.css文件，并在my.css文件中定义上面div中用到的参数:

.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中添力口数据获取方式(使用appcan.request.ajax)

<script>

appcan.ready(function(){

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

appcan.window.openToast("数据力「我中“，“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(”数据请求失败"+e);

}

))；

));

</script>

四、定义返回按钮id,添加appcan.window.publish('2*z'hi'),向2通道发送hi消息,

使主页能接收消息，如果能正常接收消息、，那么关闭六棱柱打开的页面，返回上一页。

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

appcan.window.close(-1);

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

})

五、效果预览。需在本地或在线打包才能正常演示。

3.4企业招聘页面实现过程(job.html)

目标效果:

O48Mpp9:16

JavaScript联:件开发工程建

1.计算相关专业大专以上学历.2年以上

相关工作锂脸：

2、RiflJavascnptJFXiBM:

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

■开发工作：

4.«|通SQL语句，熟思Kt据库的“本操作;

5,熟悉nodejs、linux者优先：

实现过程:

一、创建job页面，选择带返回箭头的空页面

,•■11中国联通令上年11:59@。S9%BD]

<-AppCan

二、头部栏

1、将头部栏的标题改成“企业招聘”

1定义返回按钮id二ret,添加appcan.window,publish('2,,*hi1),向2通道发送

hi消息，使主页能接收消息，如果能正常接收消息，那么关闭六棱柱打开的页面，返回上一页。

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

appcan.window.close(-1);

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

})

2、在＜!—header结束—＞的位置添加一个选项卡(tabview),该选项卡分为五个

选项，并调整至符合需求的状态：

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

根据需求，按照如下参数对选项卡的js框架进行调整：

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:"前局开发”，

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

badge:1

},(

label:归设M”,

"icon"^'fa-weixin",

badge:1

}]

!)；

3、对头部栏进行加高，使选项卡属于头部栏的一部分:

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中设置多页面浮动窗口跳转到的子页面窗口的索引。判断我们

所选择的选项卡：

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

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

})

三、浮动窗口加载

1、分别创建主窗口要加载的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)进

行内容的加载。以jobjs_conten.html浮动窗口为例：

1、在浮动窗口的body区域添加浮动窗口要加载的图片。如下代码所示：

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

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

</body>

2、由于上面加载图片时用到了my.css文件中定义的高宽参数定义(whlOO),因此需

要对mycss文件进行引用：<linkrel=*'stylesheet"href=,,css/my.css'*>

3、将要加载的图片放至src="css/res/Js_job.png”定义的路径中。

4、引入my.js文件。目的是监听安卓系统的返回键事件，并将my.js文件放

入项目的js文件夹下。〈scriptsrc=njs/my.js"x/script>

5、效果预览。其他窗口实现的方式一样(略)

3.5产品简介主窗口页面实现过程(product.html)

目标效果：

AppCanEMM

企业移动管理平台

产品体系

实现过程:

一、创建product页面，选择带返回箭头的空页而

・,H中8）联通令上午11:59@。$9%・D

AppCan

1umthepopview.

二、头部栏

1、将头部栏的标题改成“产品介绍”

2、定义返回按钮id=ret,添加appean.window,publish('2'z'hi*)>向2通道发送

hi消息，使主页能接收消息，如果能手常接收消息，那么关闭六棱柱打开的页面，返回上一页。

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

appean.window.close(-1);

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

})

3、引入my.js文件。目的是监听安卓系统的返回键事件，并将my.js文件放

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

3.6产品简介浮动窗口页面实现过程(product_content.html)

目标效果:

AppCanEMM

企业移动管理平台

产品体系

实现过程：

一、在body区域添加一个图片滑块slider,然后将图片滑块的参数调整至如下

状当：

(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感动应用开发平台“

},(

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

label:"AppCanEMM企业移动泮理平台，

}])

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

})

</script>

二、将上面定义的对应图片放至对应的图片路径。

三、效果演示。

3.7合作伙伴主窗口页面实现过程(cooperation.html)

目标效果：

实现过程:

一、仓1J建cooperation页面,选择带返回箭头的空页面

,•■11中国联通令上年11:59@。S9%BD]

<-AppCan

Iamthepopview.

二、头部栏

1、将头部栏的标题改成“合作伙伴”

2定义返回按钮id=ret,添加appcan.window,publish(*2*z*hi*),向2通道发送

hi消息，使主页能接收消息，如果能正常接收消息，那么关闭六棱柱打开的页面，返回上一页。

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

appcan.window.close(-1);

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

))

3、引入my.js文件。目的是监听安卓系统的返回键事件，并将my.js文件放

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

3.8合作伙伴浮动窗口页面实现过程(cooperation_content)

目标效果:

实现过程:

一、在浮动窗口的body区域添加浮动窗口要加载的图片。如下代码所示：

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

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

</body>

二、由于上面加载图片时用到了my.css文件中定义的高宽参数定义(whlOO),因此需要

对my.css文件进行引用：<linkrel=",stylesheet"href=Hcss/niy.cssH>

三、将要加载的图片放至src="css/res/cooperation.png”定义的路径中。

四、效果演示。

3.9经典案例主窗口页面实现过程(case.html)

目标效果：

实现过程:

一、创建case页面，选择带返回箭头的空页面

・■中国联通台上午11:59@。59%HD

AppCan

Ianthepopview.

二、头部栏

1、将头部栏的标题改成“经典案例”

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

hi消息，使主页能接收消息,，如果能正常接收消息，那么关闭六棱柱打开的页面，返回上一页。

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

appcan.window.close(-1);

1

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

})

3、引入my.js文件。目的是监听安卓系统的返回键事件，并将my.js文件放

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

3.10经典案例浮动窗口页面实现过程(case_content.html)

目标效果:

4A号H38X1D1332|

实现过程:

一、在浮动窗口的body区域添加浮动窗口要加载的图片。如下代码所示：

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

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

</body>

二、由于上面加载图片时用到了my.css文件中定义的高宽参数定义（whlOO）,因此需要

对my.css文件进行引用：<linkrel="stylesheet“href=,,css/my.css'*>

三、将要加载的图片放至src="css/res/case.png"/定义的路径中。