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

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

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

1、js代码

// index.jsPage({
  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代码

<viewclass="level top-box"><viewclass="avatar"><imagesrc="{{avatar}}"mode="widthFix"></image></view><viewclass="level info"><view><viewclass="name">{{nickName}}</view><viewclass="tel">{{phone}}</view></view><viewbindtap="editClick">🖊</view></view></view><!-- 数据内容 --><formcatchsubmit="formSubmit"catchreset="formReset"><viewclass="box"><viewclass="level nav"><viewclass="dot"></view><viewclass="title">基本信息</view></view><viewclass="row"><view>性别</view><pickerclass="right"bindchange="bindPickerChange"value="{{indexSex}}"range="{{arraySex}}"><text>{{arraySex[indexSex]}}</text><textclass="triangle">▼</text></picker></view><viewclass="row"><view>年龄</view><viewclass="right"><inputname="age"placeholder="请输入年龄"type="number"maxlength="3"/></view></view><viewclass="row"><view>邮箱</view><viewclass="right"><inputname="mail"placeholder="请输入邮箱信息"maxlength="20"/></view></view><viewclass="row end"><view>婚姻状况</view><pickerclass="right"bindchange="bindPickerChange"value="{{indexMarry}}"range="{{arrayMarry}}"><text>{{arrayMarry[indexMarry]}}</text><textclass="triangle">▼</text></picker></view></view><viewclass="box"><viewclass="level nav"><viewclass="dot"></view><viewclass="title">教育背景</view></view><viewclass="row"><view>学校</view><viewclass="right"><inputname="school"placeholder="请输入就读学校"maxlength="30"/></view></view><viewclass="row"><view>专业</view><viewclass="right"><inputname="major"placeholder="请输入所学专业"type="number"maxlength="50"/></view></view><viewclass="row"><view>班级</view><viewclass="right"><inputname="grade"placeholder="请输入所在班级"maxlength="20"/></view></view><viewclass="row end"><view>学历</view><pickerclass="right"bindchange="bindPickerChange"value="{{indexEducation}}"range="{{arrayEducation}}"><text>{{arrayEducation[indexEducation]}}</text><textclass="triangle">▼</text></picker></view></view><viewclass="box"><viewclass="level nav-flex"><viewclass="level"><viewclass="dot"></view><viewclass="title">获奖证书</view></view><viewclass="add-img"bindtap="selectImage"data-tag="1">+</view></view><viewclass="row"><textareaname="certificate"auto-height="true"class="text-area"maxlength="300"placeholder="点击右上角加号可添加证书图片哦~"></textarea></view><viewclass="attr-img"><blockwx:for="{{attrImg}}"wx:for-index="index"wx:for-item="item"wx:key="item"><imagebindlongtap="longtapDeleteImg"data-index="{{index}}"bindtap="previewClick"data-url="{{item}}"class="img"src="{{item}}"mode="widthFix"></image></block></view></view><viewclass="box"><viewclass="level nav"><viewclass="dot"></view><viewclass="title">职业技能</view></view><viewclass="row"><textareaname="skill"auto-height="true"class="text-area"maxlength="300"placeholder="填写职业技能信息（300字以内哦~）"></textarea></view></view><viewclass="box"><viewclass="level nav"><viewclass="dot"></view><viewclass="title">兴趣爱好</view></view><viewclass="row wrap-box"><blockwx:for="{{labelList}}"wx:for-index="index"wx:for-item="item"wx:key="item"><viewbindlongtap="longtapDeleteLabel"data-index="{{index}}"class="add-btn data-btn">{{item}}</view></block><viewclass="add-btn"bindtap="addHobbyClick">+添加</view></view></view><viewclass="level btn-area"><buttonformType="reset">重置</button><buttontype="primary"formType="submit">提交</button></view></form><!-- 弹出层 --><viewclass="mask-all"wx:if="{{show}}"bindtap="cancelMask"></view><viewclass="mask-box"wx:if="{{show}}"><blockwx:if="{{hobby}}"><viewclass="center"><inputbindinput="inputHobbyClick"value="{{hobbyVal}}"placeholder="请输入兴趣爱好（5字以内哦~）"maxlength="5"/></view></block><blockwx:else><viewclass="row level"><view>靓照</view><viewclass="right"bindtap="selectImage"data-tag="0"><imageclass="head-img"src="{{tempList.avatarTemp}}"></image></view></view><viewclass="row"><view>姓名</view><viewclass="right"><inputplaceholder="请输入姓名"bindinput="inputNick"value="{{tempList.nameTemp}}"maxlength="20"/></view></view><viewclass="row"><view>电话</view><viewclass="right"><inputplaceholder="请输入联系电话"bindinput="inputPhone"value="{{tempList.phoneTemp}}"type="number"maxlength="11"/></view></view></block><viewclass="level mask-btn"><viewbindtap="cancelMask">取消</view><viewbindtap="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":"个人简历"}

如果有帮助，就请我吃根棒棒糖哦。。。