personal页面实现过程

personal页面实现过程目标效果：功能描述：实现过程：一、创建personal页面（使用模板：简洁布局+列表）生成personal.html和personal_content.html●主窗口二、去掉模板中header里的内容，留下起布局定位的代码（1）、UI布局<!--header开始--><divid="header"class="uhbc-text-headubbc-head"></div><!--header结束--><!--content开始--><divid="content"class="ub-f1tx-l"></div><!--content结束-->●内容窗口使用如下打开浮动窗口的方式加载personal_content.html中的数据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">点击头像登录</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）所需图片见附件，按照需求给列表控件赋值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');//登录成功的标示if(islog=='1'){if(obj.title=='我的帖子'){appcan.window.open({name:'myPost',data:'myPost.html',aniId:'10'})appcan.locStorage.setVal('userID',uID);//从登录页获取的用户ID，传给‘我的帖子’页面}elseif(obj.title=='编辑信息'){appcan.window.open({name:'updateMsg',data:'updateMsg.html',aniId:'10'})appcan.locStorage.setVal('name',name);//将要修改的用户信息传给修改页面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:"返回主页",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('点击头像登录');photo='5590ee892636b6e31f560d1f';login_data=mbaasURL+photo;$("#touxiang").css("background-image","url('"+login_data+"')!important");}else{appcan.window.openToast('您还未登录！','2000','5','0');}}elseif(obj.title=='返回主页'){appcan.window.open({name:'index',data:'house_index.html'})}})（4）、点击头像，打开登录页appcan.button("#login","ani-act",function(){appcan.window.open({name:'login',data:'login.html',aniId:'10'});appcan.locStorage.setVal('yemian','personal');//登录页面做标示用});（5）、登录成功后将登录状态以及用户信息取回到个人中心页，在appcan.ready方法里取值mbaasURL='/11430401/public/1/files/';//图片文件存放地址//取登录状态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';//如果数据库中头像ID为空，就赋一个默认头像}else{photo=photo;//从数据库中读取过来的头像}varlogin_data=mbaasURL+photo;//登录成功后，显示用户名称及头像$('#userName').text(name);$("#touxiang").css("background-image","url('"+login_data+"')!important");（6）、如果是在发布房源和预定房源时登录了，回到个人中心时应显示该用户信息，appcan.ready方法里写如下代码//从发布房源和预定房源页传过来的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