微信小程序 — 小程序反馈与建议功能 及 小程序button按钮去除默认样式

 

这节给大家讲解小程序 反馈与建议功能的实现。

我们做小程序难免会遇到一些未知的问题，这个时候给用户提供一个反馈与建议功能就显得至关重要了。这一节来带领大家实现小程序的反馈与建议功能。

先看效果图

还是老规矩，我们学习这节之前，先带领大家去熟悉下相关的官方文档。
“官方文档永远是最好的老师”
https://developers.weixin.qq.com/miniprogram/dev/component/button.html
我们需要实现的反馈与建议功能是小程序官方为我们提供的一个开发能力，所以我们要要做的就是调起微信官方的“反馈与建议功能”
调起官方提供的功能，我们通常用button按钮来实现，botton按钮有一个open-type属性，open-type就是微信官方提供的开发能力。

 

open-type官方目前开发的功能如下

 

这节我们使用feedback功能来实现反馈与建议。下面开发教大家实现步骤。

 

一，个人中心添加反馈与建议模块

如上图所示，我们在代码的me.wxml里添加

<button class='button' open-type="feedback">
 反馈与建议
</button>

这就是调起反馈与建议开发功能的关键。
反馈与建议功能我们用模拟器是没有办法调起来的 所以我们要用手机微信来预览该功能。步骤就是，点击开发者功能的预览---》出现如下图的二维码----》用手机微信扫描二维码即可。

预览
然后到个人中心点击反馈与建议按钮，就可以调起反馈与建议的功能了。

• 1，反馈与建议功能页

   

  

  功能页

• 2，我们这里提一条建议，在小程序后台可以看到用户提的这条建议。

   

  

  

   

  提交成功

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

 

如果此文对你有帮助请点赞或者打赏哦 ^-^