微信小程序：个人页面/我的页面/资料页面

1.首先做好页面设计与规划，划出区域。一开始可以用background-color再加上border，这样可以方便你看自己设计的页面是否符合预期。

2.用的是flex布局，其中可以给lfex设置权重，如A样式中flex:1，B样式中flex:3，而A和B都是一个父模板C的子模块，那么再弹性布局当中，A就占四分之一，B占四分之三。

最后-wxss中的补充知识：

        font-family:楷体，就可以把字体设置成楷体

        border-radius:100%，就可以把该模块设置成圆形。常用于图片

效果图

 

three.js

// pages/my/my.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
  
      listmenus:["心情","爱好","状态","收藏"],
      fimg:"../images/a9.jpg",
      person:{"name":"嘉然","sname":"门头沟学院","sphone":"嘉然今天ac了几道"}
    },
  
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
  
    },
  
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
  
    },
  
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
  
    },
  
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
  
    },
  
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
  
    }
  })

three.json

{
  "usingComponents": {}
}

three.wxml

<!--pages/my/my.wxml-->
<view  class="myview">
    <view  class="mytopview">
       <view  class="imgview">
             <view  class="fview">
               <image src="{{fimg}}"  class="cimg"></image>
             </view>
       </view>
       <view  class="infoview">
           <view class="box">姓名:{{person.name}}</view>
           <view class="box">学校:{{person.sname}}</view>
           <view class="box">签名:{{person.sphone}}</view>
        </view>
    </view>
    <view  class="mylistview">
        <block  wx:for="{{listmenus}}">
          <view  class="listview">
              <view  class="txtview">{{item}}</view>
          </view>
        </block>
    </view>
</view>

three.wxss

/* pages/my/my.wxss */
.myview{
  width: 100%;
  height: 100vh;
  background-color:skyblue;
}
.mytopview{
  width: 100%;
  height: 30%;
  border-bottom: 3px  solid snow;
  display: flex;
}
.mylistview{
  width: 100%;
  height: 70%;

}
.listview{
  width: 100%;
  height: 12%;
  border-bottom: 2px  solid  snow;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.txtview{
  color: white;
  letter-spacing: 1px;
  font-family: 楷体;
}
.imgview{
  flex:1;
 
  display: flex;
  align-items: center;
}
.infoview{
  flex:3;
  /**border:1px  solid  black;**/
  display: flex;
  flex-direction: column;
  align-items: center;
 
}
.fview{
  width: 80px;
  height: 80px;
  border-radius: 100%;
 
}
.cimg{
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.box{
  width: 100%;
  height: 25%;
  border-bottom: 1px  solid  snow;
  display: flex;
  align-items: center;
  margin-left: 20px;
  color:white;
  font-family: 楷体;

}