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

作者：羊村懒王 | 2024-03-21 08:12:59

踩

小程序个人信息页面

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

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: '提交监听',
    })
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199

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">声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/279639

推荐阅读

相关标签