微信小程序制作个人简历

2020 年 5 月 25 日
笔记
个人简历, 小程序

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

首先需要了解小程序的基本结构以及云开发模式，及一些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”集合，用于储存点赞用户信息，页面加载前会获取用户信息

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

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

如果您觉得不错，请点个收藏，谢谢

Tags: 个人简历小程序

微信小程序制作个人简历

VirMach 便宜 VPS

QNews

微信小程序制作个人简历

分享此文：

Related Posts

跟我读论文丨Multi-Model Text Recognition Network

安卓快速关机APP

c# 优化代码的一些规则——优先隐式类型[一]

go语言依赖注入实现

VirMach 便宜 VPS

QNews

热门搜寻