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

AppCan初級工程師案例手冊AppCan

HybridAppCan

Hybrid開發(fā)技術(shù)，使你一起分享移動互聯(lián)網(wǎng)紅利AppCan初級工程師案例手冊TOC\o"1-3"\h\u項目實戰(zhàn)-六棱柱項目案例 2一、項目案例詳情說明 2二、預(yù)期效果 2三、項目開發(fā)流程 33.1主頁頁面實現(xiàn)過程（Index_content.html） 33.2公司介紹主窗口頁面實現(xiàn)過程（about.html） 73.3公司介紹浮動窗口頁面實現(xiàn)過程（about_content.html） 83.4企業(yè)招聘頁面實現(xiàn)過程（job.html） 93.5產(chǎn)品簡介主窗口頁面實現(xiàn)過程（product.html） 133.6產(chǎn)品簡介浮動窗口頁面實現(xiàn)過程（product_content.html） 143.7合作伙伴主窗口頁面實現(xiàn)過程（cooperation.html） 153.8合作伙伴浮動窗口頁面實現(xiàn)過程（cooperation_content） 163.9經(jīng)典案例主窗口頁面實現(xiàn)過程（case.html） 173.10經(jīng)典案例浮動窗口頁面實現(xiàn)過程（case_content.html） 183.11聯(lián)系我們主窗口頁面實現(xiàn)過程（contact.html） 193.12聯(lián)系我們浮動窗口頁面實現(xiàn)過程（contact_content.html） 20四、項目涉及知識點 20五、注意事項 21項目實戰(zhàn)-六棱柱項目案例一、項目案例詳情說明本項目分為主頁、公司介紹、企業(yè)招聘、產(chǎn)品簡介、合作伙伴、經(jīng)典案例、聯(lián)系我們共七個頁面。其中主頁為六棱柱特效，然后在六棱柱上不同的棱面跳轉(zhuǎn)至不同的頁面。在項目中我們用到了六棱柱特效插件、ajax網(wǎng)絡(luò)請求方法、圖片滑塊控件、選項卡控件、多頁面浮動窗口的加載等技術(shù)手段。二、預(yù)期效果主頁公司介紹企業(yè)招聘產(chǎn)品簡介合作伙伴經(jīng)典案例聯(lián)系我們?nèi)?、項目開發(fā)流程準(zhǔn)備工作搭建IDE開發(fā)環(huán)境（企業(yè)版或大眾版均可）；如果使用的大眾版IDE，需要提前在官網(wǎng)注冊一個賬號，用來在線打包創(chuàng)建項目。然后同步到IDE中去。如果使用企業(yè)版IDE，需要部署好自己的私有打包服務(wù)器，然后在打包服務(wù)器中創(chuàng)建應(yīng)用同步到企業(yè)版的IDE中。3.1主頁頁面實現(xiàn)過程（Index_content.html）目標(biāo)效果：此頁面為六棱柱效果，可以左右翻轉(zhuǎn)。每個頁面可以點擊進入別的頁面。UI實現(xiàn)過程：本頁面的ui實現(xiàn)沒有布局，直接使用js實現(xiàn)的六棱柱特效。JS實現(xiàn)過程：一、在appcan.ready中執(zhí)行appcan.window.subscribe用法和執(zhí)行showPic()函數(shù)：appcan.ready(function(){appcan.window.subscribe('2',function(msg){//alert(msg);if(msg=='hi'){uexHexagonal.close();showPic();}});showPic();})二、定義showPic()函數(shù)：functionshowPic(){varjsonstr={"value":[{"pic":"res://1.png","text":"公司簡介"},{"pic":"res://2.png","text":"企業(yè)招聘"},{"pic":"res://3.png","text":"產(chǎn)品簡介"},{"pic":"res://4.png","text":"合作伙伴"},{"pic":"res://5.png","text":"經(jīng)典案例"},{"pic":"res://6.png","text":"聯(lián)系我們"}]};varjsonstr2={"value":[{"pic":"res://a1.png","text":"公司簡介"},{"pic":"res://a2.png","text":"企業(yè)招聘"},{"pic":"res://a3.png","text":"產(chǎn)品簡介"},{"pic":"res://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=="iOS"){uexHexagonal.setPrismParam(JSON.stringify(jsonstr));}else{uexHexagonal.setPrismParam(JSON.stringify(jsonstr2));}//uexHexagonal.setPrismParam(JSON.stringify(jsonstr));uexHexagonal.open(0,0,w,h);uexHexagonal.onItemClick=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.window.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.html"});break;default:appcan.window.open({name:"contact",data:"contact.html"});}}}三、在和css與js平級的目錄處創(chuàng)建wgtRes文件夾，用于存放六棱柱中需要加載的圖片。并將準(zhǔn)備好的圖片放至該文件夾下。如下圖：注意：在定義圖片路徑的時候，直接寫："pic":"res://1.png"即可，無需寫："pic":"wgtRes://1.png"。具體可參考文檔中心：/index.html?templateId=301四、插件上傳由于要實現(xiàn)六棱柱特效效果，我們在程序中調(diào)用立方體旋轉(zhuǎn)效果的方法，所以需要對應(yīng)的插件進行支持。因此要在IDE中對插件進行上傳。上傳方式如下圖：五、本地或在線打包進行效果測試。3.2公司介紹主窗口頁面實現(xiàn)過程（about.html）目標(biāo)效果：實現(xiàn)過程：一、創(chuàng)建about頁面（選擇“帶返回按鈕”的簡潔布局+空模板）二、頭部信息修改：頭部欄文字修改成“企業(yè)簡介”三、引入my.js文件。目的是監(jiān)聽安卓系統(tǒng)的返回鍵事件，并將my.js文件放入項目的js文件夾下。<scriptsrc="js/my.js"></script>3.3公司介紹浮動窗口頁面實現(xiàn)過程（about_content.html）目標(biāo)效果：實現(xiàn)過程：一、在body區(qū)域定義一個div用來存放圖片和文字：<bodyclass="um-vpbc-bgwh100bg_fff"ontouchstart><divclass="ub-img1aboutwh100"><divid="company"style="line-height:1.8em;text-indent:2em;padding:1em1em01em;"></div></div></body>二、創(chuàng)建一個my.css文件，并在my.css文件中定義上面div中用到的參數(shù)：.about{background-image:url(res/about.png);}.wh100{height:100%;width:100%;}.bg_fff{background-color:#fff;}.bg_g{background-color:#D9F1F6;}注意：別忘記引用my.css文件：<linkrel="stylesheet"href="css/my.css">將about.png圖片放到css/res路徑下面。三、在appcan.ready中添加數(shù)據(jù)獲取方式（使用appcan.request.ajax）<script>appcan.ready(function(){vardataUrl=":8082/xm2/OD7";appcan.window.openToast("數(shù)據(jù)加載中","5000","5","0");appcan.request.ajax({type:"get",url:dataUrl,dataType:"json",success:function(data){appcan.window.closeToast();$("#company").text(data.data[1].Comp_pro);},error:function(e){alert("數(shù)據(jù)請求失敗"+e);}});});</script>四、定義返回按鈕id，添加appcan.window.publish('2','hi')，向2通道發(fā)送hi消息，使主頁能接收消息，如果能正常接收消息，那么關(guān)閉六棱柱打開的頁面，返回上一頁。appcan.button("#ret","btn-act",function(){appcan.window.close(-1);appcan.window.publish('2','hi');})五、效果預(yù)覽。需在本地或在線打包才能正常演示。3.4企業(yè)招聘頁面實現(xiàn)過程（job.html）目標(biāo)效果：實現(xiàn)過程：一、創(chuàng)建job頁面，選擇帶返回箭頭的空頁面二、頭部欄1、將頭部欄的標(biāo)題改成“企業(yè)招聘”1、定義返回按鈕id=ret，添加appcan.window.publish('2','hi')，向2通道發(fā)送hi消息，使主頁能接收消息，如果能正常接收消息，那么關(guān)閉六棱柱打開的頁面，返回上一頁。appcan.button("#ret","btn-act",function(){appcan.window.close(-1);appcan.window.publish('2','hi');})2、在<!--header結(jié)束-->的位置添加一個選項卡（tabview），該選項卡分為五個選項，并調(diào)整至符合需求的狀態(tài)：<!--header結(jié)束--><divid="tabview"class="ufsc-bg"></div>根據(jù)需求，按照如下參數(shù)對選項卡的js框架進行調(diào)整：vartabview=appcan.tab({selector:"#tabview",hasIcon:false,hasAnim:true,hasLabel:true,hasBadge:false,data:[{label:"javascript","icon":"fa-qq"},{label:"java","icon":"fa-windows"},{label:"實施工程","icon":"fa-weixin",badge:1},{label:"前端開發(fā)","icon":"fa-weixin",badge:1},{label:"UI設(shè)計","icon":"fa-weixin",badge:1}]});3、對頭部欄進行加高，使選項卡屬于頭部欄的一部分：appcan.ready(function(){vartitHeight=$('#header').offset().height+$('#tabview').offset().height;4、在appcan.ready中添加打開多頁面浮動窗口的方法：appcan.ready(function(){appcan.frame.open({id:"content",url:[{inPageName:"p1",inUrl:"job_js_content.html"},{inPageName:"p2",inUrl:"job_java_content.html"},{inPageName:"p3",inUrl:"job_ss_content.html"},{inPageName:"p4",inUrl:"job_web_content.html"},{inPageName:"p5",inUrl:"job_ui_content.html"}],left:0,top:titHeight,index:0,change:function(err,res){tabview.moveTo(res.multiPopSelectedIndex);}});window.onorientationchange=window.onresize=function(){appcan.frame.resize("content",0,titHeight);}});4、在tabview.on-click中

設(shè)置多頁面浮動窗口跳轉(zhuǎn)到的子頁面窗口的索引。判斷我們所選擇的選項卡：tabview.on("click",function(obj,index){appcan.window.selectMultiPopover("content",index);})三、浮動窗口加載1、分別創(chuàng)建主窗口要加載的5個浮動窗口（job_js、job_java、job_ss、job_web、job_ui），刪除主窗口，只保留這些頁面的浮動窗口。選擇空模板即可。如下圖：四、分別對5個浮動窗口（job_js、job_java、job_ss、job_web、job_ui）進行內(nèi)容的加載。以job_js_conten.html浮動窗口為例：1、在浮動窗口的body區(qū)域添加浮動窗口要加載的圖片。如下代碼所示：<bodyclass="um-vpbc-bg"ontouchstart><imgclass="wh100"style="height:auto"src="css/res/Js_job.png"/></body>2、由于上面加載圖片時用到了my.css文件中定義的高寬參數(shù)定義（wh100），因此需要對my.css文件進行引用：<linkrel="stylesheet"href="css/my.css">3、將要加載的圖片放至src="css/res/Js_job.png"定義的路徑中。4、引入my.js文件。目的是監(jiān)聽安卓系統(tǒng)的返回鍵事件，并將my.js文件放入項目的js文件夾下。<scriptsrc="js/my.js"></script>5、效果預(yù)覽。其他窗口實現(xiàn)的方式一樣（略）3.5產(chǎn)品簡介主窗口頁面實現(xiàn)過程（product.html）目標(biāo)效果：實現(xiàn)過程：一、創(chuàng)建product頁面，選擇帶返回箭頭的空頁面二、頭部欄1、將頭部欄的標(biāo)題改成“產(chǎn)品介紹”2、定義返回按鈕id=ret，添加appcan.window.publish('2','hi')，向2通道發(fā)送hi消息，使主頁能接收消息，如果能正常接收消息，那么關(guān)閉六棱柱打開的頁面，返回上一頁。appcan.button("#ret","btn-act",function(){appcan.window.close(-1);appcan.window.publish('2','hi');})3、引入my.js文件。目的是監(jiān)聽安卓系統(tǒng)的返回鍵事件，并將my.js文件放入項目的js文件夾下。<scriptsrc="js/my.js"></script>3.6產(chǎn)品簡介浮動窗口頁面實現(xiàn)過程（product_content.html）目標(biāo)效果：實現(xiàn)過程：一、在body區(qū)域添加一個圖片滑塊slider，然后將圖片滑塊的參數(shù)調(diào)整至如下狀態(tài)：<script>appcan.ready(function(){});varslider=appcan.slider({selector:'#slider',aspectRatio:10/6,hasLabel:true,index:0});slider.set([{img:"css/res/product.png",label:"AppCanMEAP移動應(yīng)用開發(fā)平臺"},{img:"css/res/product2.png",label:"AppCanEMM企業(yè)移動管理平臺"}])slider.on("clickItem",function(index,data){})</script>將上面定義的對應(yīng)圖片放至對應(yīng)的圖片路徑。效果演示。3.7合作伙伴主窗口頁面實現(xiàn)過程（cooperation.html）目標(biāo)效果：實現(xiàn)過程：一、創(chuàng)建cooperation頁面，選擇帶返回箭頭的空頁面二、頭部欄1、將頭部欄的標(biāo)題改成“合作伙伴”2、定義返回按鈕id=ret，添加appcan.window.publish('2','hi')，向2通道發(fā)送hi消息，使主頁能接收消息，如果能正常接收消息，那么關(guān)閉六棱柱打開的頁面，返回上一頁。appcan.button("#ret","btn-act",function(){appcan.window.close(-1);appcan.window.publish('2','hi');})3、引入my.js文件。目的是監(jiān)聽安卓系統(tǒng)的返回鍵事件，并將my.js文件放入項目的js文件夾下。<scriptsrc="js/my.js"></script>3.8合作伙伴浮動窗口頁面實現(xiàn)過程（cooperation_content）目標(biāo)效果：實現(xiàn)過程：一、在浮動窗口的body區(qū)域添加浮動窗口要加載的圖片。如下代碼所示：<bodyclass="um-vpbc-bg"ontouchstart><imgclass="wh100"style="height:auto"src="css/res/cooperation.png"/></body>二、由于上面加載圖片時用到了my.css文件中定義的高寬參數(shù)定義（wh100），因此需要對my.css文件進行引用：<linkrel="stylesheet"href="css/my.css">三、將要加載的圖片放至src="css/res/cooperation.png"定義的路徑中。四、效果演示。3.9經(jīng)典案例主窗口頁面實現(xiàn)過程（case.html）目標(biāo)效果：實現(xiàn)過程：一、創(chuàng)建case頁面，選擇帶返回箭頭的空頁面二、頭部欄1、將頭部欄的標(biāo)題改成“經(jīng)典案例”2、定義返回按鈕id=ret，添加appcan.window.publish('2','hi')，向2通道發(fā)送hi消息，使主頁能接收消息，如果能正常接收消息，那么關(guān)閉六棱柱打開的頁面，返回上一頁。appcan.button("#ret","btn-act",function(){appcan.window.close(-1);appcan.window.publish('2','hi');})3、引入my.js文件。目的是監(jiān)聽安卓系統(tǒng)的返回鍵事件，并將my.js文件放入項目的js文件夾下。<scriptsrc="js/my.js"></script>3.10經(jīng)典案例浮動窗口頁面實現(xiàn)過程（case_content.html）目標(biāo)效果：實現(xiàn)過程：一、在浮動窗口的body區(qū)域添加浮動窗口要加載的圖片。如下代碼所示：<bodyclass="um-vpbc-bg"ontouchstart><imgclass="wh100"style="height:auto"src="css/res/case.png"/></body>二、由于上面加載圖片時用到了my.css文件中定義的高寬參數(shù)定義（wh100），因此需要對my.css文件進行