小程序 - 个人简历

为了让招聘人员快速地认识自己，可以做一个“个人简历”微信小程序，

展示自己的个人信息。

下面将对“个人简历”微信小程序进行详细讲解。

目录

个人简历

创建图片目录

页面开发

index.wxml

index.wxss

功能实现截图

总结

---

个人简历

创建图片目录

把图片文件放入小程序图片目录中

自动刷新加载

页面开发

index.wxml

简历的首页在index.wxml中编写。

代码如下：

<!--index.wxml-->
<view class="container"><!-- 头像区域 --><view class="top"><view class="user-img"><image src="/images/2631374422.jpg" /></view></view><!-- 详细信息区域 --><view class="menu"><view class="title">个人信息</view><view class="item">姓名：于工</view><view class="item">性别：男</view><view class="item">工作经验：8年</view><view class="item">职位：PHP开发工程师</view></view><!-- IT技能区域 --><view class="content"><view class="title">IT技能</view><view class="item">精通 PHP 语言，熟练使用 Laravel、ThinkPHP，了解Yii、CI</view><view class="item">熟悉LAMP、LNMP环境使用、搭建、调试、排错及优化</view><view class="item">熟练MySQL数据库表设计、索引优化、主从、常用的引擎、事务及优化</view><view class="item">熟练掌握Redis、MongoDB等Nosql数据库及项目应用</view><view class="item">熟练使用SVN、Git进行团队开发和线上部署</view><view class="item">熟练掌握Ajax，JS，Jquery，熟练应用Bootstrap、LayUi对后台布局开发</view><view class="item">熟悉Laravel 队列原理及在项目中实现功能</view><view class="item">熟悉Python爬虫，熟练使用Django框架</view></view>
</view>

index.wxss

样式设置在index.wxss文件中。

代码如下：

.top {background: #3A4861;width: 100%;padding: 20rpx 0;
}
.top .user-img {width: 252rpx;margin: 0 auto;
}.top image {width: 252rpx;height: 252rpx;border-radius: 50%;border: 6rpx solid #777F92;
}.menu {width: 100%;padding: 20rpx 0 20rpx 10rpx;
}.menu .title {height: 50rpx;line-height: 50rpx;font-size:36rpx;font-weight: bold;
}.menu .item {height: 50rpx;line-height: 50rpx;border-bottom: 2rpx solid #ccc;font-size: 34rpx;
}
.content {width:100%;padding:20rpx 0;padding-left: 10rpx;
}.content .title{height: 50rpx;line-height: 50rpx;font-size:36rpx;font-weight: bold;
}.content .item {flex-wrap: wrap;
}

功能实现截图

总结

使用原生的方式简单的实现了一个个人简历小程序的页面开发。