个人简历小程序

最新推荐文章于 2024-05-22 10:47:11 发布
最新推荐文章于 2024-05-22 10:47:11 发布
阅读量8.3k 收藏 51
点赞数 12
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41171755/article/details/100051643
版权

    为了熟练掌握微信小程序开发的一些基本技巧，熟悉微信小程序开发流程，特此，运用所学知识，做了一个个人简历小程序。

效果图如下：

代码如下：

①　index.js
        const app = getApp()
Page({
data: {
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
user:{
name:"",
phone:"123456789123",
email:"123456789@qq.com"
}
},
//事件处理函数
bindViewTap: function () {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse) {
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function (e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
③　index.wxml
<view class="container">
<view class='Top'>
<image src='../../utils/images/bak.jpg' class='Top-background'></image>
<view class='Top-left Top-View'>
<image class='Top-img' src='../../utils/images/PersonalHeadImg.jpeg'></image>
</view>
<view class='Top-right Top-View'>
<view>姓名：{{user.name}}</view>
<!-- 点击事件 -->
<view >手机：{{user.phone}}
</view>
<view>邮箱：{{user.email}}</view>
</view>
</view>
<view class='main'>
<navigator url='../basicsituation/index' class='main-to'>
<view class='main-view'>
<view class='main-view-item' hover-class="main-view-item-hover">--基本情况--</view>
</view>
</navigator>
<navigator url='../experience/index' class='main-to'>
<view class='main-view'>
<view class='main-view-item' hover-class="main-view-item-hover">--学习经历--</view> 
</view>
</navigator>
<navigator url='../skill/index' class='main-to'>
<view class='main-view'>
<view class='main-view-item' hover-class="main-view-item-hover">--特点擅长--</view> 
</view>
</navigator>
<navigator url='../reward/index' class='main-to'>
<view class='main-view'>
<view class='main-view-item' hover-class="main-view-item-hover">--获奖奖励--</view> 
</view>
</navigator>
</view>
</view>
④　Index.wxss
.Top{
position: relative;
padding-top: 50rpx;
width: 100%;
height: 450rpx;
}

.Top-View{
width: 50%;
height: 260rpx;
float: left;
}
.Top-right view{
font-size: 32rpx;
margin: 30rpx auto;
width: 100%;
height: 40rpx;
overflow: hidden;
}
.Top-background{
position: absolute;
width: 100%;
height: 500rpx;
top: 0px;
left: 0px;

z-index: -1;
}
.Top-left{
width: 40%;
}
.Top-img{
width: 200rpx;
height: 200rpx;
border-radius: 50%;
margin: 50rpx;
}
.Top-right{
width: 60%;
color: white;
padding-top: 40rpx;
}

.Top-font{
position: absolute;
bottom: 0rpx;
left:17%; 
}
.main{
width: 100%;
height: auto;
/* margin-top: 100rpx; */
border-top: 1px solid #0E426A;
}

.main-view{
width: 100%;
height: 140rpx;
line-height: 120rpx;
border-bottom: 1px solid #0E426A;
clear: both;
}
.main-view-item{
width: 100%;
text-align: center;
background-color:#b3d4db; 
}
.main-view-item-hover{
width: 100%;
text-align: center;
background-color:#1ac2e4; 
}
①　Index.js
Component({
/**
* 组件的属性列表
*/
properties: {

},

/**
* 组件的初始数据
*/
data: {
hiddenVideo: true

},

/**
* 组件的方法列表
*/
methods: {
click: function () {
this.setData({
hiddenVideo: !this.data.hiddenVideo
})
}

},
})
Index.json
{
"component": true,
"usingComponents": {},
"navigationBarTitleText": "基本情况"
}
③　Index.wxss
.education{
width: 100%;
height: auto;
}

.header{
width: 100%;
height: 400rpx;
background-image: url('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4231578138,2286783346&fm=27&gp=0.jpg')
}
.h-img{
width: 100%;
height: 400rpx;
}
.main{
width: 100%;
height: auto;
}
.main-title{
width: 100%;
height: 100rpx;
background: #d6d6d6;
text-align: center;
line-height: 100rpx;
padding-left: 20rpx;
}
.m-view{
width: 90%;
padding: 20rpx 10rpx;
margin: 0 auto;
font-size: 32rpx;
}
④　Index.wxml
<view class='education'>
<view>
<view class='header'>
<video custom-cache="false" hidden="{{hiddenVideo}}" class='header' src='http://mvvideo1.meitudata.com/575c2b652d7375255.mp4'>
</video>
</view>
</view>
<view class='main'>
<view class='main-title' bindtap="click">点击显示个人介绍视频</view>
<view class='school m-view'>就读院校：大学</view>
<view class='m-view'>目前学历：  本科</view>
<view class='m-view'>所学专业：  软件设计与开发</view>
<view class='m-view'>外语：六级</view>
<view class='m-view'>自我评价：
<text>
性格沉稳，对工作认真负责，纪律性和适应性强。
长得帅气，善良,大方,学习态度认真，自我感觉良好！
</text>
</view>
</view>
</view>
①　Index,js
Page({

/**
* 页面的初始数据
*/
data: {

},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {

},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
})
③　Index.wxss
page{
height: 100%;
background-color:#b3d4db;
}
.container{
width: 100%;
height: 100%;
}
.myphoto{
width: 28%;
height: 20%;
border-radius: 100%;
margin-left: 36%;
margin-top:10%;
}
.main{
height:79%;
width: 100%;
}
.main-text{
font-size: 20px;
color: #405f80;
font-family: '楷体'
}
.main-view-item{
border-radius: 10px;
height: 16%;
width: 80%;
margin: 6px auto;
border:2px solid gray;
padding-left:4px; 
background-color:#b3d4db;
}

④　Index.wxml
<view class="container">

<image class="myphoto" src="../../utils/images/PersonalHeadImg.jpeg"></image>
<view class="main">
<view class="main-view-item">
<text class="main-text">1.小程序部分内容纯属虚构</text>
</view>
<view class="main-view-item">
<text class="main-text">2.基本情况有一个“点击显示个人视频”</text>
</view>
<view class="main-view-item">
<text class="main-text">3.学习经历与特点擅长页面均有一个滑块视图</text>
</view>
<view class="main-view-item">
<text class="main-text">4.技能页面采用进度条组件显示</text>
</view>

</view>

</view>
(4)Experience
①　Index,js
Component({
/**
* 组件的属性列表
*/
properties: {
},

/**
* 组件的初始数据
*/
data: {
},

/**
* 组件的方法列表
*/
methods: {

}
})

②　Index.json
{
"component": true,
"navigationBarTitleText": "学习经历"
}

③　Index.wxss

.experience{
width: 100%;
height: auto;
}
.header{
width: 100%;
height: 400rpx;
position: relative;
}
.header image{
width: 100%;
height: 400rpx;
position: absolute;
left: 0rpx;
top: 0rpx;
z-index: -1;
}
.main{
width: 100%;
height: auto;
margin-top: 40rpx;
}
.m-box{
width: 100%;
float: right;
height: auto;
}
.m-view{
width: 100%;
height: auto;
position: relative;
padding-top: 30rpx;
}
.m-view image{
width: 44rpx;
height: 44rpx;
position: absolute;
left: -22rpx;
top: 0rpx;
z-index: 100;
background: #fff;
}
.m-view .view-text{
width: 90%;
height: auto;
margin-left: 60rpx;
font-size: 32rpx;
padding: 40rpx 0rpx;
}

④　Index.wxml

<view class='experience'>
<view class='header'>
<swiper interval='5000' duration='1000' autoplay='true'>
<swiper-item>
<image src="../../utils/images/swiper1.jpg">
</image>
</swiper-item>
<swiper-item>
<image src="../../utils/images/swiper2.jpg">
</image>
</swiper-item>
<swiper-item>
<image src="../../utils/images/swiper3.jpg">
</image>
</swiper-item>
</swiper>
<!-- <image src="../../utils/images/swiper1.jpg"></image> -->
</view>

<view class='main'>
<view class='m-box'>
<view class='m-view'>
<view class='view-text'>
            <view>2004年9月至2010年6月XXXXXX小学。</view> 
            
</view>
</view>

<view class='m-view'>
<view class='view-text'>
            <view>2010年9月至2013年6月就读于XXXXXX中学。</view> 
            
</view>
</view>

<view class='m-view'>
<view class='view-text'>
          <view>2013年9月至2016年6月就读于XXXXXXXXX中学。</view> 
          
</view>
</view>
<view class='m-view'>
<view class='view-text'>
          <view>20016年9月至今就读于XXXXXXXXX大学。</view> 
</view>
</view>
</view>
</view>
</view>


(5)Reward
①　Index,js
Component({
/**
* 组件的属性列表
*/
properties: {

},

/**
* 组件的初始数据
*/
data: {
project:[
{
"name":"拍摄电影项目",
"text":"web网站",
"src":"../../utils/images/reward1.jpg"
},{
"name": "华三通信的项目",
"text": " web网站",
"src": "../../utils/images/reward2.jpg"
},{
"name": "酒店管理系统",
"text": "java程序",
"src": "../../utils/images/reward3.png"
},{
"name": "UNIX服务器",
"text": "硬件编程",
"src": "../../utils/images/reward4.jpg"
}

]
},

/**
* 组件的方法列表
*/
methods: {

}
})


②　Index.json
{
"component": true,
"usingComponents": {},
"navigationBarTitleText": "获奖情况"
}

③　Index.wxss
.project{
width: 100%;
height: auto;
}
.p-view{
width: 100%;
height: auto;
text-align: center;
margin-top: 40rpx;
}
.p-view image{
width: 90%;
height: 400rpx;
margin: 0 auto;
}
.p-text{
width: 85%;
height: auto;
text-align: left;
font-size: 32rpx;
background: #D6D6D6;
padding: 20rpx;
border-radius: 6rpx;
margin: 10rpx auto;
}
.p-text-l{
display: inline-block;
width: 50%;
height: auto;
text-align: center;
}
.p-text-r{
display: inline-block;
width: 50%;
height: auto;
text-align: center;
}

④　Index.wxml
<view class='project'>
<view class='p-view' wx:for="{{project}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<image src='{{item.src}}'></image>
<view class='p-text'>
<text class='p-text-l'>{{item.name}}</text> 
<text class='p-text-r'>{{item.text}}</text>
</view>
</view>
</view>

(6)Skill
①　Index.js
Component({
/**
* 组件的属性列表
*/
properties: {

},

/**
* 组件的初始数据
*/
data: {
Skill:[
{
name:"移动Adroid",
num:"93",
color:"#2980b9",
}, {
name: "HTML/CSS3",
num: "95",
color: "#c0392b",
}, {
name: "Ajax",
num: "24",
color: "#d35400",
}, {
name: "网络编程",
num: "86",
color: "#27ae60",
}, {
name: "C语言",
num: "66",
color: "#2F3C4F",
},
],
Skill2:[
{
name: "口语表达",
num: "60",
color: "#E2F355",
}, 
{
name: "心理素质",
num: "64",
color: "#E0B050",
},
{
name: "打篮球",
num: "89",
color: "#A0F050",
},
{
name: "交际能力",
num: "83",
color: "#E5E050",
},
],
},

/**
* 组件的方法列表
*/
methods: {

}
})


②　Index.json
{
"component": true,
"usingComponents": {},
"navigationBarTitleText": "特点擅长"
}

③　Index.wxss
<view class='skill'>
<view class='logo'>
<!-- Skills -->
<swiper interval='5000' duration='1000' autoplay='true'>
<swiper-item>
<image src="../../utils/images/skill.jpg">
</image>
</swiper-item>
<swiper-item>
<image src="../../utils/images/skill1.jpg">
</image>
</swiper-item>
<swiper-item>
<image src="../../utils/images/skill3.jpg">
</image>
</swiper-item>
</swiper>
</view>
<text class='title'>编程技能：</text>
<view class='header'>
<view class='h-div' wx:for="{{Skill}}" wx:index="index" wx:item="item" wx:key="index">
<text>{{item.name}}</text>
<text class='h-text-right' >{{item.num}}</text>
<view class='h-box'>
<progress percent="{{item.num}}" active activeColor='{{item.color}}' />
</view>
</view>
</view>
<text class='title'>生活技能：</text>
<view class='header'>
<view class='h-div' wx:for="{{Skill2}}" wx:index="index" wx:item="item" wx:key="index">
<text>{{item.name}}</text>
<text class='h-text-right' >{{item.num}}</text>
<view class='h-box'>
<progress percent="{{item.num}}" active activeColor='{{item.color}}' />
</view>
</view>
</view>

</view>
④　Index.wxml
.skill{
width: 100%;
height: auto;
margin: 0rpx;
padding: 0rpx;
}
.logo{
width: 100%;
height: 400rpx;
position: relative;
margin-bottom: 30rpx;
}
.logo image{
width: 100%;
height: 400rpx;
position: absolute;
top: 0px;
left: 0px;
}
.header{
width: 100%;
height: auto;
}
.title{
font-size: 56rpx;
padding:40rpx 20rpx;
}
.h-div{
height: 110rpx;
width: 100%;
/* border: 1px solid red; */
}
.h-div text{
padding: 10rpx 40rpx;
font-size: 30rpx;
}
.h-div .h-box{
width: 90%;
margin: 0 auto;
margin-top: 20rpx;
}
.h-text-right{
float: right;
}
(7)app.json
{
"pages": [
"pages/index/index",
"pages/basicsituation/index",
"pages/experience/index",
"pages/skill/index",
"pages/reward/index",
"pages/logs/logs",
"pages/description/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#b3d4db",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"tabBar": {
"list": [
{
"pagePath": "pages/description/index",
"text": "说明",
"iconPath": "utils/images/b2.png",
"selectedIconPath": "utils/images/b1.png"
},
{
"pagePath": "pages/index/index",
"text": "个人主页",
"iconPath": "utils/images/a1.png",
"selectedIconPath": "utils/images/a2.png"
}
]
}
}
  • 如何理解小程序的宿主环境？

            小程序的运行环境包括渲染层和逻辑层，WXML 和 WXSS 工作在渲染层，JS 脚本工作在逻辑层。如下图所示，渲染层与逻辑层分别与Native（微信客户端）进行数据交换，Native发出HTTPS请求给第三方服务器，然后收到Web套接字信息，将信息返回渲染层与逻辑层。值得注意的是，一个小程序存在多个界面，故由多个WebView(视图层),每一个WebView和JS脚本均由一个线程进行管理。

     开发UI界面过程中，程序需要维护很多变量状态，同时要操作对应的UI元素。这就引入“数据驱动”的概念，它可以让状态和视图绑定在一起（状态变更时，视图也能自动变更），WXML结构实际上等价于一棵Dom树，通过一个JS对象也可以来表达Dom树的结构，WXML可以先转成JS对象，然后再渲染出真正的Dom树。

   如图所示：小程序的逻辑层和渲染层是分开的两个线程。在渲染层，宿主环境会把WXML转化成对应的JS对象，在逻辑层发生数据变更的时候，我们需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层，再经过对比前后差异，把差异应用在原来的Dom树上，渲染出正确的UI界面。

学无止境灬博学笃思
关注
  • 12
    点赞
  • 踩
  • 51
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
个人简历微信小程序源码
05-30
个人简历微信小程序源码
微信小程序/个人简历小程序
11-18
使用微信小程序云开发写的个人简历小程序，无需配置服务器，导入即可使用。微信公众平台申请一个小程序（个人版就可以），下载微信开发者工具，导入项目，更换appid，然后在开发者工具的左上角云开发按钮开通云开发服务，选择基础版免费的就可以，在app.js文件中将环境id更换为你创建的环境id。
【全开源】招聘求职小程序系统源码（ThinkPHP+原生微信小程序）
2401_84414018的博客
05-22 1008
招聘求职小程序系统源码为招聘求职市场带来了数字化、智能化的变革。未来，随着技术的不断进步和市场的不断发展，我们有理由相信招聘求职小程序系统将会更加完善、更加智能。为招聘求职市场注入更多活力和创新！
微信小程序个人简历界面（编辑版）
weixin_45465881的博客
06-04 6669
微信小程序个人简历界面、可编辑修改（包含全部源码） 1、微信小程序实现简单的个人简历界面，包含基本信息、教育背景、获奖证书、兴趣爱好等，简历信息支持修改编辑内容。 2、通过此文章，希望能带给更多学习微信小程序的伙伴们一点点经验，示例简洁，布局简单，喜欢的小伙伴，可以进我主页，分享更多学习经验和示例界面呦。 3、本界面主要是以布局和可编辑个人简历为主，具体完整的简历信息界面还需自己添加，关注博主，后期将分享保存提交后，生成一个完整不可编辑的简历界面哦。 4、代码中若存在不恰当的地方，还请批评指正，非常感谢！
10分钟手机制作简历，免费，支持导出word
Meyu
12-01 1608
重要的是：简历制作完成之后，可以导出为 word 格式，自己任意修改，不收费，同时也支持 PDF。简化了繁琐的简历制作过程，使用户能够快速创建个人简历；而且提供了专业的模板和格式，使简历看起来更专业、精美。它能够帮助用户突出自己的优势和亮点，以吸引雇主的注意；可以指导用户填写必要的信息，确保简历的完整性和准确性。自己开发的简历制作工具，无需下载，终身免费使用，不像其他工具，动不动就需要付费。可导出为Word和 PDF 格式，方便用户在各个求职平台上使用。
个人简历小程序前端源码
字节网盘SEO工具
08-06 1182
简介： 这是前几周前看到的不错的一款小程序的个人简历，看到一款高端、大气、上档次的小程序前端，于是分享学习下！ 不需要其他后台域名，前端自行修改简历信息即可上线 此版本微信端运行没问题，QQ端自行测试修改 网盘下载地址： http://kekewl.org/AQwH20pGPFZ0 图片： ...
个人简历小程序(附源码)
热门推荐
TuiHo的鱼塘
05-26 1万+
个人简历小程序(附源码) 使用微信小程序云开发制作自己的个人简历，简单高效。 首先需要了解小程序的基本结构以及云开发模式，及一些css样式基础。 使用小程序云数据库、vant组件库实现简历内容。 最终效果如下： 代码如下： index.json { "usingComponents": { //引入vant组件 "van-progress": "@vant/weapp/progress/index", "van-divider": "@vant/weapp/divider",
微信小程序开发学习与问题解决（个人简历展示）
weixin_41258131的博客
05-30 1259
以上就是个人简历小程序页面效果展示，微信小程序开发的准备工作、代码组成、问题解决以及审核发布过程。
微信小程序个人简历
Aurora_____的博客
11-18 8579
微信小程序_个人简历 介绍 基于微信云开发写的一个个人简历微信小程序，组件库使用的是ColorUI。 安装教程 微信公众平台申请一个小程序（个人版就可以），下载微信开发者工具，导入项目，更换appid，然后在开发者工具的左上角云开发按钮开通云开发服务，选择基础版免费的就可以，在app.js文件中将环境id更换为你创建的环境id。 在微信开发者工具导入整个Resume文件，代码方法都写了注释，由于数据存到云数据库和云仓库，可能有些内容看不到，可以扫码预览一下内容。觉得对你有帮助的麻烦给个Star,谢谢！！！
myResume:个人简历 小程序
05-01
微信小程序 个人简历此项目纯属仿照一些比较主流的简历模板框架所练习的一个小程序，比较简单实用，感兴趣的童鞋可以学习一下，希望对您有所帮助。优点1、简单实用，您使用的话可直接修改LocalData.js里面静态数据2...
个人简历小程序前端源码.zip
10-27
【个人简历小程序前端源码.zip】是一个包含130款不同设计风格的个人简历小程序的前端源代码集合。这些源码对于开发者来说是一份宝贵的资源，可以帮助他们在短时间内快速构建个性化、专业的个人展示平台，尤其适合...
微信小程序课程设计个人简历-源码.zip
12-02
项目主题是创建一个个人简历小程序，用户可以通过这个小程序展示自己的教育背景、工作经历、技能特长等个人信息。 在微信小程序的开发中，主要涉及以下几个关键知识点： 1. **WXML（WeiXin Markup Language）**：...
微信小程序｜基于小程序制作一个超酷的个人简历
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
02-15 4589
你还在用以前的方式投简历吗?趁着金三银四来临之际，跟随此文使用小程序制作一个便携超酷的个人简历，高调炫技，愉快的收offer吧！
基于NSGA-II的智能车辆换道轨迹规划与优化_查云飞.caj
最新发布
07-31
基于NSGA-II的智能车辆换道轨迹规划与优化_查云飞
chromedriver-mac-x64_122.0.6261.111.zip
07-31
chromedriver-mac-x64_122.0.6261.111.zip
chromedriver-mac-arm64_127.0.6485.0.zip
07-31
chromedriver-mac-arm64_127.0.6485.0.zip
Java本地接口开发手册.zip
07-31
Java本地接口开发手册
前端小程序uniapp开发简历模板
03-25
项目描述：该项目是基于uniapp框架开发的一款商城小程序，主要功能包括商品展示、购物车、下单、支付等。 责任描述： - 完成主页面及商品展示页面的开发，实现前端业务逻辑。 - 实现购物车和下单流程的开发，...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值