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

1、首先看一下效果图：

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

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

{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></code></pre> 
<p></p> 
<p>3、WXSS样式文件，主要使用了盒子阴影和圆角边框，个人比较喜欢简洁型的，看着舒服</p> 
<pre><code class="language-css">/* 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;
}</code></pre> 
<p>4、JS文件，提交表单触发formSumbit函数，函数的主要工作就是<strong>检查文本域是否为空</strong>，还有用户填写的<strong>手机号或者邮箱的格式是否正确，</strong>如果满足以上两个条件则<strong>将反馈信息和用户名以Post方式提交到后台，由后台将反馈信息存入到数据库。</strong></p> 
<p>这里面的逻辑代码需要一定的理解能力（其实也并不难），如果看不懂的，可以在评论区提问或者百度，坚持才可能胜利！</p> 
<pre><code class="language-javascript">
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;}},
})</code></pre> 
<p>那么这里，我也把Java相关后端代码给到大家：</p> 
<pre><code class="language-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;}</code></pre> 
<p></p> 
<p>PublicInterface类</p> 
<pre><code class="language-java">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;}</code></pre> 
<p>MyData类：</p> 
<pre><code class="language-java">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;}</code></pre> 
<p>这是个人开发的小程序，大家可以浏览一下在线效果图，里面就有<strong>反馈意见功能</strong></p> 
<p></p> 
<p><img alt="" height="214" src="https://img.pic99.top/dingtaihe/202404/034e763559e46dc.jpeg" width="214" /></p> 
<p> 如果对您有帮助，欢迎收藏~</p>                <!--end::Text-->
            </div>
            <!--end::Description-->
            <div class="mt-5">
                <!--关键词搜索-->
                
                <a href="/index.php?s=news&c=search&keyword=%E8%AF%8D%E5%BA%93%E5%8A%A0%E8%BD%BD%E9%94%99%E8%AF%AF%3A%E6%9C%AA%E8%83%BD%E6%89%BE%E5%88%B0%E6%96%87%E4%BB%B6%E2%80%9CE%3A%5Chighferrum_mysql%5CConfiguration%5CDict_Stopwords.txt%E2%80%9D%E3%80%82" class="badge badge-light-primary fw-bold my-2" target="_blank">词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。</a>
                            </div>
            <div class="mt-5">
                <p class="fc-show-prev-next">
                    <strong>上一篇：</strong><a href="/news/47436.html">基于小程序制作一个猜拳小游戏</a><br>
                </p>
                <p class="fc-show-prev-next">
                    <strong>下一篇：</strong><a href="/news/47438.html">Qt编写ffmpeg本地摄像头显示（16路本地摄像头占用3.2%CPU）</a>                </p>
            </div>
            <!--begin::Block-->
            <div class="d-flex flex-stack mb-2 mt-10">
                <!--begin::Title-->
                <h3 class="text-dark fs-5 fw-bold text-gray-800">相关内容</h3>
                <!--end::Title-->
            </div>
            <div class="separator separator-dashed mb-9"></div>
            <!--end::Block-->
            <div class="row g-10">
               

            </div>


        </div>
        <!--end::Table widget 14-->
    </div>
    <!--end::Col-->

    <!--begin::Col-->
    <div class="col-xl-4 mt-0">
        <!--begin::Chart Widget 35-->
        <div class="card card-flush h-md-100">
            <!--begin::Header-->
            <div class="card-header pt-5 ">
                <!--begin::Title-->
                <h3 class="card-title align-items-start flex-column">
                    <!--begin::Statistics-->
                    <div class="d-flex align-items-center mb-2">
                        <!--begin::Currency-->
                        <span class="fs-5 fw-bold text-gray-800 ">热门资讯</span>
                        <!--end::Currency-->
                    </div>
                    <!--end::Statistics-->
                </h3>
                <!--end::Title-->
            </div>
            <!--end::Header-->
            <!--begin::Body-->
            <div class="card-body pt-3">

                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/news/148406.html" class="text-dark fw-bold text-hover-primary fs-6">湖南芙蓉律师事务所荣膺“律新社...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">2025年12月28日，律新社正式发布《精品法律服务品牌指南（2025）：企业商事领域》，湖南芙蓉律...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/news/148408.html" class="text-dark fw-bold text-hover-primary fs-6">涉嫌针对中国公民实施绑架杀人犯...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">公安部近日派出工作组赴菲律宾开展警务执法合作，在我驻菲律宾大使馆支持下，两国执法部门密切协作，成功抓...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/news/148407.html" class="text-dark fw-bold text-hover-primary fs-6">原创            《...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">明代编纂的《永乐大典》常被称为“古代最大的百科全书”，然而现存篇幅不足原书的4%，其中医部内容散失尤...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/news/148409.html" class="text-dark fw-bold text-hover-primary fs-6">郴电国际（600969）披露全...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">截至2025年12月29日收盘，郴电国际（600969）报收于9.63元，较前一交易日下跌0.93%...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/news/148399.html" class="text-dark fw-bold text-hover-primary fs-6">北方铜业（000737）发布市...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">截至2025年12月29日收盘，北方铜业（000737）报收于15.2元，较前一交易日下跌2.12%...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/news/148403.html" class="text-dark fw-bold text-hover-primary fs-6">制度性突破！这一新机构，在这里...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">撰文 | 余晖  12月28日，广州市海珠区人工智能发展局挂牌成立。  这是全国首个独立设置、实体化...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/news/148400.html" class="text-dark fw-bold text-hover-primary fs-6">政策动态 | 住建部定调202...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">  2025年第52周，住建部召开全国城乡建设工作会议，明确来年将着力稳定房地产市场，加快构建房地产...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/news/148405.html" class="text-dark fw-bold text-hover-primary fs-6">年内两度减持，獐子岛再遭第三大...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">12月29日晚间，  截至公告披露日，和岛一号基金持有公司股份50,082,685股，占公司总股本比...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/news/148404.html" class="text-dark fw-bold text-hover-primary fs-6">杭州市滨江区新闻出版局：未发现...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">近日，游戏《燕云十六声》上线新时装引发网友争议。12月29日，澎湃新闻记者获悉，据杭州市滨江区新闻出...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/news/148402.html" class="text-dark fw-bold text-hover-primary fs-6">赣锋锂业涉嫌内幕交易罪被移送审...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">12月29日晚间，锂行业龙头企业赣锋锂业(002460)发布公告称，当日收到宜春市公安局送达的《移送...</span>
                    </div>
                    <!--end::Title-->
                </div>
                
            </div>
            <!--end::Body-->
        </div>
        <!--end::Chart Widget 35-->
    </div>
    <!--end::Col-->
</div>



</div>
<!--end::Content container-->
</div>
<!--end::Content-->
</div>
<!--end::Content wrapper-->
<!--begin::Footer-->
<div id="kt_app_footer" class="app-footer">
    <!--begin::Footer container-->
    <div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack py-3">
        <!--begin::Copyright-->
        <div class="text-dark order-2 order-md-1">
            <span class="text-muted fw-semibold me-1">2025 ©</span>
            <a href="/" target="_blank" class="text-gray-800 text-hover-primary">鼎泰网</a>
        </div>
        <!--end::Copyright-->
        <!--begin::Menu-->
        <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1">
                        <li class="menu-item">
                <a href="/news/" target="_blank" class="menu-link px-2">资讯</a>
            </li>
                        <li class="menu-item">
                <a href="/caijing/" target="_blank" class="menu-link px-2">财经</a>
            </li>
                    </ul>
        <!--end::Menu-->
    </div>
    <!--end::Footer container-->
</div>
<!--end::Footer-->
</div>
<!--end:::Main-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Page-->
</div>
<!--end::App-->
<div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">
    <!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg-->
    <span class="svg-icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor"></rect>
            <path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor"></path>
        </svg>
    </span>
    <!--end::Svg Icon-->
</div>
<!--begin::Javascript-->
<script>var hostUrl = "/static/default/pc/";</script>
<!--begin::Global Javascript Bundle(mandatory for all pages)-->
<script src="/static/default/pc/plugins/global/plugins.bundle.js"></script>
<script src="/static/default/pc/js/scripts.bundle.js"></script>
<!--end::Global Javascript Bundle-->

<!--end::Javascript-->
</body>
<!--end::Body-->
</html>