《AppCan初级工程师学员实训标准化操作手册》_第1页
《AppCan初级工程师学员实训标准化操作手册》_第2页
《AppCan初级工程师学员实训标准化操作手册》_第3页
《AppCan初级工程师学员实训标准化操作手册》_第4页
《AppCan初级工程师学员实训标准化操作手册》_第5页
已阅读5页,还剩15页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

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"/定义的路径中。

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论