使用微信小程序云开发制作自己的个人简历，简单高效。
首先需要了解小程序的基本结构以及云开发模式，及一些css样式基础。
使用小程序云数据库、vant组件库实现简历内容。
最终效果如下：
首先申请个人微信小程序，具体流程参照官方。
代码如下：
index.json
{
"usingComponents": {
//引入vant组件
"van-progress": "@vant/weapp/progress/index",
"van-divider": "@vant/weapp/divider",
"van-tag": "@vant/weapp/tag/index",
"van-collapse": "@vant/weapp/collapse/index",
"van-collapse-item": "@vant/weapp/collapse-item/index",
"van-panel": "@vant/weapp/panel/index",
"van-toast": "@vant/weapp/toast/index"
}
}
index.wxml
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}">
<!-- 第一个页面 -->
<swiper-item>
<image class='background' src="../../images/user.jpg" mode="aspectFill"></image>
<view class="myMsg">
<view class="name">
<text>陶</text>
<text>威</text>
<text>宏</text>
</view>
<view class="myText">
我的简历
<image class="rightImg" src="../../images/right.png"></image>
</view>
</view>
<!-- 走马灯 -->
<swiper class="swiperUser" indicator-dots="{{indicatorDotsUser}}" autoplay="{{autoplayUser}}" interval="{{intervalUser}}" duration="{{durationUser}}" vertical="{{verticalUser}}" circular="{{circularUser}}" display-multiple-items="{{2}}">
<block wx:for="{{userlist}}" wx:key="index">
<swiper-item class="swiperItemUser">
<view class="swiperItemUserMsg">
<image class="userImg" src="{{item.userImg}}"></image>
<view class="zanWord">{{item.name}}刚刚赞了你一下</view>
</view>
</swiper-item>
</block>
</swiper>
<view class="myJob">
<view>PHP程序员</view>
<text class="jobYear">4年项目经验</text>
<button class="zanBtn" wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
<image class="zanImg" src="../../images/zan.png"></image>
<block>点个赞吧</block>
</button>
<van-toast id="van-toast" />
</view>
<!-- 第二个页面 -->
</swiper-item>
<swiper-item>
<van-divider contentPosition="left" customStyle="font-size: 30px;color:#8eaadb;border-color:#8eaadb;margin-bottom:20px;">基本资料</van-divider>
<view class="myData">
<view>姓名：陶威宏</view>
<view>年龄：27</view>
</view>
<view class="myData">
<view>电话：176****6021</view>
<view>性别：男</view>
</view>
<view class="myData">邮箱：44298****@qq.com</view>
<view class="myData marginBottom">地址：北京市朝阳区**（6号线）</view>
<van-divider contentPosition="left" customStyle="font-size: 30px;color:#8eaadb;border-color:#8eaadb;">主要技能</van-divider>
<view class="mainSkill">
<view class="skillItems">
HTML+CSS+JavaScript
</view>
<van-progress percentage="50" stroke-width="8" color="#f2826a" show-pivot="{{indicatorDots}}" />
<view class="skillItems">
PHP+MySql+Linux+Nginx
</view>
<van-progress percentage="75" stroke-width="8" color="#ee0a24" show-pivot="{{indicatorDots}}" />
<view class="skillItems">
Redis+Memcached
</view>
<van-progress percentage="65" stroke-width="8" color="#f2826a" show-pivot="{{indicatorDots}}" />
</view>
<view class="skillList">
<view class="tabIcon" wx:for="{{skillList}}" wx:key="index">
<van-tag plain size="{{item.size}}" type="{{item.type}}" bindtap="vanMax" data-id="{{index}}">{{item.name}}
</van-tag>
</view>
</view>
</swiper-item>
<!-- 第三个页面 -->
<swiper-item>
<van-divider contentPosition="left" customStyle="font-size: 30px;color:#8eaadb;border-color:#8eaadb;margin-bottom:20px;">工作经历</van-divider>
<van-panel title="北京****科技有限公司" desc="2016.05-2019.07" status="PHP开发">
<view class="conText">
<text>北京****科技有限公司是一家以鲜农产品为主的互联网电商公司，公司产业主要有鲜肉类、农产品类、及自营酒业，以社区经营模式进行线上销售、公司自主研发社区类游戏、自营电商及其他互联网项目累计用户30万。工作期间参与研发自营电商、线上游戏两大项目。
</text>
</view>
</van-panel>
<van-panel title="北京**网络科技有限公司" desc="2019.07-2020.05" status="PHP开发">
<view class="conText">
<text>北京**网络科技有限公司是一家创业型公司，主要业务以CPS广告模式推广，研发合成类小游戏，网络众包任务平台。公司成立蜘初加入，参与公司项目设计、项目搭建、及开发上线，项目迭代。
</text>
</view>
</van-panel>
</swiper-item>
<!-- 第四个页面 -->
<swiper-item>
<van-divider contentPosition="left" customStyle="font-size: 30px;color:#8eaadb;border-color:#8eaadb;margin-bottom:20px;">项目经验</van-divider>
<van-collapse value="{{ activeName }}" bind:change="onChange" accordion>
<van-collapse-item title="**星球App" name="1">
该项目是娱海网络公司自主研发App游戏，通过第三方cpm广告模式盈利，内置网络众包平台，用户可完成他人发布任务获取游戏积分。该项目由创业之初全程参与设计、项目搭建，使用Laravel框架开发，微信登录，公众号认证，微信企业付款到零钱、阿里企业付款，主要负责用户师徒体系、宠物商店、活跃任务、企业付款，众包平台模块。
</van-collapse-item>
<van-collapse-item title="**易购App" name="2">
该项目是大道农联公司自营电商项目，内置淘宝、京东、拼多多等主流电商优惠券返利模式，同时搭建自营商品，主要负责淘宝客返利佣金结算，自营商城搭建，商品sku系统及商城活动。
</van-collapse-item>
<van-collapse-item title="***H5" name="3">
该项目是大道农联公司自行研发的H5游戏，模拟宠物合成、宠物交易等虚拟宠物市场，内容丰富，玩法多样。使用Laravel框架开发，Laravel-admin搭建后台管理系统，后台使用echars图表数据分析，支付方式使用微信支付。主要负责用户个人中心、仓库管理、消息通知、微信付款、交易走势及模拟微信拼手气红包，不定期游戏活动。
</van-collapse-item>
<van-collapse-item title="**商城" name="4">
该项目是大道农联公司第一版商城，使用ThinkPHP搭建，商城内置分销系统、会员返利机制。此项目前后端、数据库及后台均独立开发完成，业务大致分用户系统、订单流程、邀请机制，奖励机制等模块。使用第三方短信验证登录、七牛上传、phpExcel导出，第三方银行卡支付。
</van-collapse-item>
</van-collapse>
</swiper-item>
</swiper>
index.wxss
page {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #ffffff;
}
swiper {
display: block;
height: 100%;
}
.swiper-img {
width: 100%;
height: 100%;
}
/* 第一屏 */
.background {
width: 100%;
height: 100%;
position: fixed;
background-size: 100% 100%;
z-index: -1;
}
.myMsg{
display: flex;
align-items: flex-start;
justify-content: space-between;
padding:30rpx 20rpx 0 80rpx;
box-sizing: border-box;
}
.name{
font-size: 70rpx;
font-family: 'Times New Roman', Times, serif;
font-weight: 600;
color:#666666;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.myText{
display: flex;
align-items: center;
justify-content: end;
font-size:40rpx;
color:#1f1c1c;
margin-top:30rpx;
}
.rightImg{
width:40rpx;
height:40rpx;
margin-left:10rpx;
}
.myJob{
position: fixed;
bottom:100rpx;
left:0;
right:0;
background:rgba(0,0,0,0.3);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 70rpx;
color:#ffffff;
padding:30rpx 0;
box-sizing: border-box;
}
.jobYear{
font-size: 40rpx;
margin-top:10rpx;
}
/* 第二屏 */
.myData{
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 100rpx 0 40rpx;
box-sizing: border-box;
margin-bottom: 10rpx;
}
.marginBottom{
margin-bottom: 40rpx;
}
.mainSkill{
padding:0 40rpx;
box-sizing: border-box;
}
.skillItems{
padding:40rpx 10rpx 20rpx 10rpx;
box-sizing: border-box;
}
.skillList{
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
padding: 50rpx 40rpx;
box-sizing: border-box;
}
.tabIcon{
margin-right:20rpx;
margin-bottom:20rpx;
}
.van-tag--large{
font-size: 50rpx !important;
}
.van-tag--medium {
font-size: 30rpx !important;
}
.conText{
font-size: 30rpx;
color: #666666b2;
padding: 50rpx 30rpx;
box-sizing: border-box;
text-indent: 2em;
text-align: justify;
}
.swiperUser{
width:100%;
height:170rpx;
margin-top:30rpx;
}
.swiperItemUser{
width:auto !important;
padding:0 30rpx 0 0;
}
.swiperItemUserMsg{
/* height:100rpx; */
display: flex;
align-items: center;
margin-bottom:10rpx;
margin-left:10rpx;
padding:0 30rpx 0 0;
background:rgba(0,0,0,0.3);
border-radius:100rpx;
}
.userImg{
width:70rpx;
height:70rpx;
border-radius: 50%;
margin-right:10rpx;
}
.zanBtn{
display: flex;
align-items: center;
justify-content: center;
font-size: 36rpx;
font-weight: 600;
color:rgba(67, 5, 5, 0.851);
margin-top:10rpx;
}
.zanImg{
width:46rpx;
height:46rpx;
margin-right:10rpx;
}
index.js
// pages/index/jinali.js
import Toast from '@vant/weapp/toast/toast';
//标签数组
const skillList = [
{name:"PHP",type:"danger",size:"large"},
{name:"Redis",type:"primary",size:"medium"},
{name:"MySql",type:"success",size:"medium"},
{name:"缓存",type:"primary",size:"medium"},
{name:"分布锁",type:"danger",size:"medium"},
{name:"Laravel",type:"success",size:"medium"},
{name:"ThinkPHP",type:"danger",size:"medium"},
{name:"支付",type:"primary",size:"medium"},
{name:"后台",type:"warning",size:"medium"},
{name:"Laravel-admin",type:"danger",size:"medium"},
{name:"LNMP",type:"success",size:"medium"},
];
const db = wx.cloud.database();
Page({
/**
* 页面的初始数据
*/
data: {
// 全屏swiper 配置
indicatorDots: false,
autoplay: false,
// 走马灯swiper配置
indicatorDotsUser:false,//不要swiper点
autoplayUser:true,//自动切换
intervalUser:5000,//自动切换时长
durationUser:1000,//滑动时长
verticalUser:true,//滑动方向 纵向
circularUser:true,//采用衔接滑动
skillList:skillList,
activeName:'1',
canIUse: wx.canIUse('button.open-type.getUserInfo'),
userlist:[]
},
//切换标签放大效果
vanMax:function(event){
console.log("v")
let id = event.target.dataset.id;
let data = skillList
data.forEach(Element => {
console.log(Element);
Element.size = "medium"
});
data[id].size = "large"
this.setData({
skillList:data
}) },
//vant组件
onChange(event) {
this.setData({
activeName: event.detail,
});
},
//点赞记录用户信息，更新弹幕列表
bindGetUserInfo (e) {
let userInfo = e.detail.userInfo
let addData = {
name:userInfo.nickName,
userImg:userInfo.avatarUrl
}
db.collection('userInfo').add({
data: {
name:userInfo.nickName,
userImg:userInfo.avatarUrl
},
success:res =>{
console.log(res)
Toast.success('点赞成功！');
this.setData({
userlist:this.data.userlist.concat(addData)
})
},
fail: err =>{
console.log(res);
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//获取点赞用户
db.collection('userInfo').field({
name:true,
userImg:true
}).get().then( res =>{
console.log(res)
this.setData({
userlist:res.data
})
}).catch( err =>{
console.log(err)
})
}, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log(this.data.userlist);
// this.getUserInfo()
}, /**
* 生命周期函数--监听页面显示
*/
onShow: function () { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function () { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function () { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function () { }
})
注意需在小程序云数据库中，添加"userInfo"集合，用于储存点赞用户信息，页面加载前会获取用户信息
以上就是小程序版个人简历的全部代码，具体审核流程，参照微信小程序审核文档(我这一版本的小程序基本秒批，开发完成即可上线)
大家可以根据自己的需求，*设计简历内容，样式
如果您觉得不错，请点个收藏，谢谢