微信小程序个人信息页面

在微信小程序中我们要显示个人信息的页面，在个人信息页面中我们还需要修改一系列的信息，那么就来看看个人信息的页面该怎么搭建吧，以及获取信息内容。

前台页面wxml的搭建

<!--pages/personal/personal.wxml-->
<view class="container">
   <view class='logo'>
      <view class='return'>返回</view>
      <view class='per'>个人信息</view>
   </view>

   <view class='percontent'>
      <view class='photo'>
         <view class='tphoto'>头像</view>
         <view class="image">
           <image class="tupian" style="width: 150rpx; height: 150rpx;" mode="{{item.mode}}" src="{{src}}"></image>
         </view>
      </view>
      
      <view class='name'>
          <view class='name2'>班级</view>
          <view class='huoqu1'>{{student.classname}}</view>
      </view>

      <view class='sex'>
        <view class='sex2'>姓名</view>
        <view class='huoqu1'>{{student.name}}</view>
      </view>

      <view class='tel'>
        <view class='tel2'>学号</view>
        <view class='huoqu1'>{{student.no}}</view>
      </view>

      <view  class='area'>
        <view class='area2'>系别</view>
        <view class='huoqu1'>{{student.departmentname}}</view>
      </view>

   </view>
</view>

js获取信息内容

 data: {
    src: '../../images/01.jpg',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var student = wx.getStorageSync('student');
    console.log(student);
    this.setData({student: student});
  
  },

在这里还有wcss样式的搭建，wcss样式的搭建是很简单的在这里就不展示代码了!