技術小白之記錄微信小程式客服功能
程式做到上線,必不可缺的便是使使用者在使用你製作的程式時,能夠反饋回一些建議,這就需要客服的功能了。
客服功能,官方微信上有提供專門的元件,如下:
客服訊息會話入口有兩個:
1、小程式內:開發者在小程式內新增客服訊息按鈕元件,使用者可在小程式內喚起客服會話頁面,給小程式發訊息;
2、已使用過的小程式客服訊息會聚合顯示在微信會話“小程式客服訊息”內,使用者可以在小程式外檢視歷史客服訊息,並給小程式客服發訊息。
具體介紹官方網址:
https://developers.weixin.qq.com/miniprogram/introduction/custom.html#功能介紹
wxml
<contact-button type="default-dark" size="20" session-from="weapp">
<contact-button/>
上述一段程式碼就可以做出簡單的客服功能,不過用上述程式碼客服圖示不能改變
contact-button:客服會話按鈕,用於在頁面上顯示一個客服會話按鈕,使用者點選該按鈕後會進入客服會話。
size:會話按鈕大小,有效值 18-27,單位:px
type:會話按鈕的樣式型別,有效值(default-dark /default-light)
session-from:使用者從該按鈕進入會話時,開發者將收到帶上本引數的事件推送。本引數可用於區分使用者進入客服會話的來源。
下面來記錄下,可以有多種圖案的自定義客服會話按鈕:
wxml
<button class="cs_button" open-type="contact" session-from="weapp">
<image src="{{imageUrl}}" mode="aspectFill" class='cs_image'>
</image>
</button>
利用 open-type=“contact” 實現會話功能。
image裡的src表示的便是你所希望的按鈕圖示圖案,
mode=“aspectFill” 保持縱橫比縮放圖片,只保證圖片的短邊能完全顯示出來。或mode=“Widthfix”寬度不變,高度自動變化,保持原圖寬高比不變。
”剩下的class中的內容便是wxss的內容,用來顯示圖示的位置大小狀態等。
上述程式碼中的src是採用js來獲取本地圖片的,程式碼如下:
Page({
data: {
imageUrl: "/img/kf.png",
}
}
)
wxss
.cs_button {
background-color: #fff;
border: 0px;
height: 50px;
width: 65px;
position: fixed;
top:350px;
right: 50px;
margin-right: 0rpx;
opacity: 0.5; //透明度
}
.cs_image {
width: 100rpx;
height: 40px;
margin-top: 5px;
}
重點:上述的客服,只有使用者可以用手機微信來提問,而釋出人用手機微信無法接收資訊,只有在指定的微信小程式官網中的客服反饋中的客服人員進行繫結後,登入網頁版的線上客服功能,才能進行交流。(感覺不是很方便,不知是否有其他的方法可以在手機微信上就能接收使用者反饋資訊呢?)
注:上述有錯誤理解的請及時留言,留下你寶貴的想法!謝謝~