我们做小程序难免会遇到一些未知的问题，这个时候给用户提供一个反馈与建议功能就显得至关重要了。这一节来带领大家实现小程序的反馈与建议功能。
还是老规矩，我们学习这节之前，先带领大家去熟悉下相关的官方文档。
“官方文档永远是最好的老师”
https://developers.weixin.qq.com/miniprogram/dev/component/button.html
我们需要实现的反馈与建议功能是小程序官方为我们提供的一个开发能力，所以我们要要做的就是调起微信官方的“反馈与建议功能”
调起官方提供的功能，我们通常用button按钮来实现，botton按钮有一个open-type属性，open-type就是微信官方提供的开发能力。
botton
open-type官方目前开发的功能如下
open-type
我们在第4天课程的获取用户信息章节登陆与授权一节，有用button的open-type下的getUserInfo功能来获取用户信息。这节我们使用feedback功能来实现反馈与建议。下面开发教大家实现步骤。
一，个人中心添加反馈与建议模块
me.wxml
如上图所示，我们在第5天代码的me.wxml里添加
<button class='button' open-type="feedback">
反馈与建议
</button>
这就是调起反馈与建议开发功能的关键。
反馈与建议功能我们用模拟器是没有办法调起来的所以我们要用手机微信来预览该功能。步骤就是，点击开发者功能的预览---》出现如下图的二维码----》用手机微信扫描二维码即可。
预览
然后到个人中心点击反馈与建议按钮，就可以调起反馈与建议的功能了。
-
1，反馈与建议功能页
功能页
-
2，我们这里提一条建议，在小程序后台可以看到用户提的这条建议。
image.png
提交成功
-
3，小程序后台收到这条反馈的效果图如下
客户反馈
到这里我们就可以轻松的实现反馈与建议功能了
但是有个问题，我们的反馈与建议和联系客服按钮样式不统一，显得有些不太好看
样式不统一
所以接下来带领大家来实现样式的统一。
-
1，首先来分析下样式为什么不统一
我们联系客服和反馈建议写的css样式都是一样的，为什么显示出来会有差异呢？因为button按钮有自己自带的样式，所以我们要做的就是去除botton自带的样式。
样式
-
2，去除botton自带样式
去除默认
经过如上修改后，可以看到样式很统一了。
到这里我们就完美的实现了反馈与建议了。下面贴出来me.wxml和me.wxss的代码
- me.wxml
<!--pages/me/me.wxml-->
<view class='top' wx:if='{{!yincang}}'>
<image class='touxiang' src='{{yonghu.avatarUrl}}'></image>
<text class='name'>{{yonghu.nickName}}</text>
</view>
<button wx:if='{{yincang}}' open-type="getUserInfo" type='primary' lang="zh_CN" bindgetuserinfo="onGotUserInfo">获取用户信息</button>
<!-- 分割线 -->
<view class='fengexian'></view>
<!-- 联系客服 -->
<view class='kefu' bindtap='qukefuye'>
<text>联系客服</text>
</view>
<!-- 分割线 -->
<view class='fengexian'></view>
<!-- 反馈与建议 -->
<button class='button' open-type="feedback">
<text class='button_title'>反馈建议</text>
</button>
- me.wxss
/* pages/me/me.wxss */
page {
background: gainsboro;
}
.touxiang {
width: 100px;
height: 100px;
border-radius: 100px;
}
.top {
display: flex;
flex-direction: column;
align-items: center;
background: white;
}
.name {
margin-top: 20px;
font-size: 20px;
margin-bottom: 20px;
color: red;
}
.fengexian {
width: 100%;
height: 5px;
background: gainsboro;
}
/* 联系客服的样式 */
.kefu {
width: 100%;
background: white;
padding: 10px;
}
/* 反馈与建议的样式 */
.button {
width: 100%;
background: white;
border: none;
text-align: left;
padding: 7px 10px;
margin: 0px;
line-height: 1.6;
border-radius: 0;
}
.button::after {
border: none;
border-radius: 0;
}
.button_title {
font-size: 1rem;
}
网友评论