个人简历小程序(附源码)

使用微信小程序云开发制作自己的个人简历，简单高效。

首先需要了解小程序的基本结构以及云开发模式，及一些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

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 = skillListdata.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.userInfolet 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"集合，用于储存点赞用户信息，页面加载前会获取用户信息

以上就是小程序版个人简历的全部代码，具体审核流程，参照微信小程序审核文档(我这一版本的小程序基本秒批，开发完成即可上线)

大家可以根据自己的需求，自由设计简历内容，样式

如果您觉得不错，请点个推荐，谢谢
欢迎转载，请标明原处，TuiHo

个人简历小程序(附源码)相关推荐

关于美团:零基础搭建获利的美团饿了么优惠券CPS小程序附源码
关于美团:零基础搭建获利的美团饿了么优惠券CPS小程序附源码下面是无裂变版本的搭建教程. 源码地址:http://y.mybei.cn 部署步骤部署后台,填资料登录后台 http://q.myb ...
手把手教你搭建美团饿了么电影票外卖cps小程序附源码
手把手教你搭建美团饿了么电影票外卖cps小程序附源码外卖红包项目的优势 1.刚需:吃饭是每日刚需,尤其是城市白领,上班族,宅男宅女,等群体点外卖的需求,需求更是高频率(每天). 2.门槛低:平台门 ...
零基础搭建获利的美团饿了么优惠券CPS小程序(附源码)
1.先上图 2.前言某天下午,我正在公司认真的写着代码,突然我的手机弹了一个通知,我赶紧抓起手机看看(给自己一个摸鱼的理由) 让我看看到底是谁发消息打扰我认真的工作啊. 害,原来是某个群转发了一个外 ...
拟物风格的小程序附源码
1. 前言对于拟物风格这种UI研究良久,这里把我收集到的一些好用的组件.UI.源码发出来供大家使用.我个人也开源了一款拟物风格的小程序,欢迎借鉴. 各个风格简介 Material Design,物料 ...
Tkinter超市收银小程序(附源码)，看完这一篇你还不会Tkinter吗，快来试试吧
Tkinter超市收银小程序引言超市收银小程序,一个小例子快速上手Tkiner使用,虽然最近有好多实验报告要写,但是我还是给大家写一个小例子,之前就用C.C++,java.特别是C#最好用,做过图 ...
个人简历小程序前端源码
简介: 这是前几周前看到的不错的一款小程序的个人简历,看到一款高端.大气.上档次的小程序前端,于是分享学习下! 不需要其他后台域名,前端自行修改简历信息即可上线此版本微信端运行没问题,QQ端自行测试 ...
Python程序打包成.exe文件（弹窗恶搞小程序附源码）
0.先来张效果图: 1.安装pyinsatller 打开命令行窗口,输入如下指令:pip3 install pyinstaller 我的已经安装过,所以这样显示. 2.使用pyinstaller打包P ...
微信小程序实例源码大全demo下载
怎么本地测试微信小程序实例源码 1.下载源码 2.打开微信开发者工具 3.添加项目->选择本项目目录->编译执行微信小程序实例源码大全微信小程序游戏类demo:识色:从相似颜色中挑选不 ...
小程序源码整理最新的学习小程序的源码清单包含前后台
微信小程序疯狂猜成语小程序源码UI美观知识答题类小程序源码 200多套微信小程序源码带后台+教程+源码校园小情书小程序前端+后端源码微信版flappybird小游戏源码下载,经典像素鸟小游戏源码 ...
实用微信小程序项目源码
微信小程序疯狂猜成语小程序源码UI美观知识答题类小程序源码 200多套微信小程序源码带后台+教程+源码校园小情书小程序前端+后端源码微信版flappybird小游戏源码下载,经典像素鸟小游戏源码 ...

个人简历小程序(附源码)

个人简历小程序(附源码)

代码如下：

index.json

index.wxml

index.wxss

index.js

注意

个人简历小程序(附源码)相关推荐

最新文章

热门文章