我們做小程序難免會遇到一些未知的問題，這個時候給用戶提供一個反饋與建議功能就顯得至關重要了。這一節來帶領大家實現小程序的反饋與建議功能。
還是老規矩，我們學習這節之前，先帶領大家去熟悉下相關的官方文檔。
“官方文檔永遠是最好的老師”
https://developers.weixin.qq.com/miniprogram/dev/component/button.html
我們需要實現的反饋與建議功能是小程序官方爲我們提供的一個開發能力，所以我們要要做的就是調起微信官方的“反饋與建議功能”
調起官方提供的功能，我們通常用button按鈕來實現，botton按鈕有一個open-type屬性，open-type就是微信官方提供的開發能力。
open-type官方目前開發的功能如下
我們在第4天課程的獲取用戶信息章節登陸與授權一節，有用button的open-type下的getUserInfo功能來獲取用戶信息。這節我們使用feedback功能來實現反饋與建議。下面開發教大家實現步驟。
一，個人中心添加反饋與建議模塊
如上圖所示，我們在第5天代碼的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;
}