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

第一种：自己实现

feedback.js：

const url = require('../../utils/requireurl.js').url;
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
      })
      let model, system, platform;
      wx.getSystemInfo({
        success: function (res) {
          model = res.model;
          system = res.system;
          platform = res.platform;
        }
      })
      wx.request({
        url: url + '/util/feedback',
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          'content': content,
          'contact': contact,
          'device_model': model, //手机型号
          'device_system ': system, //操作系统版本
          'app_version': platform  //客户端平台
        },
        method: 'POST',
        success: function (res) {
          let status = res.data.status;
          if (status == 1) {
            _that.setData({
              loading: false,
              contact: '',
              contant: ''
            })
            wx.showToast({
              title: '成功',
              icon: 'success',
              duration: 1500
            })
          }
        },
        fail: function () {
          console.log("意见反馈接口调用失败")
        }
      })
    }
  },
})

feedback.wxml：

<!--pages/feedback/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;
}

实现效果：

参考链接：http://www.lanrenmb.com/xiaochengxujiaocheng/9312_3.html

 

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

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

wxml代码：

<button class="item" open-type="feedback">
  <view class="item_left item">
    <view class="icon"><image src="../../images/personal_icon/feedback.png" style="width:24px;height:24px;"></image></view>
      <view class="item_title">意见反馈</view>
    </view>
  <view class="item_right">
    <view class="arrow"><image src="../../images/personal_icon/arrow_right.png" style="width:20px;height:20px;"></image></view>
  </view>
</button>

这里需要去除按钮自带样式，微信小程序中自带的按钮样式见参考链接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;
}

实现效果：

参考链接1：https://www.jianshu.com/p/e22815c9b02d

参考链接2：https://blog.csdn.net/qq_35324453/article/details/81559113