微信小程序个人简历界面（编辑版）

微信小程序个人简历界面、可编辑修改（包含全部源码）

1、微信小程序实现简单的个人简历界面，包含基本信息、教育背景、获奖证书、兴趣爱好等，简历信息支持修改编辑内容。
2、通过此文章，希望能带给更多学习微信小程序的伙伴们一点点经验，示例简洁，布局简单，喜欢的小伙伴，可以进我主页，分享更多学习经验和示例界面呦。
3、本界面主要是以布局和可编辑个人简历为主，具体完整的简历信息界面还需自己添加，关注博主，后期将分享保存提交后，生成一个完整不可编辑的简历界面哦。
4、代码中若存在不恰当的地方，还请批评指正，非常感谢！

1、js代码

// index.js
Page({
  data: {
    show: false,
    hobby: false,
    avatar: 'https://img0.baidu.com/it/u=345359896,661384602&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    nickName: '布吉岛',
    phone: '18866668888',
    // 编辑时临时数据
    tempList: {
      avatarTemp: 'https://img0.baidu.com/it/u=345359896,661384602&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
      nameTemp: '布吉岛',
      phoneTemp: '18866668888',
    },
    arraySex: ['女', '男'],
    indexSex: 0,
    arrayMarry: ['未婚', '已婚'],
    indexMarry: 0,
    arrayEducation: ['小学', '初中', '高中', '大专', '本科', '研究生'],
    indexEducation: 4,
    attrImg: [],
    hobbyVal: '',
    labelList: []
  },
  editClick() {
    this.setData({
      show: true,
      hobby: false
    })
  },
  // 添加兴趣爱好【注意：itemList最长6】
  addHobbyClick() {
    var that = this;
    var list = ['自定义', '打篮球', '打羽毛球', '游泳', '爬山', '踢足球'];
    var attr = this.data.labelList;
    wx.showActionSheet({
      itemList: list,
      success(res) {
        if (res.tapIndex == 0) {
          that.setData({
            show: true,
            hobby: true
          })
        } else {
          that.setData({
            labelList: attr.concat(list[res.tapIndex])
          })
        }
      }
    })
  },
  // 添加证件照头像、证书【type为0则为上传证件照头像，反之为证书图片】
  selectImage(e) {
    var that = this;
    var type = e.currentTarget.dataset.tag;
    var attr = this.data.attrImg;
    wx.chooseMedia({
      count: type == '0' ? 1 : 6,
      mediaType: ['image'],
      sourceType: ['album', 'camera'],
      maxDuration: 30,
      camera: 'back',
      success(res) {
        if (type == '0') {
          that.setData({
            'tempList.avatarTemp': res.tempFiles[0].tempFilePath
          })
        } else {
          var str = [];
          var list = res.tempFiles;
          for (var i = 0; i < list.length; i++) {
            str.push(list[i].tempFilePath);
          }
          that.setData({
            attrImg: attr.concat(str)
          })
        }
      }
    })
  },
  // 长安删除图片
  longtapDeleteImg(e) {
    let that = this;
    let tag = e.currentTarget.dataset.index;
    wx.showModal({
      title: '提示',
      content: '确定删除该图片吗？',
      complete: (res) => {
        if (res.confirm) {
          var list = that.data.attrImg;
          list.splice(tag, 1);
          that.setData({
            attrImg: list
          })
        }
      }
    })
  },
  // 图片查看
  previewClick(e) {
    let path = e.currentTarget.dataset.url;
    wx.previewImage({
      current: path, // 当前显示图片的http链接
      urls: this.data.attrImg // 需要预览的图片http链接列表
    })
  },
  // 兴趣爱好输入监听
  inputHobbyClick(e) {
    this.setData({
      hobbyVal: e.detail.value
    })
  },
  // 昵称姓名输入监听
  inputNick(e) {
    this.setData({
      'tempList.nameTemp': e.detail.value
    })
  },
  // 联系电话输入监听
  inputPhone(e) {
    this.setData({
      'tempList.phoneTemp': e.detail.value
    })
  },
  // 长安删除兴趣爱好标签
  longtapDeleteLabel(e) {
    let that = this;
    let tag = e.currentTarget.dataset.index;
    wx.showModal({
      title: '提示',
      content: '确定删除该爱好标签吗？',
      complete: (res) => {
        if (res.confirm) {
          var list = that.data.labelList;
          list.splice(tag, 1);
          that.setData({
            labelList: list
          })
        }
      }
    })
  },
  // 取消监听
  cancelMask() {
    this.setData({
      show: false,
      hobbyVal: '',
      'tempList.avatarTemp': this.data.avatar,
      'tempList.nameTemp': this.data.nickName,
      'tempList.phoneTemp': this.data.phone
    })
  },
  // 确定监听
  defineMask() {
    if (this.data.hobby) {
      if (this.data.hobbyVal == '') {
        wx.showToast({
          title: '兴趣爱好不能为空哦',
          icon: 'none'
        })
      } else {
        var attr = this.data.labelList;
        this.setData({
          show: false,
          hobbyVal: '',
          labelList: attr.concat(this.data.hobbyVal)
        })
      }
    } else {
      this.setData({
        show: false,
        avatar: this.data.tempList.avatarTemp,
        nickName: this.data.tempList.nameTemp,
        phone: this.data.tempList.phoneTemp
      })
    }
  },
  // 提交
  formSubmit(e) {
    let params = e.detail.value;
    params.avatar = this.data.avatar;
    params.nickName = this.data.nickName;
    params.phone = this.data.phone;
    // 若仅仅是获取下标
    // params.sex=this.data.indexSex;
    // params.marry=this.data.indexMarry;
    // params.education=this.data.indexEducation;
    // 若仅仅是获取下标对应的文本
    params.sex = this.data.arraySex[this.data.indexSex];
    params.marry = this.data.arrayMarry[this.data.indexMarry];
    params.education = this.data.arrayEducation[this.data.indexEducation];
    params.certificateImg = this.data.attrImg;
    params.hobbyList = this.data.labelList;
    console.log('获取提交的参数信息', params)
    wx.showToast({
      title: '提交监听',
    })
  },
})

2、wxml代码

<view class="level top-box">
  <view class="avatar">
    <image src="{{avatar}}" mode="widthFix"></image>
  </view>
  <view class="level info">
    <view>
      <view class="name">{{nickName}}</view>
      <view class="tel">{{phone}}</view>
    </view>
    <view bindtap="editClick">🖊</view>
  </view>
</view>
<!-- 数据内容 -->
<form catchsubmit="formSubmit" catchreset="formReset">
  <view class="box">
    <view class="level nav">
      <view class="dot"></view>
      <view class="title">基本信息</view>
    </view>
    <view class="row">
      <view>性别</view>
      <picker class="right" bindchange="bindPickerChange" value="{{indexSex}}" range="{{arraySex}}">
        <text>{{arraySex[indexSex]}}</text>
        <text class="triangle">▼</text>
      </picker>
    </view>
    <view class="row">
      <view>年龄</view>
      <view class="right">
        <input name="age" placeholder="请输入年龄" type="number" maxlength="3" />
      </view>
    </view>
    <view class="row">
      <view>邮箱</view>
      <view class="right">
        <input name="mail" placeholder="请输入邮箱信息" maxlength="20" />
      </view>
    </view>
    <view class="row end">
      <view>婚姻状况</view>
      <picker class="right" bindchange="bindPickerChange" value="{{indexMarry}}" range="{{arrayMarry}}">
        <text>{{arrayMarry[indexMarry]}}</text>
        <text class="triangle">▼</text>
      </picker>
    </view>
  </view>

  <view class="box">
    <view class="level nav">
      <view class="dot"></view>
      <view class="title">教育背景</view>
    </view>
    <view class="row">
      <view>学校</view>
      <view class="right">
        <input name="school" placeholder="请输入就读学校" maxlength="30" />
      </view>
    </view>
    <view class="row">
      <view>专业</view>
      <view class="right">
        <input name="major" placeholder="请输入所学专业" type="number" maxlength="50" />
      </view>
    </view>
    <view class="row">
      <view>班级</view>
      <view class="right">
        <input name="grade" placeholder="请输入所在班级" maxlength="20" />
      </view>
    </view>
    <view class="row end">
      <view>学历</view>
      <picker class="right" bindchange="bindPickerChange" value="{{indexEducation}}" range="{{arrayEducation}}">
        <text>{{arrayEducation[indexEducation]}}</text>
        <text class="triangle">▼</text>
      </picker>
    </view>
  </view>

  <view class="box">
    <view class="level nav-flex">
      <view class="level">
        <view class="dot"></view>
        <view class="title">获奖证书</view>
      </view>
      <view class="add-img" bindtap="selectImage" data-tag="1">+</view>
    </view>
    <view class="row">
      <textarea name="certificate" auto-height="true" class="text-area" maxlength="300" placeholder="点击右上角加号可添加证书图片哦~"></textarea>
    </view>
    <view class="attr-img">
      <block wx:for="{{attrImg}}" wx:for-index="index" wx:for-item="item" wx:key="item">
        <image bindlongtap="longtapDeleteImg" data-index="{{index}}" bindtap="previewClick" data-url="{{item}}" class="img" src="{{item}}" mode="widthFix"></image>
      </block>
    </view>
  </view>

  <view class="box">
    <view class="level nav">
      <view class="dot"></view>
      <view class="title">职业技能</view>
    </view>
    <view class="row">
      <textarea name="skill" auto-height="true" class="text-area" maxlength="300" placeholder="填写职业技能信息（300字以内哦~）"></textarea>
    </view>
  </view>

  <view class="box">
    <view class="level nav">
      <view class="dot"></view>
      <view class="title">兴趣爱好</view>
    </view>
    <view class="row wrap-box">
      <block wx:for="{{labelList}}" wx:for-index="index" wx:for-item="item" wx:key="item">
        <view bindlongtap="longtapDeleteLabel" data-index="{{index}}"  class="add-btn data-btn">{{item}}</view>
      </block>
      <view class="add-btn" bindtap="addHobbyClick">+添加</view>
    </view>
  </view>

  <view class="level btn-area">
    <button formType="reset">重置</button>
    <button type="primary" formType="submit">提交</button>
  </view>
</form>
<!-- 弹出层 -->
<view class="mask-all" wx:if="{{show}}" bindtap="cancelMask"></view>
<view class="mask-box" wx:if="{{show}}">
  <block wx:if="{{hobby}}">
    <view class="center">
      <input bindinput="inputHobbyClick" value="{{hobbyVal}}" placeholder="请输入兴趣爱好（5字以内哦~）" maxlength="5" />
    </view>
  </block>
  <block wx:else>
    <view class="row level">
      <view>靓照</view>
      <view class="right" bindtap="selectImage" data-tag="0">
        <image class="head-img" src="{{tempList.avatarTemp}}"></image>
      </view>
    </view>
    <view class="row">
      <view>姓名</view>
      <view class="right">
        <input placeholder="请输入姓名" bindinput="inputNick" value="{{tempList.nameTemp}}" maxlength="20" />
      </view>
    </view>
    <view class="row">
      <view>电话</view>
      <view class="right">
        <input placeholder="请输入联系电话" bindinput="inputPhone" value="{{tempList.phoneTemp}}" type="number" maxlength="11" />
      </view>
    </view>
  </block>
  <view class="level mask-btn">
    <view bindtap="cancelMask">取消</view>
    <view bindtap="defineMask">确定</view>
  </view>
</view>

3、wcss代码

page {
  background-color: #f1f1f1;
}

.level {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.top-box {
  background-color: white;
  padding: 25rpx 20rpx;
}

.avatar {
  width: 20%;
  text-align: center;
}

.avatar image {
  width: 80%;
  border-radius: 15rpx;
}

.info {
  width: 80%;
  margin-left: 10rpx;
  justify-content: space-between;
}

.name {
  font-size: 32rpx;
  font-weight: bold;
}

.tel {
  font-size: 28rpx;
  color: gray;
  padding-top: 10rpx;
}

.box {
  background-color: white;
  margin-top: 20rpx;
  padding: 25rpx 20rpx
}

.nav {
  margin-bottom: 15rpx;
}

.nav-flex {
  margin-bottom: 15rpx;
  justify-content: space-between;
}

.add-img {
  border: 1rpx solid #b3b3b4;
  padding: 0 14rpx 6rpx 14rpx;
  color: #b3b3b4;
  border-radius: 10rpx;
}

.attr-img {
  display: flex;
  flex-wrap: wrap;
  margin: 15rpx 15rpx 0 0;
}

.img {
  width: 20%;
  margin-right: 15rpx;
}

.dot {
  background-color: #2979ff;
  margin-right: 12rpx;
  border-radius: 50rpx;
  padding: 10rpx;
  box-shadow: 0 0 5rpx 5rpx #a0cfff;
}

.title {
  font-size: 30rpx;
  font-weight: bold;
}

.row {
  display: flex;
  flex-direction: row;
  padding: 25rpx 0;
  margin: 0 20rpx;
  font-size: 30rpx;
  border-bottom: 1rpx solid #f1f1f1;
  justify-content: space-between;
}

.end {
  border: none;
  padding-bottom: 10rpx;
}

.wrap-box {
  border: none;
  justify-content: flex-start;
  padding-bottom: 0;
  flex-wrap: wrap;
}

.right {
  color: rgb(110, 110, 110);
}

.right input {
  text-align: right;
  width: 100%;
}

.triangle {
  padding-left: 10rpx;
}

.text-area {
  color: rgb(88, 88, 88);
  width: 100%;
}

.add-btn {
  font-size: 26rpx;
  color: #2979ff;
  border: 1rpx solid #2979ff;
  padding: 5rpx 15rpx;
  border-radius: 50rpx;
  margin-left: 10rpx;
  margin-bottom: 15rpx;
}

.data-btn {
  background-color: #2979ff;
  color: white;
}

.btn-area button {
  margin: 20rpx;
}

/* 弹出层 */
.mask-all {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 888;
  background-color: rgba(0, 0, 0, 0.2);
}

.mask-box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: white;
  border-top-left-radius: 15rpx;
  border-top-right-radius: 15rpx;
}

.center {
  font-size: 30rpx;
  padding: 30rpx 10rpx;
  text-align: center;
  width: 100%;
  border-bottom: 1rpx solid #f1f1f1;
}

.head-img {
  width: 100rpx;
  height: 100rpx;
  border-radius: 15rpx;
}

.mask-btn {
  justify-content: space-around;
  margin: 25rpx 0;
}

.mask-btn view {
  padding: 15rpx 10%;
  font-size: 30rpx;
  border-radius: 5rpx;
}

.mask-btn view:nth-child(1) {
  color: #2979ff;
  background-color: #f1f1f1;
}

.mask-btn view:nth-child(2) {
  color: white;
  background-color: #2979ff;
}

4、json代码

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#2979ff",
  "navigationBarTitleText": "个人简历"
}

如果有帮助，就请我吃根棒棒糖哦。。。文章来源地址https://www.toymoban.com/news/detail-523386.html

到了这里，关于微信小程序个人简历界面（编辑版）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！