




版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
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. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 【安全员-B证】模拟试题及答案
- 2024计算机二级考试现场实操题试题及答案
- 现代物流服务体系的构建试题及答案
- 黑龙江省双鸭山市2024-2025学年三年级数学第二学期期末调研试题含解析
- 黑龙江省哈尔滨市重点中学2025届高三3月高考适应性调研考试生物试题试卷含解析
- 黑龙江省大兴安岭漠河县高中2024-2025学年高三校内模拟考试历史试题试卷含解析
- 黑龙江省绥化市重点中学2025届高三适应性考试(二)数学试题含解析
- 电子商务定价策略与竞争分析试题及答案
- 黔东南南苗族侗族自治州凯里市2024-2025学年数学五下期末学业水平测试试题含答案
- 黔南民族医学高等专科学校《社会艺术培训管理》2023-2024学年第一学期期末试卷
- 2023年江苏省中学生生物学竞赛(奥赛)初赛试题和答案
- 2020年(汽车行业)汽车行业英文缩写
- 舞蹈素质测试表
- DB15T 1417-2018 胶粉改性沥青及混合料设计与施工规范
- 基于核心素养导向的初中数学试题命制策略与实例课件
- 城市环境卫生工作物资消耗定额
- 学校卫生监督课件
- 物理人教版(2019)必修第二册5.2运动的合成与分解(共19张ppt)
- 中国航信离港系统讲义
- 6000m3内浮顶油罐设计
- 食堂管理考核评分表
评论
0/150
提交评论