微信小程序制作个人简历
使用微信小程序云开发制作自己的个人简历,简单高效。
首先需要了解小程序的基本结构以及云开发模式,及一些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"集合,用于储存点赞用户信息,页面加载前会获取用户信息
以上就是小程序版个人简历的全部代码,具体审核流程,参照微信小程序审核文档(我这一版本的小程序基本秒批,开发完成即可上线)
大家可以根据自己的需求,自由设计简历内容,样式
如果您觉得不错,请点个收藏,谢谢
微信小程序制作个人简历的更多相关文章
- 微信小程序制作家庭记账本之一
制作的第一天,思索着制作手机端APP还是微信小程序,首先是想到制作APP但是各种收费让我不得不换一条路,所以开始制作小程序,下载了微信小程序开发工具,试着学习制作方法,但是似乎没有成效,但我坚信要一步 ...
- 微信小程序框架分析小练手(二)——天气微信小程序制作
简单的天气微信小程序. 一.首先,打开微信开发者工具,新建一个项目:weather.如下图: 二.进入app.json中,修改导航栏标题为“贵州天气网”. 三.进入index.wxml,进行当天天气情 ...
- 微信小程序制作日常生活首页
1.手机上效果预览 不知道为啥上传后是如此的高糊画质(手机画质很好) 微信小程序日常生活首页手机效果演示 2.开发者工具效果图 3.真机调试 4.项目的目录结构 5.核心代码 5.1 app.json ...
- 微信小程序-制作简易豆瓣笔记
demo截图: 图书: 电影: 共工欲善其事,必先利其器: 小程序编辑器下载地址 : https://mp.weixin.qq.com/debug/wxadoc/dev/dev ...
- 微信小程序制作家庭记账本之五
第五天,开发进度没有进行,不知道该如何下手完成小程序的开发.
- 如何使用微信小程序制作banner轮播图?
在前端工程师的工作中,banner是必不可少的,那缺少了DOM的小程序是如何实现banner图的呢?如同其他的框架封装了不同的banner图的方法,小程序也封装了banner的方法,来让我一一道来: ...
- 微信小程序制作家庭记账本之七
最后一天,程序完成的仍然不是很好,作品很简陋,不过还是可以记账的,没有购买域名,别人无法使用,下次我会完成的更好.
- 微信小程序制作家庭记账本之二
第二天,继续学习制作记账本,网上搜寻别人的源码进行学习,但是搜寻过程中总是能看到github这个东西,不清楚这是什么东西,明天继续努力吧.
- 微信小程序制作下来菜单
wxml: <view class="phone_one" bindtap="clickPerson"> <view class=" ...
随机推荐
- CF906D Power Tower
扩展欧拉定理 CF906D Power Tower 洛谷交的第二个黑题 题意 给出一个序列\(w-1,w_2,\cdots,w_n\),以及\(q\)个询问 每个询问给出\(l,r\),求: \[w_ ...
- css实现水平垂直居中的几种方式
梳理下平时常用css水平垂直居中方式- 使用flex布局 HTML <div class="box"> <div class="child"& ...
- 9) drf JWT 认证 签发与校验token 多方式登陆 自定义认证规则反爬 admin密文显示
一 .认证方法比较 1.认证规则图 django 前后端不分离 csrf认证 drf 前后端分离 禁用csrf 2. 认证规则演变图 数据库session认证:低效 缓存认证:高效 jwt认证:高效 ...
- Linux之《荒岛余生》(一)准备篇
xin片之争,已经暴露了中国xin的问题,我等码农束手无策:而在操作系统方面,成果也是乏善可陈:现如今酷炫的Web监控工具,让很多研发丧失了真正处理问题的能力. 越接近底层,就越接近真相,在计算机的世 ...
- H - Food HDU - 4292 网络流
题目 You, a part-time dining service worker in your college’s dining hall, are now confused with a n ...
- java线程池原理解析
五一假期大雄看了一本<java并发编程艺术>,了解了线程池的基本工作流程,竟然发现线程池工作原理和互联网公司运作模式十分相似. 线程池处理流程 原理解析 互联网公司与线程池的关系 这里用一 ...
- SpringCloudStream学习(一)RabbitMQ基础
应公司大佬要求,学习一下SpringCloudStream,作为技术储备.这几天也看了这方面的资料,现在写一篇笔记,以做总结.文章会从RabbitMQ基础讲起,到SpringCloudStream结束 ...
- python 矢量数据转栅格数据
from osgeo import gdal,osr,ogr#定义投影sr = osr.SpatialReference('LOCAL_CS["arbitrary"]')#在内存中 ...
- 小程序-for循环遍历的使用
.js文件: Page({ /** * 页面的初始数据 */ data: { datas:[ { title: '提交申请', txt: '选择服务类型,填写基本信息,提交' }, { title: ...
- [hdu3507 Print Article]斜率优化dp入门
题意:需要打印n个正整数,1个数要么单独打印要么和前面一个数一起打印,1次打印1组数的代价为这组数的和的平方加上常数M.求最小代价. 思路:如果令dp[i]为打印前i个数的最小代价,那么有 dp[i] ...