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中引入自己的照片

<swiper style="height:{{height}}px">
  <swiper-item>
    <image src="../../img/timg.jpg" mode="widthFix" class="timg"></image>
  </swiper-item>
</swiper>

效果图：

7、在标签页面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>
  </swiper-item>
</swiper>

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、再定义两个工作标签

<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>
    <view class="cover-work">
       <text class="cover-job">{{job}}</text>
       <text class="cover-exp">{{exp}}</text>
    </view>
  </swiper-item>
</swiper>

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;
}

在模型层加入数据

  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号",
  },

效果如下：

17、主要技能模块开发

数据模型层引入数组形成进度条的样式

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 }
    ],
  },

为数据加入样式：

.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

最后：

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