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

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

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

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

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

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

微信小程序——意见反馈页面的实现（使用使用微信官方反馈功能）
微信小程序--意见反馈页面的实现 (使用使用微信官方反馈功能) 代码: .json {"navigationBarTitleText": "问题反馈" } .w ...
微信小程序意见反馈的实现
第一种:自己实现 feedback.js: const url = require('../../utils/requireurl.js').url; Page({/*** 页面的初始数据*/data ...
前端《Vue.js从入门到项目实战》PDF课件+《微信小程序实战入门第2版》PDF代码调试
JS进行开发,正如一切的编程语言都立足于电元信号的正负极,即01码,可为什么软件都不采用二进制编码来进行开发呢?这里面牵扯到一个成本的问题,这正是影响项目领导者进行决策的关键因素.Vue项目与原生J ...
微信小程序个人简历界面（编辑版）
微信小程序个人简历界面.可编辑修改(包含全部源码) 1.微信小程序实现简单的个人简历界面,包含基本信息.教育背景.获奖证书.兴趣爱好等,简历信息支持修改编辑内容. 2.通过此文章,希望能带给更多学习微 ...
【小程序源码】简洁界面清爽让人非常舒服的一款短视频去印自带接口
总得来说这是一款以短视频去印为主的一款小程序源码内含支持多平台的接口支持短视频和图集去印小编个人觉得界面让人看起来特别的清爽特别的舒服没有那么多的花里胡哨的操作非常的简单进入主题,大家直接 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（十二）：开发小程序用户反馈功能
文章目录前言一.功能说明二.代码实现 1.创建界面Page 2.WXML 3.JS 4.WXSS 专题文章链接前言案例的运行效果,可以扫码观看: 本篇文章,我们将实现应用的用户反馈功能. 一 ...
微信小程序客服系统手机版五大功能介绍
很多朋友小程序上线后,客服消息这块一直没得到解决.小程序客服消息只能在PC端回复,是让众多小程序运营商及商家头疼的问题,因为一个再牛逼的客服,也不可能随时随地都抱着电脑,这就导致很多用户的留言不能及时 ...
小程序和钉钉发版后老版缓存的问题调研
小程序发版后老版缓存方式 1. 小程序运行机制 (1)小程序启动小程序启动会有两种情况,一种是冷启动,一种是热启动. 热启动:假如用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时无需重 ...
微信小程序汇率计算界面
微信小程序汇率计算界面最近在学习微信小程序,自己制作了一个自己想制作的小应用--汇率计算界面(真不知道为什么自己对汇率那么感兴趣XD ) 数据接入在获取数据之前先在data里面添加几个参数 mon ...

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

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

最新文章

热门文章