前言

案例的运行效果，可以扫码观看：

本篇文章，我们将实现应用的用户反馈功能。

一、功能说明

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

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

二、代码实现

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

专题文章链接

最详细的【微信小程序+阿里云Web服务】开发部署指引（一）：准备开始
最详细的【微信小程序+阿里云Web服务】开发部署指引（二）：注册微信小程序
最详细的【微信小程序+阿里云Web服务】开发部署指引（三）：开通阿里云主机
最详细的【微信小程序+阿里云Web服务】开发部署指引（四）：搭建服务端数据库
最详细的【微信小程序+阿里云Web服务】开发部署指引（五）：实现服务端调用逻辑
最详细的【微信小程序+阿里云Web服务】开发部署指引（六）：开发微信小程序的准备
最详细的【微信小程序+阿里云Web服务】开发部署指引（七）：小程序项目中的文件资源
最详细的【微信小程序+阿里云Web服务】开发部署指引（八）：开发小程序卡片类型呈现功能
最详细的【微信小程序+阿里云Web服务】开发部署指引（九）：开发小程序卡片浏览功能
最详细的【微信小程序+阿里云Web服务】开发部署指引（十）：实现发音朗读
最详细的【微信小程序+阿里云Web服务】开发部署指引（十一）：开发小程序设置功能
最详细的【微信小程序+阿里云Web服务】开发部署指引（十二）：开发小程序用户反馈功能
最详细的【微信小程序+阿里云Web服务】开发部署指引（十三）：小程序底部菜单
最详细的【微信小程序+阿里云Web服务】开发部署指引（十四）：发布小程序
最详细的【微信小程序+阿里云Web服务】开发部署指引（十五）：结语

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

最详细的【微信小程序+阿里云Web服务】开发部署指引（十一）：开发小程序设置功能
文章目录前言一.功能说明二.设置界面代码实现 1.创建界面Page 2.WXML 3.JS 4.WXSS 三.参数控制逻辑代码实现 1.自动跳转卡片 2.自动播放声音专题文章链接前言案例的 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（四）：搭建服务端数据库
文章目录前言一.连接主机数据库二.创建数据表结构三.准备测试数据专题文章链接前言做完了前面的注册申请工作,今天我们开始进行程序的开发. 这篇文章,我们要完成的是服务端数据库表的创建. 一 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（八）：开发小程序卡片类型呈现功能
文章目录前言一.功能说明二.代码实现 1.创建主界面Page 2.WXML 2.JS 3.WXSS 4.合法域名校验 5.图片缓存刷新问题的解决小结专题文章链接前言本篇文章,将对照专题案 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（一）：准备开始
文章目录前言案例说明专题文章链接前言作为一个程序开发的老鸟,有时候想使用微信小程序,开发实现一些实用的小功能.由于小程序往往需要有后台数据的支持,所以一般还需要搭建一个Server服务器,来 ...
Istio 在阿里云容器服务的部署及流量治理实践
目标在阿里云容器服务 Kubernetes 集群上部署 Istio 服务网格实践灰度发布.故障注入.熔断等 Istio 流量管理特性准备工作安装和设置 kubectl 客户端,请参考不同的操作 ...
【Linux 操作系统】阿里云服务器操作实战部署C语言开发环境(vim配置,gcc) 部署J2EE网站(jdk,tomcat)
. 作者 :万境绝尘转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/18964835 . 博客总结 : 设置SecureCRT ...
阿里云服务器上单机部署大数据开发环境（hadoop2.6-cdh5.8.0系列）
概述之前在阿里云买的学生版服务器,闲着也是浪费,为了平常学习使用,决定在一台服务器上搭建一个伪分布式的开发环境.之前用三台虚拟机部署过集群,时间长了怕忘,现在升级各个版本重新部署,记下来方便以后查看 ...
阿里云容器服务中国最佳，进入 Forrester 报告强劲表现者象限
近日,全球知名市场调研机构 Forrester 发布首个企业级公共云容器平台报告. 报告显示:阿里云容器服务创造了中国企业最好成绩,与谷歌云位于同一水平线,进入强劲表现者象限. 究其原因,分析师认为: ...
Knative 应用在阿里云容器服务上的最佳实践
作者|元毅阿里云智能事业群高级开发工程师相信通过前面几个章节的内容,大家对 Knative 有了初步的体感,那么在云原生时代如何在云上玩转 Knative?本篇内容就给你带来了 Knative 应 ...

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

文章目录

前言