小程序意见反馈界面（简洁版代码）

在开发个人中心页面时，意见反馈功能是必不可少的，下面介绍该功能的具体开发流程

1、首先看一下效果图：

 2、WXML代码，分为三个部分，文本域（TextArea）、输入框（Input)、按钮（Button)，

其中文本域限制了字数，50字以内。

<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 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;
 
}

这是个人开发的小程序，大家可以浏览一下在线效果图，里面就有反馈意见功能

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