在微信小程式中我們要顯示個人資訊的頁面，在個人資訊頁面中我們還需要修改一系列的資訊，那麼就來看看個人資訊的頁面該怎麼搭建吧，以及獲取資訊內容。

前臺頁面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});
  
  },