个人页面布局

1.对应代码

2.json

{"navigationBarTitleText":"个人中心"}

3.wxss在此页面中编写css样式通过.XXX{属性}来表示

*pages/mine/mine.wxss*/.userinfo{display:flex;flex-direction:column;align-items:center;background:#FFD161;width:100%;height:300rpx;}.userinfo-btn{margin-top:50rpx;background:none!important;color:#fff!important;font-size:40rpx;}.account-bg{width:100%;height:150rpx;}.userinfo-avatar{width:108rpx;height:108rpx;margin:40rpx;border-radius:50%;}.userinfo-nickname{color:#fff;}/*订单*/.order{display:flex;flex-direction:row;align-items:center;width:100%;height:90rpx;}.myorder-text{font-size:34rpx;color:gray;margin:20rpx;width:40%;}.myorderlook-text{font-size:32rpx;color:gray;position:relative;right:20rpx;width:60%;text-align:right;}.next-image{width:20rpx;height:25rpx;position:relative;right:10rpx;}.navs{display:flex;}.nav-item{width:25%;display:flex;align-items:center;flex-direction:column;padding:20rpx;}.nav-item.nav-image{width:55rpx;height:55rpx;margin:5rpx;}.nav-itemtext{margin-top:20rpx;font-size:28rpx;color:gray;}/*列表*/.person-list{display:flex;flex-direction:column;align-items:left;}.list-item{display:flex;flex-direction:row;align-items:center;height:80rpx;}.item-image{width:40rpx;height:40rpx;margin:20rpx;}.item-text{color:gray;font-size:30rpx;margin-left:20rpx;}.person-line{width:80%;height:2rpx;background:lightgray;margin-left:90rpx;}

4.wxml在标签中通过class=“XXX”来引用上方css样式通过for-item{{XXX}}的形式来引用js中的内容

viewclass="userinfo"buttonwx:if="{{!hasUserInfocanIUse}}"open-type="getUserInfo"bindgetuserinfo="getUserInfo"class="userinfo-btn"点击微信授权/buttonblockwx:elseimagebindtap="bindViewTap"class="userinfo-avatar"src="{{userInfo.avatarUrl}}"background-size="cover"/imagetextclass="userinfo-nickname"{{userInfo.nickName}}/text/block/viewviewclass="separate"/viewviewclass="order"catchtap="toOrder"textclass="myorder-text"我的订单/texttextclass="myorderlook-text"查看全部订单/text/viewviewclass="line"/viewviewclass="navs"blockwx:for-items="{{orderItems}}"wx:key="name"viewclass="nav-item"catchtap="toOrder"data-type="{{item.name}}"data-typeid="{{item.typeId}}"imagesrc="{{item.imageurl}}"class="nav-image"/text{{item.name}}/text/view/block/viewviewclass="separate"/viewviewclass="person-list"viewclass="list-item"imageclass="item-image"src="../../images/person/personal_card.png"/imagetextclass="item-text"优惠券/text/viewviewclass="person-line"/viewviewclass="list-item"imageclass="item-image"src="../../images/person/personal_favorite.png"/imagetextclass="item-text"我的收藏/text/viewviewclass="person-line"/viewviewclass="list-item"imageclass="item-image"src="../../images/person/personal_site.png"/imagetextclass="item-text"bindtap="myAddress"收货地址/text/viewviewclass="person-line"/viewviewclass="list-item"imageclass="item-image"src="../../images/person/personal_sale_record.png"/imagetextclass="item-text"售后记录/text/viewviewclass="person-line"/viewviewclass="list-item"imageclass="item-image"src="../../images/person/personal_evaluated.png"/imagetextclass="item-text"我的评价/text/viewviewclass="person-line"/viewviewclass="list-item"imageclass="item-image"src="../../images/person/personal_customer.png"/imagetextclass="item-text"在线客服/text/view/viewviewclass="separate"/view

5.jsdata中有wxml引用的内容之外还有绑定的点击事件，获取用户信息等功能

//pages/mine/mine.jsvarapp=getApp()Page({data:{userInfo:{},hasUserInfo:false,canIUse:wx.canIUse('button.open-type.getUserInfo'),orderItems:[{typeId:0,name:'待付款',url:'bill',imageurl:'../../images/person/personal_pay.png',},{typeId:1,name:'待收货',url:'bill',imageurl:'../../images/person/personal_receipt.png',},{typeId:2,name:'待评价',url:'bill',imageurl:'../../images/person/personal_comment.png'},{typeId:3,name:'退换/售后',url:'bill',imageurl:'../../images/person/personal_service.png'}],},//事件处理函数toOrder:function(){wx.navigateTo({url:'../order/order'})},onLoad:function(){if(app.globalData.userInfo){this.setData({userInfo:app.globalData.userInfo,hasUserInfo:true})}elseif(this.data.canIUse){//由于getUserInfo是网络请求，可能会在Page.onLoad之后才返回//所以此处加入callback以防止这种情况app.userInfoReadyCallback=res={this.setData({userInfo:res.userInfo,hasUserInfo:true})}}else{//在没有open-type=getUserInfo版本的兼容处理wx.getUserInfo({success:res={app.globalData.userInfo=res.userInfothis.setData({userInfo:res.userInfo,hasUserInfo:true})}})}},getUserInfo:function(e){console.log(e)app.globalData.userInfo=e.detail.userInfothis.setData({userInfo:e.detail.userInfo,hasUserInfo:true})},myAddress:function(e){wx.navigateTo({url:'../addressList/addressList'});}})

6.带你一步一步实现商城微信小程序（四）​​​​​​​