微信小程序-简历信息显示

本次主要介绍如何实现简单的个人简历信息的显示，其中主要的也就是图片的显示以及文本信息的布局。功能首先是点击按钮进入简历信息显示的首页，其中显示简历主人的头像和基本信息，然后是点击头像进入下一个界面，显示其他关于简历主人的详细信息。

一、文件准备

首先准备简历信息显示小程序开发需要的文件，包括准备简历头像。这里只是做个示例，所以我从网上随便下载了一张图片作为简历头像。在小程序所属文件夹中新建image文件夹，将简历头像存入该文件夹。然后在pages文件夹中新建resu文件夹和detail文件夹，分别表示简历首页界面和点击头像之后显示的界面，并在两个文件夹中分别新建对应固定的四个文件。如下图所示。

二、显示简历信息小程序的实现

1. 首页界面设计
   首页界面设计过程在resu文件夹中实现，在简历信息显示的首页界面设计之前，首先把简历中需要显示所有信息定义在resu.js的data中，然后在resu.wxml中设计整体界面布局，从上到下，从左到右，依次设置，其中信息的显示直接调用data。具体效果如下图所示。
   以下为resu.js中的代码：

Page({
  data: {
    resu1:{
      name:'张三',
      sex:'女',
      num:'2015111222',
      pro:'计算机科学与技术',
      age:'22',
      nation:'汉族',
      native:'重庆荣昌',
      poli:'党员',
      phone:'111',
      mail:'weew54545',
      birth:'1997.05.03',
      time:'2015.09-2019.06',
      school:'西南交通大学',
      prof:'计算机科学与技术',
      course:'JAVA程序设计，面向对象程序设计，高级语言程序设计，高等数学，线性代数，操作系统，编译原理，计算机组成原理，微机原理与接口技术等',
      exp:[{name:'软件设计实习：八皇后算法设计与实现'},{name:'电子工艺实习：智能插座实现以及电路板设计'},{name:'专业方向工程实习：设计和实现搞笑网站'},{name:'SRTP项目：英语学习APP的实现'}],
    }
  },
  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '/pages/detail/detail'
    })
  }
})

2. 具体信息显示界面设计
   在resu.wxml的图片显示中，为图片添加一个跳转响应函数，使之跳转到具体显示界面，该界面设计在detail文件夹中实现。该界面就比首页要简单一点，因为在设计首页时遇到很多问题，例如设置布局，图片的修正。但是该界面就直接模仿首页的布局就可以了。如下图所示。
   resu.wxml:

  
  
    姓名：{{resu1.name}}\n
    年龄：{{resu1.age}}\n
    学号：{{resu1.num}}\n
    专业：{{resu1.pro}}
  


  基本信息\n
  
    
      生日：{{resu1.birth}}\n
      民族：{{resu1.nation}}\n
      政治面貌：{{resu1.poli}}
    
    
      性别：{{resu1.sex}}\n
      籍贯：{{resu1.native}}\n
      电话：{{resu1.phone}}
    
    
  


  教育背景\n
  
    
      {{resu1.time}}\n
      {{resu1.school}}\n
      {{resu1.prof}}\n
    
    
      主修课程：{{resu1.course}}\n
    
  


  校园经历\n
  
    {{item.name}}
  

resu.wxss

.imagesize{
  display: flex;
}
.imagesize image{
  width:200rpx;
  height: 200rpx;
  border-radius: 50%;
}

detail.js：

Page({
  data: {
    resu1: {
      award: [{ name: '2015-2017年获得三次西南交通大学综合奖学金' }, { name: '2015-2016获得两次兴趣社团优秀部长' }, { name: '通过计算机二级考试' }, { name: '通过四六级考试' }],
      eva: '为人沉稳，心态好，能和身边的人很好相处；学习勤奋，有很强的进取心，做事认真负责，有强烈的团队合作意识；性格开朗，乐观向上，能够吃苦耐劳，对新鲜事物充满好奇心。但有时候缺乏自信，经验不足，希望通过研究生阶段的学习是自己各方面得到提高。'
    }
  },
  //事件处理函数
  
})

detail.wxml：

  


  获奖证书\n
  
    {{item.name}}
  


  个人评价\n
  
    {{resu1.eva}}\n
  

detail.wxss：

.imagesize{
  display: flex;
  align-items: center;
  flex-direction: column;
}
.imagesize image{
  width:200rpx;
  height: 200rpx;
  border-radius: 50%;
  
}

另由于某些view样式是公共的，不用再经过特定的修改，所以我把它放到了app.wxss中，这样就不用在每个文件夹中重复定义相同的布局样式。
app.wxss：

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 
.viewsize2{
  padding: 50rpx 0 0 0;
}
.viewsize{
  display: flex;
  border: 2rpx solid black;
  flex-direction: row;
  justify-content: center;
}
.viewsize1{
  display: flex;
  border: 2rpx solid black;
  flex-direction: column;
  justify-content: center;
}
.textsize{
  padding: 0 50rpx;
}