personal頁(yè)面實(shí)現(xiàn)過(guò)程

personal頁(yè)面實(shí)現(xiàn)過(guò)程目標(biāo)效果：功能描述：實(shí)現(xiàn)過(guò)程：一、創(chuàng)建personal頁(yè)面（使用模板：簡(jiǎn)潔布局+列表）生成personal.html和personal_content.html●主窗口二、去掉模板中header里的內(nèi)容，留下起布局定位的代碼（1）、UI布局<!--header開(kāi)始--><divid="header"class="uhbc-text-headubbc-head"></div><!--header結(jié)束--><!--content開(kāi)始--><divid="content"class="ub-f1tx-l"></div><!--content結(jié)束-->●內(nèi)容窗口使用如下打開(kāi)浮動(dòng)窗口的方式加載personal_content.html中的數(shù)據(jù)appcan.ready(function(){appcan.frame.open("content","personal_content.html",0,titHeight);（1）UI布局<divclass="c-gra1uinn-a1ubbc-headyy_ulev-2yy_h"><divclass="ub-f1ubub-verub-acub-pc"id="login"><divclass="yy_uwh-set3pos_reub"><divclass="yy_uwh-set3uc-a-set3ub-imgsetImg1"id='touxiang'></div></div><divclass="umar-at1"id="userName">點(diǎn)擊頭像登錄</div></div></div><!--下面功能--><divclass="ubub-verub-f1yy_ulev-1"><divid="listview"class="ubtbc-borderyy_sc-bg"></div><divid="listview1"class="ubtbc-borderyy_sc-bgyy_umar-t"></div></div>（2）、引入自定義css文件，并在該文件中做如下定義.yy_uwh-set3{width:4.25em;height:4.25em;}.yy_umar-t{margin-top:2.8em;}.yy_ulev-2{font-size:0.9em!important;}.yy_h{height:9.75em;}.yy_sc-bg{background-color:#FFFFFF;}.yy_ulev-1{font-size:0.843em!important;}（3）、列表控件（lisetview）所需圖片見(jiàn)附件，按照需求給列表控件賦值varlv=appcan.listview({selector:"#listview",type:"thinLine",hasIcon:true,hasAngle:true,hasSubTitle:false,multiLine:1,});lv.set([{title:"我的帖子",icon:"./css/res/wdtz.png",subTitle:"12:05",id:"1"},{title:"編輯信息",icon:"./css/res/wdzp.png",subTitle:"12:05",id:"2"},{title:"我的訂單",icon:"./css/res/wdjl.png",subTitle:"12:05",id:"3"}])lv.on("click",function(ele,obj,curEle){islog=appcan.locStorage.val('islog');//登錄成功的標(biāo)示if(islog=='1'){if(obj.title=='我的帖子'){appcan.window.open({name:'myPost',data:'myPost.html',aniId:'10'})appcan.locStorage.setVal('userID',uID);//從登錄頁(yè)獲取的用戶ID，傳給‘我的帖子’頁(yè)面}elseif(obj.title=='編輯信息'){appcan.window.open({name:'updateMsg',data:'updateMsg.html',aniId:'10'})appcan.locStorage.setVal('name',name);//將要修改的用戶信息傳給修改頁(yè)面appcan.locStorage.setVal('userID',uID);appcan.locStorage.setVal('photo',photo);}}else{appcan.window.openToast('您未登錄','2000','5',0);}})varlv1=appcan.listview({selector:"#listview1",type:"thinLine",hasIcon:true,hasAngle:true,hasSubTitle:false,multiLine:1,});lv1.set([{title:"返回主頁(yè)",icon:"./css/res/ls.png",subTitle:"12:05",id:"1"},{title:"退出登錄",icon:"./css/res/sz.png",subTitle:"12:05",id:"2"}])lv1.on("click",function(ele,obj,curEle){islog=appcan.locStorage.val('islog');if(obj.title=='退出登錄'){if(islog=='1'){appcan.locStorage.remove();//清除緩存$('#userName').text('點(diǎn)擊頭像登錄');photo='5590ee892636b6e31f560d1f';login_data=mbaasURL+photo;$("#touxiang").css("background-image","url('"+login_data+"')!important");}else{appcan.window.openToast('您還未登錄！','2000','5','0');}}elseif(obj.title=='返回主頁(yè)'){appcan.window.open({name:'index',data:'house_index.html'})}})（4）、點(diǎn)擊頭像，打開(kāi)登錄頁(yè)appcan.button("#login","ani-act",function(){appcan.window.open({name:'login',data:'login.html',aniId:'10'});appcan.locStorage.setVal('yemian','personal');//登錄頁(yè)面做標(biāo)示用});（5）、登錄成功后將登錄狀態(tài)以及用戶信息取回到個(gè)人中心頁(yè)，在appcan.ready方法里取值mbaasURL='/11430401/public/1/files/';//圖片文件存放地址//取登錄狀態(tài)appcan.window.subscribe('islog',function(msg){appcan.locStorage.setVal('islog',msg);})//取用戶信息appcan.window.subscribe('login',function(msg){uID=JSON.parse(msg)[0].id;name=JSON.parse(msg)[0].userName;photo=JSON.parse(msg)[0].photo;if(!isDefine(photo)){photo='5590ee892636b6e31f560d1f';//如果數(shù)據(jù)庫(kù)中頭像ID為空，就賦一個(gè)默認(rèn)頭像}else{photo=photo;//從數(shù)據(jù)庫(kù)中讀取過(guò)來(lái)的頭像}varlogin_data=mbaasURL+photo;//登錄成功后，顯示用戶名稱(chēng)及頭像$('#userName').text(name);$("#touxiang").css("background-image","url('"+login_data+"')!important");（6）、如果是在發(fā)布房源和預(yù)定房源時(shí)登錄了，回到個(gè)人中心時(shí)應(yīng)顯示該用戶信息，appcan.ready方法里寫(xiě)如下代碼//從發(fā)布房源和預(yù)定房源頁(yè)傳過(guò)來(lái)的if(appcan.locStorage.val('yemian')=='house'){name=appcan.locStorage.val('userName');uID=appcan.locStorage.val('userId');photo=appcan.locStorage.val('photo');if(!isDefine(photo)){photo='5590ee8