个人信息页面

个人信界面设计效果

个人信息界面

页面布局

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

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

//设置后解决有边框的问题
 分享 

• 排行榜代码

    //三个金银铜的奖牌图片，使用绝对定位
    
    
    
    //block循环组件：每一个排行榜上的人的信息
    
         
          {{index+1}}
        
        
          
            
          
          
            {{item.nickname}}
            来自：{{item.city}}
          
        
        
           
           {{item.trophy_count}}
        
      
    
 

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