技术小白之记录微信小程序客服功能

程序做到上线，必不可缺的便是使用户在使用你制作的程序时，能够反馈回一些建议，这就需要客服的功能了。


客服功能，官方微信上有提供专门的组件，如下：
客服消息会话入口有两个：
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;
}

重点：上述的客服，只有用户可以用手机微信来提问，而发布人用手机微信无法接收信息，只有在指定的微信小程序官网中的客服反馈中的客服人员进行绑定后，登入网页版的在线客服功能，才能进行交流。（感觉不是很方便，不知是否有其他的方法可以在手机微信上就能接收用户反馈信息呢？）
注：上述有错误理解的请及时留言，留下你宝贵的想法！谢谢~