在开发个人中心页面时,意见反馈功能是必不可少的,下面介绍该功能的具体开发流程
1、首先看一下效果图:

2、WXML代码,分为三个部分,文本域(TextArea)、输入框(Input)、按钮(Button),
其中文本域限制了字数,50字以内。
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 add(@RequestBody Feedback feedback){PublicInterface 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 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 {private List list;//下一条记录的索引(获取壁纸时,接口需要)private int nextStart;}
这是个人开发的小程序,大家可以浏览一下在线效果图,里面就有反馈意见功能

如果对您有帮助,欢迎收藏~