小程序意见反馈界面（简洁版代码）_微信小程序建议页面_一只风里

大大的周 02-07 6449

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

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

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

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