（下）開發一款微信小程序的個性簡歷，能打開大廠之門並得到門票？（附源碼）

時間 2020-07-11

標籤開發一款微信程序個性簡歷打開大廠之門得到門票源碼简体版

原文原文鏈接

回顧

閱讀本文以前，能夠先看看上一篇分享的內容，主要講微信小程序的由來，它的特色及產品優點，行業應用，開發語言，運行環境，開發前的準備工做等等。css

本項目是基於微信小程序原生框架，經常使用原生組件及官方API接口實現的小程序版個性簡歷，並引入炫酷的ColorUI組件庫，展示不同的精彩畫面。html

先來線上體驗一把，上小程序碼以下：前端

若是能幫助到你們，也請點個👍和❤️收藏，您的讚美是做者繼續寫做的動力。後續會輸出更多優質技術博文，與你們一塊兒共同分享。好了，如今開始動手實操吧。css3

開發前的準備工做上一篇已經介紹，不熟悉的能夠先去看看，這裏就再也不細講。git

新建項目

打開微信開發者工具，選擇小程序進入，點選新建項目，按上面提示填寫，特別是獲取AppID直接去小程序後臺-開發-開發設置，找到AppID複製粘貼便可。另外一種方式，點選測試號獲取AppID，如圖所示：github

再點擊又下角建立按鈕，進入開發者界面，如圖所示：web

點擊右上角詳情進行基本信息 - 本地設置 - 勾選不校驗合法域名、web-view業務域名等，如圖所示：面試

瞭解了微信開發者界面的基本組成（含菜單欄、工具欄、模擬器、目錄結構-資源管理器、編輯器、調試器等等），接下來分析一下小程序個性簡歷的項目需求。json

需求分析

對於求職者來講，準備一份優秀的我的簡歷是必不可少。估計經歷過找工做的小夥伴，都有體會，要準備一大堆簡歷，進行海量投遞（有點誇張，哈哈），然而一大部分簡歷已石沉大海。雖然打印費很少，就是感受紙質有點浪費，也不節能環保。忽然有個想法，微信這麼火，可否開發一款屬於本身的H5移動端個性簡歷，在微信頁面瀏覽，但體驗很差，還受限制。因而能不能考慮用微信小程序製做開發我的簡歷，徹底接近原生體驗，上手快，在參考小程序官方文檔進行開發（有必定前端基礎，會一些html+css+js開發經驗，更容易學以至用）。公司面試不用帶簡歷（有些公司會直接提供），備有神器直接出示小程序碼或搜小程序，瞬間感受高大上，再加上炫酷個性簡歷風格，彷佛比普通求職者更勝一籌。不只展示技能亮點之一，還能得到面試官的好感和關注。小程序

功能設計

與普通程序猿簡歷同樣，但要更加簡潔明瞭，簡歷上要重點突出我的優點及亮點，特別是工做經驗的描述（或實習經驗，我的項目經驗）。小程序項目頁面包括：歡迎頁（啓動頁）、基本信息、工做經驗（項目介紹）、專業技能、技術博客（文章列表、文章詳情）。

* 啓動頁

做爲簡歷封面，加點炫酷的CSS3動畫效果。

* 基本信息

邊框陰影形式展示三部分：我的資料（姓名、職位、性別、年齡、工做年限、聯繫方式）、教育背景、自我評價。

* 工做經驗

時間軸形式展示，描述跟您應聘職位相關的工做經歷及成功項目（有完整項目經歷更好）。

* 專業技能

多彩進度條展示，熟練技能程度按百分比劃分，善於研究學習先後端技能，並對源碼解讀及分析有獨到看法的均可以寫上。

* 技術博客

若有我的博客能體現本身對技術的認識、熱愛、總結、分享，是一種很好的習慣。還在github上有發佈過本身的開源項目，或者貢獻太小組件和小工具等等，再加上擁有必定數量star，就更不用說了（同行都點讚了）。若是能在CSDN、掘金、博客園、思否等很是熱門活躍的大型開發者社區平臺發表過本身的原創文章，更是錦上添花（面試加分）。恭喜您，您離大神又進了一步，請繼續保持。Let's work hard together. 咱們的將來不是夢。

代碼實現

建議動手以前，先去小程序官方文檔閱覽一遍小程序原生框架、組件和API。這裏附上項目總體動畫效果圖：

1）啓動頁

打開資源管理器，找到根目錄的app.json文件，在pages數組對象中新增啓動頁pages/welcome/welcome目錄路徑，按鍵盤ctrl+c保存後會自動編譯生成四個文件分別是：welcome.wxml、welcome.wxss、welcome.js、welcome.json，此時到資源管理器查看pages文件夾已經有welcome文件夾。如圖所示：

補充說明：啓動頁路徑放第一位，做爲初始加載渲染的第一個頁面的呈現。若是想讓某頁面第一個顯示，直接調換位置便可。

頁面佈局直接在welcome.wxml文件中編寫，代碼以下：

<view class="container">
 <view class="bg">  <!-- <image src="/images/welcome_2.jpg" class="img"></image> -->  <text class="common title">個性簡歷</text>  <text class="common subtitle" id="fadeIn">RESUME</text>  <view class="common desc animate">  <text>我</text>  <text>相</text>  <text>信</text>  <text>我</text>  <text>會</text>  <text>成</text>  <text>爲</text>  <text>繁</text>  <text>星</text>  <text>中</text>  <text>最</text>  <text>亮</text>  <text>的</text>  <text>那</text>  <text>一</text>  <text>顆</text>  </view>  <text class="common subdesc" id="fadeIn2">期待您的發現......</text>  <view class="common animate2">  <text>個</text><text>性</text><text>簡</text><text>歷</text>  </view>  </view> </view> 複製代碼

全部靜態圖片統一存放在images文件夾，若是沒有先去建立一個。如圖所示：

頁面佈局完成後，樣式編寫在welcome.wxss文件中，動畫特效採用css3的文本陰影、transform屬性、animation屬性，代碼以下：

.container {
 position: relative; } .bg {  position: fixed;  width: 100%;  height: 100%;  margin: 0;  padding: 0;  background-image: url('https://mmbiz.qpic.cn/mmbiz_jpg/GxbBAxrsEibpXx808iaVdEJ70eUvxjDWiaJgDfQ2gqN3ovbIH9gzIJnqqxKG12fCGKzBORGofM2nQKgY4ibdKHotAw/0?wx_fmt=jpeg');  background-size: 100% 100%;  overflow: hidden; } .common {  position: absolute;  top: 50%;  left: 50%;  width: 100%;  transform: translate(-50%, -50%);  color: #fff;  text-align: center; } .title {  margin-top: -340rpx;  font-size: 80rpx;  text-shadow:0 0 5px #CCCCCC, 0 0 10px #CCCCCC, 0 0 15px #CCCCCC, 0 0 20px #095816, 0 0 25px #095816, 0 0 30px #095816, 0 0 50px #095816, 0 0 80px #095816, 0 0 100px #095816, 0 0 150px #095816; } .subtitle {  margin-top: -240rpx;  font-size: 50rpx;  font-family: 'Times New Roman', Times, serif;  color: #d79d31;  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.3),0 3px 5px rgba(0,0,0,0.2),0 5px 10px rgba(0,0,0,0.25); } .desc {  margin-top: 180rpx;  font-size: 35rpx;  text-shadow: 2px 2px 1px pink;  /* text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.3),0 3px 5px rgba(0,0,0,0.2),0 5px 10px rgba(0,0,0,0.25); */ }  .subdesc {  margin-top: 260rpx;  font-size: 35rpx;  text-shadow: 2px 2px 1px pink; }  /* Animation */ .animate2 {  margin-top: -340rpx;  font-size: 80rpx; } .animate2 text {  opacity: 0;  display: inline-block;  transform: translate(-150px, -50px) rotate(-180deg) scale(3);  animation: revolveScale 3s forwards; } .animate2 text:nth-of-type(2) {  animation-delay: .1s; } .animate2 text:nth-of-type(3) {  animation-delay: .15s; } .animate2 text:nth-of-type(4) {  animation-delay: .2s; }   .animate text:nth-of-type(2) {  animation-delay: 2.0s; } .animate text:nth-of-type(3) {  animation-delay: 2.05s; } .animate text:nth-of-type(4) {  animation-delay: 2.1s; } .animate text:nth-of-type(5) {  animation-delay: 2.15s; } .animate text:nth-of-type(6) {  animation-delay: 2.2s; } .animate text:nth-of-type(7) {  animation-delay: 2.25s; } .animate text:nth-of-type(8) {  animation-delay: 2.3s; } .animate text:nth-of-type(9) {  animation-delay: 2.35s; } .animate text:nth-of-type(10) {  animation-delay: 2.4s; } .animate text:nth-of-type(11) {  animation-delay: 2.45s; } .animate text:nth-of-type(12) {  animation-delay: 2.5s; } .animate text:nth-of-type(13) {  animation-delay: 2.55s; } .animate text:nth-of-type(14) {  animation-delay: 2.6s; } .animate text:nth-of-type(15) {  animation-delay: 2.65s; } .animate text:nth-of-type(16) {  animation-delay: 2.7s; } .animate text {  opacity: 0;  display: inline-block;  transform: translate(-150px, -50px) rotate(-180deg) scale(3);  animation: revolveScale 3s forwards; }  @keyframes revolveScale {  60% {  transform: translate(20px, 20px) rotate(30deg) scale(.3);  }  100% {  transform: translate(0) rotate(0) scale(1);  opacity: 1;  } }  /* 淡入淡出效果 */ #fadeIn {  animation: fadeIn 3s 1; } #fadeIn2 {  animation: fadeIn 1s 3 2s; } @keyframes fadeIn {  0% {  opacity: 0; /*初始狀態 透明度爲0*/  }  50% {  opacity: 0; /*中間狀態 透明度爲0*/  }  100% {  opacity: 1; /*結尾狀態 透明度爲1*/  }  } 複製代碼

設置啓動頁動畫效果執行完成後，跳轉到下一個tab頁面，能夠查看官方文檔API路由和界面交互，代碼實現以下：

// pages/welcome/welcome.js
Page({  // 生命週期函數--監聽頁面加載   onLoad: function (options) {  wx.showToast({ // 顯示消息提示框  title: '加載中',  icon: 'loading',  duration: 400  })  setTimeout(() => { // 定時器到期之後執行註冊的回調函數  wx.switchTab({ // 跳轉到 tabBar 頁面，並關閉其餘全部非 tabBar 頁面  url: '/pages/about/about',  })  }, 6000)  }, }) 複製代碼

啓動頁去掉默認頂部導航欄，需在welcome.json頁面配置項，加上以下代碼：

{
 "navigationStyle": "custom" // 導航欄樣式，僅支持：default 默認樣式 custom 自定義導航欄，只保留右上角膠囊按鈕 } 複製代碼

如需瞭解更多頁面配置，請移步到官方文檔：框架 - 小程序配置 - 頁面配置，有詳細使用說明。

2）基本信息

如需全局設置頂部導航欄背景色，修改導航欄標題，直接在app.json全局配置項中修改，代碼以下：

{
 "window":{  "backgroundTextStyle": "light", // 下拉 loading 的樣式，僅支持 dark / light  "navigationBarBackgroundColor": "#0081ff", // 導航欄背景顏色  "navigationBarTitleText": "我的簡歷", // 導航欄標題文字內容  "navigationBarTextStyle": "white" // 導航欄標題顏色，僅支持 black / white  }, } 複製代碼

添加底部tabbar頁面切換，直接在app.json全局配置，代碼以下：

{
 "tabBar": {  "selectedColor": "#0081ff", // tab 上的文字選中時的顏色，僅支持十六進制顏色  "list": [ // tab 的列表，最少 2 個、最多 5 個 tab  {  "pagePath": "pages/about/about", // 頁面路徑，必須在 pages 中先定義  "selectedIconPath": "images/nav_4_active.png", // 選中時的圖片路徑  "iconPath": "images/nav_4.png", // 圖片路徑，icon 大小限制爲 40kb，建議尺寸爲 81px * 81px，不支持網絡圖片。當 position 爲 top 時，不顯示 icon。  "text": "基本信息" // tab 上按鈕文字  },  {  "pagePath": "pages/index/index",  "selectedIconPath": "images/nav_1_active.png",  "iconPath": "images/nav_1.png",  "text": "工做經驗"  },  {  "pagePath": "pages/skill/skill",  "selectedIconPath": "images/nav_2_active.png",  "iconPath": "images/nav_2.png",  "text": "專業技能"  },  {  "pagePath": "pages/blog/blog",  "selectedIconPath": "images/nav_3_active.png",  "iconPath": "images/nav_3.png",  "text": "技術博客"  }  ]  } } 複製代碼

先插播一條，做者給你們推薦一款很是高大上且開源的小程序UI組件庫ColorUI，項目中引用很簡單，下載源碼解壓後，複製目錄下/colorui裏面的main.wxss和icon.wxss兩個樣式文件，放到你的根目錄下或utils文件夾，而後在app.wxss引入便可，代碼以下：

@import '/utils/icon.wxss';
@import '/utils/main.wxss'; 複製代碼

如需查看ColorUI組件庫DEMO效果，打開菜單欄，點擊項目 - 選擇導入項目 - 導入項目彈框 - 下拉選擇ColorUI源碼路徑 - 點選測試號 - 點擊導入按鈕。如圖所示：

建立基本信息頁面，同啓動頁操做同樣，這裏就很少講，頁面佈局about.wxml，分三大塊使用邊框陰影展現我的資料（添加微信、撥打電話、保存通信錄）、教育背景、自我評價。代碼以下：

<view class="padding">
 <view class="padding-xl radius shadow-warp bg-white margin-top">  <view class="flex justify-center">  <image class="cu-avatar xl round" src="../../images/avator.jpg"></image>  </view>  <view class="flex justify-center margin-top-sm">  <text class="text-bold">Jack Chen</text>  </view>  <view class="flex justify-center margin-top-sm">  <text>指望職位：</text>  <text class="text-shadow text-orange">開發經理</text>  </view>  <view class="flex justify-center margin-top-sm">  <text>男</text>  <text class="margin-left-sm">32歲</text>  <text class="margin-left-sm">8年工做經驗</text>  </view>  <view class="flex justify-around margin-top-sm">  <view bindtap="showQrcode">  <text class="cuIcon-weixin text-xl text-blue"></text>  <text class="margin-left-xs">添加微信</text>  </view>  <view bindtap="phoneCall">  <text class="cuIcon-phone text-xl text-blue"></text>  <text class="margin-left-xs">撥打電話</text>  </view>  <view bindtap="saveContact">  <text class="cuIcon-addressbook text-xl text-blue"></text>  <text class="margin-left-xs">保存通信錄</text>  </view>  </view>  </view>   <!-- 教育經歷 -->  <view class="padding-xl radius shadow-warp bg-white margin-top">  <view class="cuIcon-medalfill text-xl text-blue text-center"></view>  <view class="edu margin-top text-center text-bold"></view>  <view class="margin-top">  <text class="cuIcon-time"></text>  <text class="margin-left-sm">2016.9-2020.7</text>  </view>  <view class="margin-top-sm">  <text class="cuIcon-home"></text>  <text class="margin-left-sm">社會大學</text>  </view>  <view class="margin-top-sm">  <text class="cuIcon-attentionfavor"></text>  <text class="margin-left-sm">計算機信息管理</text>  </view>  </view>   <!-- 自我評價 -->  <view class="padding-xl radius shadow-warp bg-white margin-top">  <view class="cuIcon-appreciatefill text-xl text-blue text-center"></view>  <view class="evaluate margin-top text-center text-bold"></view>  <view class="margin-top evaluate-cont">  <text>1. 性格樂觀、穩重，踏實，興趣普遍，勤奮好學；</text>  <text>2. 責任心強，適應能力強，意志堅毅不拔，執行力強，善於溝通；</text>  <text>3. 敢於迎接新的挑戰，具有很強的事業心和團隊協做的精神，願接受一切工做的考驗，相信本身的加入會給企業或是公司創造更高的價值。</text>  </view>  </view> </view> 複製代碼

邊框陰影佈局和樣式直接去ColorUI組件庫 - 元素 - 邊框陰影獲取。如圖所示：

整個頁面樣式編寫about.wxss，代碼以下：

.cuIcon-weixin, 
.cuIcon-phone, .cuIcon-addressbook {  vertical-align: -3rpx; }  .edu, .evaluate {  height: 1px;  border-top: 1px solid #ddd; } .edu::before, .evaluate::before {  position: relative;  top: -25rpx;  height: 50rpx;  line-height: 50rpx;  background: #fff;  padding: 0 20rpx; } .edu::before {  content: '教育經歷'; } .evaluate::before {  content: '自我評價'; }  .evaluate-cont {  text-align: justify; }  .evaluate-cont text {  display: block; } 複製代碼

添加微信功能，代碼實現以下：

// 在view組件上添加綁定事件屬性名bindtap，自定義方法名爲showQrcode
<view bindtap="showQrcode">  <text class="cuIcon-weixin text-xl text-blue"></text>  <text class="margin-left-xs">添加微信</text> </view> 複製代碼

// pages/about/about.js
Page({  // 添加我的微信功能 - 自定義事件處理函數  showQrcode: function() {  wx.previewImage({ // 在新頁面中全屏預覽圖片。預覽的過程當中用戶能夠進行保存圖片、發送給朋友等操做。  current: 'https://mmbiz.qpic.cn/mmbiz_jpg/GxbBAxrsEiboiaOY2EnpjVFTGp7ia5JOux88eu1sLiciaz73WcZYEQIClqpcd2OQp9jbNW4NDuTbEuhZOToH8dtZHBw/0?wx_fmt=jpeg', // 當前顯示圖片的http連接  urls: ['https://mmbiz.qpic.cn/mmbiz_jpg/GxbBAxrsEiboiaOY2EnpjVFTGp7ia5JOux88eu1sLiciaz73WcZYEQIClqpcd2OQp9jbNW4NDuTbEuhZOToH8dtZHBw/0?wx_fmt=jpeg'] // 須要預覽的圖片http連接列表  })  } }) 複製代碼

撥打電話和保存通信錄功能同添加微信功能開發相似，小程序官方也提供了對應的API，代碼以下：

// pages/about/about.js
Page({  // 撥打電話  phoneCall: function() {  wx.makePhoneCall({  phoneNumber: '137*****615',  complete: (res) => {},  fail: (res) => {},  success: (res) => {},  })  },   // 保存通信錄  saveContact: function() {  wx.addPhoneContact({  firstName: 'Jack Chen',  remark: '前端工程師',  mobilePhoneNumber: '13788888888',  weChatNumber: '懶人碼農',  organization: '騰訊科技',  title: '高級工程師'  })  } }) 複製代碼

3）工做經驗

工做經驗頁面佈局比較簡單，直接選用ColorUI組件庫 - 組件 - 時間軸，在此基礎上修改本身想要的效果，如圖所示：

因爲篇幅太長，工做經驗界面源碼，就不上了，如需查看，請移步文章最後有免費獲取方式。

4）專業技能

專業技能頁面佈局就更簡單，直接選用ColorUI組件庫 - 元素 - 進度條，在此基礎上修改本身想要的效果，如圖所示：

因爲篇幅太長，專業技能界面源碼，就不上了，如需查看，請移步文章最後有免費獲取方式。

5）技術博客

有了以前的開發經驗，技術博客頁面佈局，就更不在話下，依然是選用ColorUI組件庫 - 關於，在此基礎上修改本身想要的效果，如圖所示：

點擊文章精選跳轉到文章列表內頁，使用navigator組件實現。頁面佈局包含輪播圖和案例類卡片式文章列表，也是參考了ColorUI組件庫，文章列表數據經過wxml列表渲染語法wx:for實現。因爲篇幅太長源代碼也就略過。

最後講講文章列表頁跳轉到文章詳情頁的功能實現，是經過小程序原生組件 - 開放能力 - web-view實現小程序頁面跳轉。官方文檔有詳細介紹web-view組件。

具體代碼實現以下：

// pages/articles/articles.wxml
<view class="image" bindtap="bindViewTap" data-mid="{{item.mid}}" data-sn="{{item.sn}}" data-chksm="{{item.chksm}}">  <image src="{{item.imgUrl}}" mode="widthFix"></image>  <view class="cu-tag bg-blue">{{item.tag}}</view>  <view class="cu-bar bg-shadeBottom">  <text class="text-cut">{{item.title}}</text>  </view> </view> 複製代碼

// pages/articles/articles.js
Page({  bindViewTap: function(e) {  wx.navigateTo({ // 保留當前頁面，跳轉到應用內的某個頁面。可是不能跳到 tabbar 頁面。使用 wx.navigateBack 能夠返回到原頁面。小程序中頁面棧最多十層。  url: `/pages/article/article?mid=${e.currentTarget.dataset.mid}&sn=${e.currentTarget.dataset.sn}&chksm=${e.currentTarget.dataset.chksm}`, // 須要跳轉的應用內非 tabBar 的頁面的路徑 (代碼包路徑), 路徑後能夠帶參數。參數與路徑之間使用 ? 分隔，參數鍵與參數值用 = 相連，不一樣參數用 & 分隔；如 'path?key=value&key2=value2'  })  }, }) 複製代碼

// pages/article/article.wxml
<web-view src="https://mp.weixin.qq.com/s?__biz=MzIzMzQ0NDUwNQ==&mid={{mid}}&idx=1&sn={{sn}}&chksm={{chksm}}&token=201203996&lang=zh_CN#rd"></web-view> 複製代碼

// pages/article/article.js
Page({  /**  * 頁面的初始數據  */  data: {  mid: '',  sn: '',  chksm: '',  },   /**  * 生命週期函數--監聽頁面加載  */  onLoad: function (options) {  // 內頁跳轉接收參數值是經過options獲取  console.log('options===',options)  this.setData({ // 改變初始數據狀態  mid: options.mid,  sn: options.sn,  chksm: options.chksm  })  } }) 複製代碼