在开发个人中心页面时，意见反馈功能是必不可少的，下面介绍该功能的具体开发流程
1、首先看一下效果图：
2、WXML代码，分为三个部分，文本域（TextArea）、输入框（Input)、按钮（Button)，
其中文本域限制了字数，50字以内。
<!--pages/feedback/feedback.wxml-->
<view class="opinion_wrap">
<form bindsubmit="formSubmit">
<view class="content_wrap">
<view class="content">
<textarea name="opinion" maxlength="50" value="{{content}}" auto-height placeholder-class="placeholder" placeholder="期待您的反馈，我们将会不断改进（50字以内）" />
</view>
</view>
<view class="phone">
<input name="contact" value="{{contact}}" placeholder-class="placeholder" placeholder="请留下您的手机号或邮箱，方便我们及时回复" />
</view>
<button formType="submit" hover-class="button_active" loading="{{loading}}">提交</button>
</form>
</view>3、WXSS样式文件，主要使用了盒子阴影和圆角边框，个人比较喜欢简洁型的，看着舒服
/* pages/feedback/feedback.wxss */
page{
background-color: white;
}
.content_wrap, .phone{
width: 96%;
background-color: #fff;
border-radius: 10rpx;
margin: 20rpx auto;
box-shadow: 0px 0px 10px 2px rgb(0 0 0 / 8%);
}
.content{
padding: 20rpx;
margin: 0 auto;
border-radius: 10rpx;
}
textarea{
min-height: 300rpx;
width: 100%;
}
input{
margin-top: 30rpx;
height: 100rpx;
padding-left: 20rpx;
background-color: #fff;
}
button{
color: white;
border: none;
width: 85%;
padding: 10rpx 0rpx;
margin: 40rpx auto;
background: #2b85e4;
border-radius: 40rpx;
font-size: 30rpx;
}
.button_active{
background: #5cadff;
}
.placeholder{
color: #b6b6b6;
font-size: 14px;
}4、JS文件，提交表单触发formSumbit函数，函数的主要工作就是检查文本域是否为空，还有用户填写的手机号或者邮箱的格式是否正确，如果满足以上两个条件则将反馈信息和用户名以Post方式提交到后台，由后台将反馈信息存入到数据库。
这里面的逻辑代码需要一定的理解能力（其实也并不难），如果看不懂的，可以在评论区提问或者百度，坚持才可能胜利！
Page({
/**
* 页面的初始数据
*/
data: {
loading: false,
contact: '',
contant: ''
},
formSubmit: function (e) {
let _that = this;
let content = e.detail.value.opinion;
let contact = e.detail.value.contact;
let regPhone = /^1[3578]\d{9}$/;
let regEmail = /^[a-z\d_\-\.]+@[a-z\d_\-]+\.[a-z\d_\-]+$/i;
if (content == "") {
wx.showModal({
title: '提示',
content: '反馈内容不能为空!',
})
return false
}
if (contact == "") {
wx.showModal({
title: '提示',
content: '手机号或者邮箱不能为空!',
})
return false
}
if(contact == "" && content == "") {
wx.showModal({
title: '提示',
content: '反馈内容,手机号或者邮箱不能为空!',
})
return false
}
if ((!regPhone.test(contact) && !regEmail.test(contact)) || (regPhone.test(contact) && regEmail.test(contact))) { //验证手机号或者邮箱的其中一个对
wx.showModal({
title: '提示',
content: '您输入的手机号或者邮箱有误!',
})
return false
} else {
this.setData({
loading: true
})
var n = wx.getStorageSync("userinfo");
let nickname;
//当本地缓存的用户名称不为""或者null时，设置userinfo信息
if(n.nickName != '' && n.nickName != null){
nickname = n.nickName;
}
let status = false;
wx.request({
url: '后台api地址，需自行填写',
method: 'POST',
data: {
"content": content,
"contact": contact,
"nickname":nickname
},
success: function (res) {
if (res.data.code == 0) {
wx.showToast({
title: '反馈成功',
icon: 'success',
duration: 1000,
success: function (res) {
//提示框消失后返回上一级页面
setTimeout(() => {
wx.navigateBack({
change: true,
})
}, 1200)
}
})
}else{
wx.showToast({
title: '反馈失败，请稍后再试',
icon: 'error',
duration: 1200
});
}
},
fail: function () {
wx.showToast({
title: '请求失败~',
icon: 'error',
duration: 1500
})
}
})
return status;
}
},
})那么这里，我也把Java相关后端代码给到大家：
@PostMapping("/add")
public PublicInterface<Feedback> add(@RequestBody Feedback feedback){
PublicInterface<Feedback> res = new PublicInterface<>();
boolean flag = feedbackService.add(feedback);
if (flag){
res.setMsg("反馈成功！");
}else {
res.setCode(1);
res.setMsg("反馈失败，请稍后再试");
}
return res;
}PublicInterface类
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.io.Serializable;
import java.util.List;
@Data
@NoArgsConstructor
@AllArgsConstructor
public class PublicInterface<T> implements Serializable {
//返回消息
private String msg;
//代码状态
private int code;
//回写数据
private MyData data;
//数据条数
private int total;
}MyData类：
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.util.List;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class MyData<T> {
private List<T> list;
//下一条记录的索引(获取壁纸时，接口需要)
private int nextStart;
}这是个人开发的小程序，大家可以浏览一下在线效果图，里面就有反馈意见功能
如果对您有帮助，欢迎收藏~
