微信小程式製作個人簡歷

使用微信小程式雲開發製作自己的個人簡歷，簡單高效。

首先需要了解小程式的基本結構以及雲開發模式，及一些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

Black Friday Flash Sale

(2021/9/14~)

1 Core CPU

1 GB Ram

20 GB SSD

1年只要 USD$5 up!!!

Tips: Offer 10 分鐘更新一次

QNews

Exit mobile version