课程地址,这里贴出了项目的源代码,有需要的自取就可以了。
https://www.imooc.com/learn/1221
小程序page /index / index.wxml
<swiper style="height:{{height}}px"> <swiper-item> <image src="../../img/photo.jpg" mode="widthFix" class="photo"></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>
小程序page/index/index.js
// pages/index/index.js Page({ /** * 页面的初始数据 */ data: { width:0, height:0, name:"谢子豪", spell:"Xie Zihao", job:"Java工程师", exp:"1年实习经验", tel: "13312345678", sex: "男", age: 29, email: "[email protected]", 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微商城系统的开发,担任项目组长职务,参与了商品管理、订单管理、微信支付、购物车等模块的设计与开发。" } ], 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:"本人性格开朗、稳重、有活力,待人热情、真诚;对待工作认真负责,善于沟通、协调有较强的组织能力与团队精神;上进心强、勤于学习能不断提高自身的能力与综合素质。在未来的工作中,我将以充沛的精力,刻苦钻研的精神来努力工作,稳定地提高自己的工作能力,与企业同步发展。" }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { var width=wx.getSystemInfoSync().windowWidth var height=wx.getSystemInfoSync().windowHeight this.setData({ width:width, height:height }) }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
index.wxss
.photo{ display: block; width: 90%; margin-left: auto; margin-right: auto; position: fixed; bottom: 0; } .cover-info{ position: absolute; left: 50px; top: 30px; } .cover-name{ font-size: 30px; font-weight: bold; display: block; letter-spacing: 1px; } .cover-spell{ font-size: 20px; letter-spacing: 1px; } .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; } .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; } .navigation{ position: absolute; top: 40px; right: 10px; font-size: 18px; } .arrow-right{ width: 20px; height: 20px; vertical-align: -5px; } .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; } .skill{ padding: 5px 0; } .skill-name{ font-size: 16px; display: block; margin-bottom: 5px; } .progress{ } .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; } .icon-company{ width: 22px; height: 22px; vertical-align: -4px; margin-right: 5px; } .icon-job{ width: 18px; height: 18px; vertical-align: -3px; margin-right: 3px; } .icon-computer{ width: 26px; height: 26px; vertical-align: -6px; margin-right: 5px; }
app.json
{ "pages": [ "pages/index/index" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "MY RESUME", "navigationBarTextStyle": "black" }, "style": "v2", "sitemapLocation": "sitemap.json" }