微信小程序意见反馈的实现

桃扇骨 2022-02-03 23:57 1165阅读 0赞

### **第一种：自己实现** ###

feedback.js：

feedback.wxml：

<view class="opinion_wrap">
      <form bindsubmit="formSubmit">
          <view class="content_wrap">
              <view class="content">
                  <textarea name="opinion"   value="{
       {content}}" auto-height placeholder-class="placeholder" placeholder="期待您的反馈，我们将会不断改进(ง •̀_•́)ง" />
              </view>
          </view>  
          <view class="phone">
              <input name="contact" value="{
       {contact}}" placeholder-class="placeholder" placeholder="请留下您的手机号或邮箱，方便我们及时回复" />
          </view>
          <button formType="submit" hover-class="none" loading="{
       {loading}}">提交</button>
      </form>
    </view>

feedback.wxss：

/* pages/feedback/feedback.wxss */
    page{
        background-color: #efefef;
    }
    .content_wrap{
        background-color: #fff;
    }
    .content{
        padding: 10rpx;
        margin: 0 auto
    }
    textarea{
        min-height: 300rpx;
        width: 100%;
    }
    input{
        margin-top: 30rpx;
        height: 100rpx;
        padding-left: 20rpx;
        background-color: #fff;
    }
    button{
        width: 80%;
        margin-top: 30rpx;
        background-color: #696969;
        color: #fff;
    }
    .placeholder{
        color: #b6b6b6;
        font-size: 14px;
    }

实现效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fub255bW91c0NvbHQ_size_16_color_FFFFFF_t_70][]

参考链接：[http://www.lanrenmb.com/xiaochengxujiaocheng/9312\_3.html][http_www.lanrenmb.com_xiaochengxujiaocheng_9312_3.html]

### **第二种：使用微信官方反馈与建议功能** ###

使用官方文档中提供的意见反馈功能，具体如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fub255bW91c0NvbHQ_size_16_color_FFFFFF_t_70 1][]

wxml代码：

这里需要去除按钮自带样式，微信小程序中自带的按钮样式见参考链接2。

去除button按钮样式的wxss代码：

.item{
      background-color: #ffffff;
      display:flex;
      flex-direction:row;
      height: 50px;
      align-items: center;
      position: relative;
      padding-left:5px;
      padding-right:5px;
      text-align:left;
      text-decoration:none;
      border: none;
      border-radius: 0;
    }
    .item::after {
      border: none;
      border-radius: 0;
    }

实现效果：

![20190506152912867.png][]

参考链接1：[https://www.jianshu.com/p/e22815c9b02d][https_www.jianshu.com_p_e22815c9b02d]

参考链接2：[https://blog.csdn.net/qq\_35324453/article/details/81559113][https_blog.csdn.net_qq_35324453_article_details_81559113]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fub255bW91c0NvbHQ_size_16_color_FFFFFF_t_70]: /images/20220204/173138d3464d4343b9bb8c9de7588e41.png
[http_www.lanrenmb.com_xiaochengxujiaocheng_9312_3.html]: http://www.lanrenmb.com/xiaochengxujiaocheng/9312_3.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fub255bW91c0NvbHQ_size_16_color_FFFFFF_t_70 1]: /images/20220204/496361aa9cef48d1bfb9a6872f4b74fb.png
[20190506152912867.png]: /images/20220204/cab3ed3cead54e399ddcb362cd01f8bb.png
[https_www.jianshu.com_p_e22815c9b02d]: https://www.jianshu.com/p/e22815c9b02d
[https_blog.csdn.net_qq_35324453_article_details_81559113]: https://blog.csdn.net/qq_35324453/article/details/81559113