微信小程序个人简历界面(编辑版)

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

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
          })
        }
      }
  
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蒜鸟小窝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值