（下）开发一款微信小程序的个性简历，能打开大厂之门并获得门票？（附源码）

回顾

阅读本文之前，可以先看看上一篇分享的内容，主要讲微信小程序的由来，它的特点及产品优势，行业应用，开发语言，运行环境，开发前的准备工作等等。

本项目是基于微信小程序原生框架，常用原生组件及官方API接口实现的小程序版个性简历，并引入炫酷的ColorUI组件库，展现不一样的精彩画面。

先来线上体验一把，上小程序码如下：

如果能帮助到大家，也请点个赞和收藏，您的赞美是作者继续写作的动力。后续会输出更多优质技术博文，与大家一起共同分享。好了，现在开始动手实操吧。

开发前的准备工作上一篇已经介绍，不熟悉的可以先去看看，这里就不再细讲。

新建项目

打开微信开发者工具，选择小程序进入，点选新建项目，按上面提示填写，特别是获取AppID直接去小程序后台-开发-开发设置，找到AppID复制粘贴即可。另一种方式，点选测试号获取AppID，如图所示：

再点击又下角创建按钮，进入开发者界面，如图所示：

点击右上角详情进行基本信息 - 本地设置 - 勾选不校验合法域名、web-view业务域名等，如图所示：

了解了微信开发者界面的基本组成（含菜单栏、工具栏、模拟器、目录结构-资源管理器、编辑器、调试器等等），接下来分析一下小程序个性简历的项目需求。

需求分析

对于求职者来说，准备一份优秀的个人简历是必不可少。估计经历过找工作的小伙伴，都有体会，要准备一大堆简历，进行海量投递（有点夸张，哈哈），然而一大部分简历已石沉大海。虽然打印费不多，就是感觉纸质有点浪费，也不节能环保。突然有个想法，微信这么火，能否开发一款属于自己的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;
}
.subti