最详细的【微信小程序+阿里云Web服务】开发部署指引（十二）：开发小程序用户反馈功能

最新推荐文章于 2023-02-07 22:19:49 发布

Stdonald

最新推荐文章于 2023-02-07 22:19:49 发布

阅读量1.1k

点赞数

分类专栏：【微信小程序+阿里云Web服务】开发部署项目分享文章标签：小程序阿里云 c# sqlserver

本文链接：https://blog.csdn.net/stdonald/article/details/117049181

版权

【微信小程序+阿里云Web服务】开发部署同时被 2 个专栏收录

15 篇文章 12 订阅

订阅专栏

项目分享

15 篇文章 3 订阅

订阅专栏

前言

案例的运行效果，可以扫码观看：
在这里插入图片描述
本篇文章，我们将实现应用的用户反馈功能。

一、功能说明

用户反馈分两种，一种是提意见，另一种是提想要看的卡片类型。
用户进入界面先选择反馈类型，跳转另外页面填写具体反馈信息，之后提交。
两种反馈程序逻辑是一样的，只是对反馈信息增加类型的区分标识。
在这里插入图片描述

之前我们开发的功能，对数据表都只有查询操作；而这个功能，实现对数据表的数据保存。

二、代码实现

1.创建界面Page

在这里插入图片描述

2.WXML

上面提到，用户反馈功能有多个界面；但实际上，由于界面的UI并不复杂，我们可以只创建一个Page，通过逻辑变量的值，控制界面元素的显示或隐藏。我们就用step表示当前操作的步骤，来控制当前页面显示的内容。
step1：选择用户反馈的类型。
step2：详细反馈内容的填写和提交。
step==3：提交成功后的显示。

<!--pages/feedback/feedback.wxml-->
<view wx:if="{{step==1}}" class="nocate">
  <image style="height: 240rpx; margin-top:100rpx;" mode="aspectFit" src="../../images/feedbacktype1.png" bindtap="handleType1"></image>
  <view style="font-size: 38rpx;">意见建议</view>
  <image style="height: 240rpx; margin-top:110rpx;" mode="aspectFit" src="../../images/feedbacktype2.png" bindtap="handleType2"></image>
  <view style="font-size: 38rpx;">我想要看</view>
</view>
<view wx:if="{{step==2}}">
    <view class="page-section">
      <view class="page-section-title">留言内容（100字符以内）</view>
      <view class="textarea-wrp">
        <textarea style="height: 8em" placeholder="{{hint}}" bindinput="handleMessageChange" />
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">联系方式（50字符以内）</view>
      <view class="textarea-wrp">
        <input class="textarea-wrp" placeholder="(选填)" bindinput="handleContactChange" />
      </view>
    </view>
    <view style="height: 12px;"></view>
    <view class="page-section">
      <view class="submit-button" style="background: {{color}};" bindtap="handleSubmit">{{submitText}}</view>
      <view class="submit-button" style="background: #aaaaaa;" bindtap="handleBack">返回</view>
    </view>
</view>
<view wx:if="{{step==3}}" class="success">
  <view class="congratulation"><icon type="success" size="32" class="success-icon"/>提交成功，感谢您的反馈</view>
  <view class="submit-button" style="background: #aaaaaa;" bindtap="handleBack">返回</view>
</view>

3.JS

step变量值，在JS文件里根据运算操作结果进行修改。

Page({
  data: {
    step: 1,
    type: 0,
    title: '',
    hint: '',
    color: '',
    message: '',
    contact: '',
    submitText: '提交'
  },

  handleType1() {
    this.setData({
      step: 2,
      type: 1,
      title: '意见建议',
      hint: '请填写您的意见或者建议',
      color: '#42da56',
      message: '',
      contact: '',
      submitText: '提交'
    })
  },

  handleType2() {
    this.setData({
      step: 2,
      type: 2,
      title: '我想要看',
      hint: '请填写您希望看到的卡片类型',
      color: '#3268cf',
      message: '',
      contact: '',
      submitText: '提交'
    })
  },

  handleMessageChange(e) {
    this.setData({
      message: e.detail.value
    })
  },

  handleContactChange(e) {
    this.setData({
      contact: e.detail.value
    })
  },

  // 提交前先校验数据
  handleSubmit() {
    if (this.data.message.replace(/\s+/g, '') == '') {
      wx.showToast({
        title: '请填写留言内容',
        icon: 'loading',
        duration: 1500
      })
      return;
    }
    if (this.data.message.length > 100) {
      wx.showToast({
        title: '留言内容太长',
        icon: 'loading',
        duration: 1500
      })
      return;
    }
    if (this.data.contact.length > 50) {
      wx.showToast({
        title: '联系方式太长',
        icon: 'loading',
        duration: 1500
      })
      return;
    }
    this.setData({
      submitText: '正在提交'
    })
    wx.request({
      url: 'http://www.xxx.cn/InsertFeedback.ashx',
      data: {
        'Type': this.data.type,
        'Message': this.data.message,
        'Contacts': this.data.contact
      },
      method: "POST",
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: this.submitSuccess.bind(this),
      fail: this.submitFail.bind(this)
    })
  },

  submitSuccess(res){
    var r = res.data;
    if(r == "ok") {
      this.setData({
        step: 3
      })
    }
    else {
      wx.showToast({
        title: '提交失败',
        icon: 'loading',
        duration: 1800
      })
    }
  },

  submitFail() {
    wx.showToast({
      title: '提交失败',
      icon: 'loading',
      duration: 1800
    })
  },

  handleBack(){
    this.setData({
      step: 1
    })
  }
})

对服务端数据表进行数据插入保存操作，小程序端只需要将字段提交给Web API方法即可，我们在服务端的方法已经实现了数据表的insert操作。

4.WXSS

page {
  background: #eee;
}
.success {
  background: #fff;
  padding-bottom: 40rpx;
}
.congratulation {
  text-align: center;
  line-height: 210rpx;
  font-size: 38rpx;
}
.success-icon {
  position: relative;
  top: 10rpx;
  margin-right: 20rpx;
}
.submit-button {
  margin: 20rpx 130rpx 0 130rpx;
  line-height: 100rpx;
  border-radius: 10rpx;
  text-align: center;
  color: #ffffff;
  font-size: 38rpx;
}
.nocate{
  text-align: center;  
} 
.page-section{
  margin-top: 50rpx;
  margin-bottom: 10rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
}
.page-section-title{
  font-size: 36rpx;
  color: #222222;
  margin-bottom: 10rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
}
.textarea-wrp {
  padding: 10rpx 25rpx;
  background-color: #fff;
  font-size: 32rpx;
  color: #404040;
  border-radius: 15rpx;
}

专题文章链接

Stdonald

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
最详细的【微信小程序+阿里云Web服务】开发部署指引（十二）：开发小程序用户反馈功能

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码
复制链接

扫一扫