个人信界面设计效果

个人信息界面

页面布局

页面布局相较于登录界面更复杂，不适合所有元素使用绝对定位，由于小程序自带有chrome的内核，所以不用对不同浏览器进行适配，适用flex布局：http://www.runoob.com/w3cnote/flex-grammar.html

• 遇到的样式问题：
  由于分享api需要通过按钮的open-type=share入口进入所以右上角的分享需要是按钮组件，但是当背景设置为透明和边框为0px后仍然会有细小的边框出现：
  
  细小的边框
  
  解决这个问题的方法是在wxml中对button增加plain属性为true，并设置无边框样式：

//设置后解决有边框的问题
 <button open-type='share' plain='true' style="border:none">分享 </button>

• 排行榜代码

<scroll-view scroll-y='true' class='ranklistviewall'>
    //三个金银铜的奖牌图片，使用绝对定位
    <image class="ranknumiconimg goldicon" src='../../images/anwser/gold_medal@2x.png'></image>
    <image class="ranknumiconimg silvericon" src='../../images/anwser/silver_medal@2x.png'></image>
    <image class="ranknumiconimg bronzeicon" src='../../images/anwser/bronze_medal@2x.png'></image>
    //block循环组件：每一个排行榜上的人的信息
    <block wx:for="{{ranklist}}" wx:key='{{index}}'>
         <view class='ranklistview' >
          <view class='ranknum' >{{index+1}}
        </view>
        <view class='rankuserinfo'>
          <view class='rankavatar'>
            <image src="{{item.avatar}}"></image>
          </view>
          <view class='ranktext'>
            <view class='ranknickname'>{{item.nickname}}</view>
            <view class='rankcomefrom'>来自：{{item.city}}</view>
          </view>
        </view>
        <view class='cupnum'>
           <image class="cupicon" src='../../images/anwser/cup_icon.png'></image>
           <text>{{item.trophy_count}}</text>
        </view>
      </view>
    </block>
 </scroll-view>

因为屏幕大小有限，所以使用scroll-view的滚动view。
{{ranklist}}是一个数组，每一个元素是排行榜上的人的排名及其详细信息。
<block>通过wx:for=属性遍历得到多个view，这是在小程序开发中遇到的很便利的一点：不用通过JS拼接html代码。