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

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

一、文件准备

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

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

首页界面设计
首页界面设计过程在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'})}
})

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


<view class="imagesize" ><image src="/image/cat.jpg" class='in-image'      bindtap="bindViewTap"></image><view ><text class='textsize'>姓名：{{resu1.name}}\n</text><text class='textsize'>年龄：{{resu1.age}}\n</text><text class='textsize'>学号：{{resu1.num}}\n</text><text class='textsize'>专业：{{resu1.pro}}</text></view>
</view>
<view class='viewsize2'><text>基本信息\n</text><view class='viewsize'><view><text class='textsize'>生日：{{resu1.birth}}\n</text><text class='textsize'>民族：{{resu1.nation}}\n</text><text class='textsize'>政治面貌：{{resu1.poli}}</text></view><view><text class='textsize'>性别：{{resu1.sex}}\n</text><text class='textsize'>籍贯：{{resu1.native}}\n</text><text class='textsize'>电话：{{resu1.phone}}</text></view></view>
</view>
<view class='viewsize2'><text >教育背景\n</text><view class='viewsize1'><view><text class='textsize'>{{resu1.time}}\n</text><text class='textsize'>{{resu1.school}}\n</text><text class='textsize'>{{resu1.prof}}\n</text></view><view><text class='textsize'>主修课程：{{resu1.course}}\n</text></view></view>
</view>
<view class='viewsize2'><text >校园经历\n</text><view class='viewsize1'><view wx:for="{{resu1.exp}}">{{item.name}}</view></view>
</view>

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：

<view class="imagesize" ><image src="/image/cat.jpg"></image>
</view>
<view class='viewsize2'><text >获奖证书\n</text><view class='viewsize1'><view wx:for="{{resu1.award}}">{{item.name}}</view></view>
</view>
<view class='viewsize2'><text >个人评价\n</text><view class='viewsize1'><text>{{resu1.eva}}\n</text></view>
</view>

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;
}

微信小程序-简历信息显示相关推荐

精美的微信小程序简历让面试官一目了然
微信小程序简历前言哈喽!你好! 这里是微信小程序 - 林锦浩的简历项目传送门欢迎小星星
2022-01-13 微信小程序-简历小项目(一) 小程序中的flex布局,简历首页的制作,箭头区域的制作
文章目录一.准备 1.目标 2.小程序中的flex布局回顾flex布局小程序中要把div换成view标签,别的不变二.制作简历小程序-首页 1.利用小程序提供的独有的API来初始化高和宽小程 ...
前端求职系列：如何写一份小程序简历（二）
前言在之前前端求职系列:如何写一份好的简历(一),我们清楚了如何写一份好的简历.那么当我们不满足于纸质简历想实现一个线上的简历如何实现呢?今天给大家带来一个微信小程序简历. 一.项目展示说明因为 ...
（下）开发一款微信小程序的个性简历，能打开大厂之门并获得门票？（附源码）
回顾阅读本文之前,可以先看看上一篇分享的内容,主要讲微信小程序的由来,它的特点及产品优势,行业应用,开发语言,运行环境,开发前的准备工作等等. 本项目是基于微信小程序原生框架,常用原生组件及官方AP ...
“个人简历”微信小程序+源码
"个人简历"微信小程序+源码运行工具:微信web开发者工具源码链接: https://download.csdn.net/download/qq_38275941/108816 ...
2小时教会你用微信小程序做高端大气的简历，后带发布上线教程---面试宝典
前言: 本文章教你如何用微信小程序开发简历,使HR和面试官耳目一新~ 学习要求:懂得基本的Css语法,Js语法,Flex页面布局,以及拥有一个自己注册好的微信小程序开发者号 . 后面会有如何发布的教程 ...
微信小程序个人简历界面（编辑版）
微信小程序个人简历界面.可编辑修改(包含全部源码) 1.微信小程序实现简单的个人简历界面,包含基本信息.教育背景.获奖证书.兴趣爱好等,简历信息支持修改编辑内容. 2.通过此文章,希望能带给更多学习微 ...
微信小程序：wxml中增加wxs脚本实现手机号/身份证等隐私信息显示
在js中,我们需要将手机号带星号显示是很容易的事情,只需要调用字符串截断与拼接就可以了:但是,在wxml中,我们如何处理呢? 微信小程序开发框架中有一个wxs,就是为了解决类似问题的,只需要在wmxl ...
微信小程序版个人博客及简历---面试加分
WeChatMiniProgram-Blog 微信小程序初体验微信小程序版的个人博客及简历说明: 本项目为小程序入门项目,需要一定的前端基础及一点后端知识,项目可能不太好,欢迎大家吐槽,纯萌新小白 ...

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

一、文件准备

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

微信小程序-简历信息显示相关推荐

最新文章

热门文章