使用微信小程序雲開發制作自己的個人簡歷，簡單高效。
首先需要了解小程序的基本結構以及雲開發模式，及一些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"集合，用於儲存點贊用戶信息，頁面加載前會獲取用戶信息
以上就是小程序版個人簡歷的全部代碼，具體審核流程，參照微信小程序審核文檔(我這一版本的小程序基本秒批，開發完成即可上線)
大家可以根據自己的需求，自由設計簡歷內容，樣式
如果您覺得不錯，請點個收藏，謝謝