當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/3/26 编程问答 51 豆豆

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

前言：

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

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

后面會有如何發布的教程

話不多說直接開始~

1、打開微信開發者工具并修改目錄結構

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

在模型層定義兩個變量

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

3、獲取屏幕寬度和高度

在index.js中加入

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

4、打開頁面文件index.wxml 定義頁面標簽

//定義頁面標簽 <swiper style="height:{{height}}px"></swiper>

定義完成在調試器中可以看到所對應標簽

5、創建一個img目錄并放入自己的照片（圖片是網圖大家可以放入自己的照片！）

6、在頁面標簽頁面index.wxml中引入自己的照片

效果圖：

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

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

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

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

.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中定義彩色氣泡標簽

<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、同樣給彩色標簽氣泡定義樣式

.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、再定義兩個工作標簽

13、同樣到模型層創建相應變量

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

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、實現導航欄文字

<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、設計簡歷頁面的標題欄

先在index.wxml中加入所需標簽：

<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">教育經歷</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; }

在模型層加入數據

效果如下：

17、主要技能模塊開發

數據模型層引入數組形成進度條的樣式

為數據加入樣式：

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

18、教育經歷的開發

首先還是在數據模型層加入教育經歷數組

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

同樣把相應的數據模型加入樣式：

//同樣把相應的數據模型加入樣式 .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; }

效果如下圖：

到這里是不是已經有些感覺了呢？樣式都是什么意思還是需要大家學習些相關基礎的知識。

19、工作經歷模塊的開發

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

在標簽頁面加入工作經歷的標簽：

<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">工作經歷</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">工作經歷</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、項目經歷欄目的設計

添加項目經歷模型數據：

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

加入對應樣式：

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

21、自我評價模塊開發

在標簽index.wxml頁面加入自我評價相應的標簽模塊：

<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">教育經歷</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">工作經歷</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">工作經歷</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>

效果圖：

到這里就已經完成了，是不是很有成就感呢，接下來學習如何發布吧！！

22、小程序上線發布教程

點擊上傳–>>確定

填寫相關信息：

成功后打開微信開發者平臺：

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

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

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

最后：

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。