當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

2小时教会你用微信小程序做高端大气的简历，后带发布上线教程---面试宝典

發(fā)布時間：2024/3/26 编程问答 43 豆豆

生活随笔收集整理的這篇文章主要介紹了 2小时教会你用微信小程序做高端大气的简历，后带发布上线教程---面试宝典小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

前言：

本文章教你如何用微信小程序開發(fā)簡歷，使HR和面試官耳目一新~

學(xué)習(xí)要求：懂得基本的Css語法，Js語法，Flex頁面布局，以及擁有一個自己注冊好的微信小程序開發(fā)者號。

后面會有如何發(fā)布的教程

話不多說直接開始~

1、打開微信開發(fā)者工具并修改目錄結(jié)構(gòu)

2、第二步打開index/index.js文件

在模型層定義兩個變量

data: {width:0,height:0},

3、獲取屏幕寬度和高度

在index.js中加入

/*** 生命周期函數(shù)--監(jiān)聽頁面顯示*/onShow: function () {//獲取屏幕寬度var width=wx.getSystemInfoSync().windowWidth//獲取屏幕高度var height=wx.getSystemInfoSync().windowHeight// 把值賦給模型層變量this.setData({width:width,height:height})},

4、打開頁面文件index.wxml 定義頁面標(biāo)簽

//定義頁面標(biāo)簽 <swiper style="height:{{height}}px"></swiper>

定義完成在調(diào)試器中可以看到所對應(yīng)標(biāo)簽

5、創(chuàng)建一個img目錄并放入自己的照片（圖片是網(wǎng)圖大家可以放入自己的照片！）

6、在頁面標(biāo)簽頁面index.wxml中引入自己的照片

效果圖：

7、在標(biāo)簽頁面index.wxml中再加入三個塊標(biāo)簽，用于存放姓名等屬性

8、回到index.js在模型層中加入name和spell屬性

data: {width:0,height:0,// 首先在模型層定義兩個變量name:"李亞鵬",spell:"Li Yapeng"}

9、接下來在index.wxss中給name和spell屬性設(shè)置樣式

.cover-info{position: absolute;left: 50px;top: 130px; } .cover-name{font-size: 30px;font-weight: bold;display: block;letter-spacing: 1px; } .cover-spell{font-size: 20px;letter-spacing: 1px; }

效果如下，樣式的屬性可以隨意改動，適合就好~
這里使用了偶像的名字，請粉絲不要介意。。。

10、接下來在index.wxml中定義彩色氣泡標(biāo)簽

<swiper style="height:{{height}}px"><swiper-item><image src="../../img/timg.jpg" mode="widthFix" class="timg"></image><view class="cover-info"><text class="cover-name">{{name}}</text><text class="cover-spell">{{spell}}</text></view><view class="big-circle"></view><view class="medium-circle"></view><view class="small-circle"></view></swiper-item> </swiper>

11、同樣給彩色標(biāo)簽氣泡定義樣式

.big-circle{background-color: rgba(0, 165, 34, 0.7);width: 260px;height: 260px;border-radius: 130px;position: absolute;left: -150px;top: 110px; } .medium-circle{background-color: rgba(0, 165, 34, 0.7);width: 160px;height: 160px;border-radius: 80px;position: absolute;right: -80px;top: 110px; } .small-circle{background-color: rgba(0, 165, 34, 0.7);width: 50px;height: 50px;border-radius: 25px;position: absolute;left: -10px;bottom: 110px; }

12、再定義兩個工作標(biāo)簽

13、同樣到模型層創(chuàng)建相應(yīng)變量

data: {width:0,height:0,// 首先在模型層定義兩個變量name:"李亞鵬",spell:"Li Yapeng",job:"Java工程師",exp:"1年半工作經(jīng)驗"},

14、接下來還是和之前一樣，定義變量的樣式

.cover-work{position: absolute;bottom: 200px;text-align: center;background-color: rgba(0, 0, 0, 0.2);padding: 20px 0;width: 100%; } .cover-job{display: block;color: #fff;font-size: 30px;font-weight: bold; } .cover-exp{display: block;color: #fff;font-size: 20px; }

效果圖：

15、實現(xiàn)導(dǎo)航欄文字

<view class="navigation">我的簡歷<image src="../../img/arrow-right.png" class="arrow-right"></image></view> .navigation{position: absolute;top: 40px;right: 10px;font-size: 18px; } .arrow-right{width: 20px;height: 20px;vertical-align: -5px; }

到這里簡歷封面完成：

16、設(shè)計簡歷頁面的標(biāo)題欄

先在index.wxml中加入所需標(biāo)簽：

<swiper-item><scroll-view scroll-y="true" style="width:{{width}}px;height:{{height}}px"><view class="resume"><view class="section"><view class="section-info"><view class="section-seq">1</view><text class="section-title">基本資料</text></view><view class="column col-2"><text class="info">姓名：{{name}}</text><text class="info">電話：{{tel}}</text></view><view class="column col-2"><text class="info">性別：{{sex}}</text><text class="info">年齡：{{age}}</text></view><view class="column col-1"><text class="info">郵箱：{{email}}</text></view><view class="column col-1"><text class="info">住址：{{address}}</text></view></view><view class="section"><view class="section-info"><view class="section-seq">2</view><text class="section-title">主要技能</text></view><view class="skill" wx:for="{{skill}}" wx:key="item"><text class="skill-name">{{item.name}}</text><progress class="progress" percent="{{item.percent}}" stroke-width="5"></progress></view></view><view class="section"><view class="section-info"><view class="section-seq">3</view><text class="section-title">教育經(jīng)歷</text></view><view class="education" wx:for="{{education}}" wx:key="item"><view class="school"><image src="../../img/icon_school.png" class="icon-school"></image><text>{{item.school}}</text></view><view class="row"><view class="info"><image src="../../img/icon_book.png" class="icon-book"></image><text>{{item.major}}</text></view><view class="info"><image src="../../img/icon_calendar.png" class="icon-calendar"></image><text>{{item.year}}</text></view></view><rich-text class="desc">{{item.desc}}</rich-text></view></view><text class="page">1/4</text></view></scroll-view></swiper-item>

加入樣式代碼：

.resume{margin: 0 20px; } .section{padding-bottom: 30px; } .section-info{display: flex;border-bottom: 1px solid #333;padding-bottom: 5px;margin: 10px 0; } .section-seq{background-color: #444;width: 22px;height: 22px;color: #fff;text-align: center;line-height: 22px;margin-right: 10px;font-weight: bold;margin-top: 3px; } .section-title{font-size: 20px; } .column{font-size: 16px;border-bottom: dashed 1px #333;padding: 10px 0; } .col-2{column-count: 2; } .col-1{column-count: 1; } .info{display: block; }

在模型層加入數(shù)據(jù)

效果如下：

17、主要技能模塊開發(fā)

數(shù)據(jù)模型層引入數(shù)組形成進度條的樣式

為數(shù)據(jù)加入樣式：

.skill{padding: 5px 0; } .skill-name{font-size: 16px;display: block;margin-bottom: 5px; } .progress{}

18、教育經(jīng)歷的開發(fā)

首先還是在數(shù)據(jù)模型層加入教育經(jīng)歷數(shù)組

data: {width:0,height:0,// 首先在模型層定義兩個變量name:"胡歌",spell:"Hu Ge",job:"Java工程師",exp:"1年半工作經(jīng)驗",tel: "13312345678",sex: "男",age: 29,email: "yangdi@163.com",address: "北京市朝陽區(qū)XX街道126號",skill: [{ name: "Java", percent: 85 },{ name: "PHP", percent: 40 },{ name: "HTML/CSS/JavaScript", percent: 90 },{ name: "Python", percent: 70 },{ name: "大數(shù)據(jù)", percent: 60 }],education: [{school: "北京航空航天大學(xué)",major: "計算機科學(xué)與技術(shù)(本科)",year: "2014-2018",desc: "本專業(yè)培養(yǎng)掌握計算機軟件基本理論知識，熟悉軟件開發(fā)和管理技術(shù)、能夠在計算機軟件領(lǐng)域中從事軟件設(shè)計、開發(fā)和管理的高級人才。"}],},

同樣把相應(yīng)的數(shù)據(jù)模型加入樣式：

//同樣把相應(yīng)的數(shù)據(jù)模型加入樣式 .education,.work,.project,.introduction{border-bottom: dashed 1px #999;padding: 10px 0; } .education:last-of-type{border-bottom:none; } .work:last-of-type{border-bottom:none; } .project:last-of-type{border-bottom:none; } .introduction:last-of-type{border-bottom:none; } .school,.company,.project-name{font-size: 18px;margin-bottom: 10px; } .icon-school{width: 26px;height: 26px;vertical-align: -6px;margin-right: 5px; } .row{display: flex;justify-content: space-between; } .info{font-size: 16px;margin-bottom: 10px; } .icon-book{width: 16px;height: 16px;vertical-align: -2px;margin-right: 3px; } .icon-calendar{width: 17px;height: 17px;vertical-align: -2px;margin-right: 3px; } .desc{color: #999;line-height: 1.5; } .page{display: block;width: 100%;text-align: center;font-size: 16px;padding-bottom: 15px; }

效果如下圖：

到這里是不是已經(jīng)有些感覺了呢？樣式都是什么意思還是需要大家學(xué)習(xí)些相關(guān)基礎(chǔ)的知識。

19、工作經(jīng)歷模塊的開發(fā)

//在數(shù)據(jù)模型層中加入工作經(jīng)歷數(shù)據(jù)data: {width:0,height:0,// 首先在模型層定義兩個變量name:"胡歌",spell:"Hu Ge",job:"Java工程師",exp:"1年半工作經(jīng)驗",tel: "13312345678",sex: "男",age: 29,email: "yangdi@163.com",address: "北京市朝陽區(qū)XX街道126號",skill: [{ name: "Java", percent: 85 },{ name: "PHP", percent: 40 },{ name: "HTML/CSS/JavaScript", percent: 90 },{ name: "Python", percent: 70 },{ name: "大數(shù)據(jù)", percent: 60 }],education: [{school: "北京航空航天大學(xué)",major: "計算機科學(xué)與技術(shù)(本科)",year: "2014-2018",desc: "本專業(yè)培養(yǎng)掌握計算機軟件基本理論知識，熟悉軟件開發(fā)和管理技術(shù)、能夠在計算機軟件領(lǐng)域中從事軟件設(shè)計、開發(fā)和管理的高級人才。"}],work: [{company: "北京XX公司",job: "程序員",year: "2019/01-至今",desc: "參與開發(fā)了XXX電商系統(tǒng)，擔(dān)任程序員角色。主要的工作是負責(zé)廣告投放、商品秒殺、商品拼團等模塊的開發(fā)與維護，并且負責(zé)管理該項目的運維工作。"},{company: "北京XX公司",job: "實習(xí)生",year: "2018/03-2019/01",desc: "參與了K13在線教育系統(tǒng)的開發(fā)和測試，維護騰訊云點播的API接口調(diào)用，并實現(xiàn)在線轉(zhuǎn)碼、添加水印、防盜鏈和盜播，并且開發(fā)和維護K13教育的微信小程序"},{company: "北京航空航天大學(xué)創(chuàng)客學(xué)院",job: "項目組長",year: "2017/05-2018/01",desc: "參與本校創(chuàng)新學(xué)院的Litemall微商城系統(tǒng)的開發(fā)，擔(dān)任項目組長職務(wù)，參與了商品管理、訂單管理、微信支付、購物車等模塊的設(shè)計與開發(fā)。"}],},

在標(biāo)簽頁面加入工作經(jīng)歷的標(biāo)簽：

<swiper-item><scroll-view scroll-y="true" style="width:{{width}}px;height:{{height}}px"><view class="resume"><view class="section"><view class="section-info"><view class="section-seq">4</view><text class="section-title">工作經(jīng)歷</text></view><view class="work" wx:for="{{work}}" wx:key="item"><view class="company"><image src="../../img/icon_company.png" class="icon-company"></image><text>{{item.company}}</text></view><view class="row"><view class="info"><image src="../../img/icon_job.png" class="icon-job"></image><text>{{item.job}}</text></view><view class="info"><image src="../../img/icon_calendar.png" class="icon-calendar"></image><text>{{item.year}}</text></view></view><rich-text class="desc">{{item.desc}}</rich-text></view></view><text class="page">2/4</text></view></scroll-view></swiper-item><swiper-item><scroll-view scroll-y="true" style="width:{{width}}px;height:{{height}}px"><view class="resume"><view class="section"><view class="section-info"><view class="section-seq">5</view><text class="section-title">工作經(jīng)歷</text></view><view class="project" wx:for="{{project}}" wx:key="item"><view class="project-name"><image src="../../img/icon_computer.png" class="icon-computer"></image><text>{{item.name}}</text></view><rich-text class="desc">{{item.desc}}</rich-text></view></view><text class="page">3/4</text></view></scroll-view></swiper-item>

加入樣式代碼：

.icon-company{width: 22px;height: 22px;vertical-align: -4px;margin-right: 5px; } .icon-job{width: 18px;height: 18px;vertical-align: -3px;margin-right: 3px; }

效果如圖：

20、項目經(jīng)歷欄目的設(shè)計

添加項目經(jīng)歷模型數(shù)據(jù)：

project:[{name:"XXX電商系統(tǒng)",desc:"該電商系統(tǒng)是O2O類型的新零售電商系統(tǒng)，分為購物子系統(tǒng)、支付子系統(tǒng)、數(shù)據(jù)庫子系統(tǒng)、安全子系統(tǒng)、庫存子系統(tǒng)、物流子系統(tǒng)和財務(wù)子系統(tǒng)。核心架構(gòu)采用了SpringCloud微服務(wù)架構(gòu)，整合了上述若干子系統(tǒng)。技術(shù)棧包括了SpringMVC、MyBatis、Activiti、Shiro、QuartZ、Sculptor Boot、jabdp、jee-weapp、RocketMQ、Kafka、Selenium、Echart、Vue、Element-UI、Uni-APP、Swagger、ElasticSearch、Druid、Zookeeper，數(shù)據(jù)平臺選擇的是兩種MySQL集群（Replication、PXC），由MyCat管理，同時對MyCat做雙機熱備。NoSQL采用的是Redis Cluster集群和MongoDB集群"},{name:"XXX K13在線教育系統(tǒng)",desc:"該系統(tǒng)是針對中小學(xué)生提供的K13在線教育系統(tǒng)，采用的是視頻點播形式，分為B/S形式和C/S形式。我主要負責(zé)的是教學(xué)視頻管理業(yè)務(wù)。授課教師向K13平臺上傳教學(xué)視頻后，經(jīng)過專業(yè)人員剪輯之后，由K13平臺調(diào)用騰訊云點播API接口，來實現(xiàn)在線轉(zhuǎn)碼和壓縮，并且添加水印，最后生成防盜播的URL路徑，渲染到HTML網(wǎng)頁或者APP上面。該系統(tǒng)使用的技術(shù)棧包括SpringBoot、SpringMVC、MyBatis、SpringSecurity、Kafka、QuartZ、Flowable，該系統(tǒng)最終部署在騰訊云平臺。"},{name:"北京航空航天大學(xué)創(chuàng)客學(xué)院",desc:"Litemall微商城系統(tǒng)是本校創(chuàng)新學(xué)院聯(lián)合北京XX商超集團聯(lián)合打造的B2C電商系統(tǒng)，該系統(tǒng)采用前后端分離的架構(gòu)設(shè)計，一共分為5個子系統(tǒng)，分別是微商城前后臺系統(tǒng)、商城管理前后臺系統(tǒng)、商城核心系統(tǒng)。業(yè)務(wù)上具備微商城所有的功能，包括微信支付。技術(shù)架構(gòu)上面后臺項目選擇的SpringBoot、SpringMVC和MyBatis組成的SSM框架，并且融合了Shiro、Swagger、PowerMock、阿里云等技術(shù)。前端項目采用了VUE+ElementUI技術(shù)架構(gòu)，小程序采用的微信原生框架。Litemall微商城采用分布式集群部署，發(fā)布在DockerSwarm環(huán)境中，并且實現(xiàn)高負載、高性能和高可用。"}],introduction:"本人性格開朗、穩(wěn)重、有活力，待人熱情、真誠；對待工作認真負責(zé)，善于溝通、協(xié)調(diào)有較強的組織能力與團隊精神；上進心強、勤于學(xué)習(xí)能不斷提高自身的能力與綜合素質(zhì)。在未來的工作中，我將以充沛的精力，刻苦鉆研的精神來努力工作，穩(wěn)定地提高自己的工作能力，與企業(yè)同步發(fā)展。"},

加入對應(yīng)樣式：

.icon-computer{width: 26px;height: 26px;vertical-align: -6px;margin-right: 5px; }

21、自我評價模塊開發(fā)

在標(biāo)簽index.wxml頁面加入自我評價相應(yīng)的標(biāo)簽?zāi)K：

<swiper style="height:{{height}}px"><swiper-item><image src="../../img/imgs.png" mode="widthFix" class="timg"></image><view class="cover-info"><text class="cover-name">{{name}}</text><text class="cover-spell">{{spell}}</text></view><view class="big-circle"></view><view class="medium-circle"></view><view class="small-circle"></view><view class="cover-work"><text class="cover-job">{{job}}</text><text class="cover-exp">{{exp}}</text></view><view class="navigation">我的簡歷<image src="../../img/arrow-right.png" class="arrow-right"></image></view></swiper-item><swiper-item><scroll-view scroll-y="true" style="width:{{width}}px;height:{{height}}px"><view class="resume"><view class="section"><view class="section-info"><view class="section-seq">1</view><text class="section-title">基本資料</text></view><view class="column col-2"><text class="info">姓名：{{name}}</text><text class="info">電話：{{tel}}</text></view><view class="column col-2"><text class="info">性別：{{sex}}</text><text class="info">年齡：{{age}}</text></view><view class="column col-1"><text class="info">郵箱：{{email}}</text></view><view class="column col-1"><text class="info">住址：{{address}}</text></view></view><view class="section"><view class="section-info"><view class="section-seq">2</view><text class="section-title">主要技能</text></view><view class="skill" wx:for="{{skill}}" wx:key="item"><text class="skill-name">{{item.name}}</text><progress class="progress" percent="{{item.percent}}" stroke-width="5"></progress></view></view><view class="section"><view class="section-info"><view class="section-seq">3</view><text class="section-title">教育經(jīng)歷</text></view><view class="education" wx:for="{{education}}" wx:key="item"><view class="school"><image src="../../img/icon_school.png" class="icon-school"></image><text>{{item.school}}</text></view><view class="row"><view class="info"><image src="../../img/icon_book.png" class="icon-book"></image><text>{{item.major}}</text></view><view class="info"><image src="../../img/icon_calendar.png" class="icon-calendar"></image><text>{{item.year}}</text></view></view><rich-text class="desc">{{item.desc}}</rich-text></view></view><text class="page">1/4</text></view></scroll-view></swiper-item><swiper-item><scroll-view scroll-y="true" style="width:{{width}}px;height:{{height}}px"><view class="resume"><view class="section"><view class="section-info"><view class="section-seq">4</view><text class="section-title">工作經(jīng)歷</text></view><view class="work" wx:for="{{work}}" wx:key="item"><view class="company"><image src="../../img/icon_company.png" class="icon-company"></image><text>{{item.company}}</text></view><view class="row"><view class="info"><image src="../../img/icon_job.png" class="icon-job"></image><text>{{item.job}}</text></view><view class="info"><image src="../../img/icon_calendar.png" class="icon-calendar"></image><text>{{item.year}}</text></view></view><rich-text class="desc">{{item.desc}}</rich-text></view></view><text class="page">2/4</text></view></scroll-view></swiper-item><swiper-item><scroll-view scroll-y="true" style="width:{{width}}px;height:{{height}}px"><view class="resume"><view class="section"><view class="section-info"><view class="section-seq">5</view><text class="section-title">工作經(jīng)歷</text></view><view class="project" wx:for="{{project}}" wx:key="item"><view class="project-name"><image src="../../img/icon_computer.png" class="icon-computer"></image><text>{{item.name}}</text></view><rich-text class="desc">{{item.desc}}</rich-text></view></view><text class="page">3/4</text></view></scroll-view></swiper-item><swiper-item><scroll-view scroll-y="true" style="width:{{width}}px;height:{{height}}px"><view class="resume"><view class="section"><view class="section-info"><view class="section-seq">6</view><text class="section-title">自我評價</text></view><view class="introduction"><rich-text class="desc">{{introduction}}</rich-text></view></view><text class="page">4/4</text></view></scroll-view></swiper-item> </swiper>

效果圖：

到這里就已經(jīng)完成了，是不是很有成就感呢，接下來學(xué)習(xí)如何發(fā)布吧！！

22、小程序上線發(fā)布教程

點擊上傳–>>確定

填寫相關(guān)信息：

成功后打開微信開發(fā)者平臺：

點擊版本管理進入后找到開發(fā)版本填寫相關(guān)信息就可以了~~~~

以上就是一整套的微信小程序開發(fā)和發(fā)布教程~感謝閱讀！

以往不變附上10道小程序面試題~10道小程序面試題了解一下
注：創(chuàng)作不易，如有需求可以給我發(fā)郵件聯(lián)系我：lyps88888888@163.com

最后：

祝愿大家前程似錦，加油！！

總結(jié)

以上是生活随笔為你收集整理的2小时教会你用微信小程序做高端大气的简历，后带发布上线教程---面试宝典的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。