关于微信小程序的客服，自带的有两种模式。一种是自定义配置客服人员的微信，将小程程序中的消息传入各个客服的微信中。另一种是在设置--消息推送中进行配置。需要注意的是，这两种模式不能共存，如果配置消息推送，则会将小程序收到的所有信息，传入配置的接口中。

本文不讨论以上两种方式。因为使用消息推送，对接口的格式有要求。而公司原先就有智能客服的接口，并正在使用不方便更改。且该接口并不适合接收所有来自小程序的消息。因此，是采用普通request的方式请求接口，借用环信的界面，稍加修改做成的智能客服

image.png

好了，下面才是正经事儿。

image.png

环信的Demo做的是即时通讯的功能，而我的只是用户对机器人的简单问答，所以要删减的还是很多的，代码是在用的代码，公司的接口不方便PO。

<!--pages/robot-service/robot-service.wxml-->
<view class="main">
<!--对话框内容  -->
    <scroll-view scroll-y="true" class="scroll_view" scroll-into-view="{{ toView }}">
        <view class="message" wx:for="{{ chatMsg }}"  wx:key="{{mid}}" id="{{item.mid}}">
            <view class="main" class="{{ item.type==1?'self':null }}">
                <view class="user">
                    <text>{{ item.username }}</text>
                </view>
                <image class="avatar" src="../../images/number.png"/>
                <view class="msg">
                   <view wx:if="{{item.type==2}}"  wx:for-item="answer" wx:for="{{item.data}}">
                    <view data-web-url="{{answer.dizhi}}" bindtap="toWebview" style="margin-top: 2px;">{{ index+1 +"."+ answer.title }}</view>
                  </view> 
                  <text wx:if="{{item.type==1}}" style="float: left;margin-top: 2px;">{{ item.data }}</text>
                </view>
            </view>
        </view>
    </scroll-view>

<!--输入框和发送按钮  -->
    <view class="room_bar">
        <form>
            <view class="f-row">
                <input class="f news" type="text" value="{{ inputMessage }}"
                       placeholder="输入新消息" placeholder-style="color:#CFCFCF;padding-left:5px;" bindinput="bindMessage"/>
                <button class="send_btn" bindtap="sendMessage" formType="reset">发送</button>
            </view>
        </form>
    </view>
</view>

// pages/robot-service/robot-service.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    myName:'',//用户名
    chatMsg:[],//对话框中的聊天内容
    userMessage:'',//输入框中的内容
    toView: ''//对话框中最后一条会话id，将对话框定位滑动到新消息位置
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let _this = this;
    let myName = options.username; //获取用户名
    _this.setData({
      myName: myName
    })
  },
  bindMessage: function (e) {
    this.setData({
      userMessage: e.detail.value
    })
  },
  sendMessage: function () {
    if (!this.data.userMessage.trim()) return;
    let date = new Date();
    let _this = this;
    let chatMsg = _this.data.chatMsg;
    let msgData = {
      username: _this.data.myName,
      data: _this.data.userMessage,
      type:1,
      mid: 'chat_' + date.getTime()
    };
    chatMsg.push(msgData);
    _this.setData({
      chatMsg: chatMsg
    });
    _this.receiveMsg(msgData.data);
    setTimeout(function () {
      _this.setData({
        toView: chatMsg[chatMsg.length - 1].mid
      })
    }, 100)
    _this.setData({
      userMessage: ''
    });
  },
  receiveMsg: function (queryValue) {
    let date = new Date();
    let _this = this;
    let msgData = {};
    let chatMsg = _this.data.chatMsg;
    wx.request({
      url: '获取问题答案的接口',
      data: {
        action: 'search',
        queryValue: queryValue
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (ret) {
        let searchValue = ret.data;
        if(!searchValue.data.searchResList.length){
          msgData = {
            username: '智能客服',
            data: [{id:0,title:'没有找到相关数据',dizhi:''}],
            type: 2,
            mid: 'chat_' + date.getTime()
          };
        } else {
          msgData = {
            username: '智能客服',
            data: searchValue.data.searchResList,
            type: 2,
            mid: 'chat_' + date.getTime()
          };
        };
        chatMsg.push(msgData);
        _this.setData({chatMsg: chatMsg});
        setTimeout(function () {
          _this.setData({
            toView: chatMsg[chatMsg.length - 1].mid
          })
        }, 100);
      },
      fail: function () {
        msgData = {
          username: '智能客服',
          data: [{ id: 0, title: '答案走丢了，请稍后再试', dizhi: '' }],
          type: 2,
          mid: 'chat_' + date.getTime()
        };
        chatMsg.push(msgData);
        _this.setData({ chatMsg: chatMsg });
      }
    })
  },
  toWebview:function(event){
    let url = event.currentTarget.dataset.webUrl;
    url ?
      wx.navigateTo({
        url: '../../pages/web-view/web-view?url=' + url,
      })
      : wx.showToast({
        title: "无详情页",
        icon: 'none'
      })
  }
})

/* pages/robot-service/robot-service.wxss */

.f-row {
  display: flex;
  flex-direction: row;
}

.main {
  width: 100%;
  height: 50%;
}

.scroll_view, .scroll_view_change {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 75px;
}

.scroll_view_change {
  bottom: 220px;
}

.message {
  width: 92%;
  height: auto;
  padding: 10px 15px;
}

.user text {
  margin: auto auto 4px 0;
  font-size: 12px;
  color: #dcdcdc;
  display: block;
}

.avatar {
  width: 32px;
  height: 30px;
  margin: 0 10px 0 0;
  padding-top: 3px;
  border-radius: 3px;
  float: left;
}

.msg {
  display: inline-block;
  position: relative;
  padding: 5px 10px;
  max-width: calc(85% - 40px);
  font-size: 12px;
  overflow: hidden;
  text-align: left;
  word-break: break-all;
  background-color: #EDEDED;
  border-radius: 4px;
}

.msg text {
  line-height: 1.5;
}

.msg :before {
  content: " ";
  position: absolute;
  top: 9px;
  right: 100%;
  border: 6px solid transparent;
  border-right-color: #EDEDED;
}

.self {
  text-align: right;
}

.self .avatar {
  float: right;
  margin: 0 0 0 10px;
}

.self .user {
  margin: auto 2px 4px auto;
  font-size: 12px;
  color: #dcdcdc;
}

.self .msg {
  background-color: #b2e281;
}

.self .msg :before {
  right: inherit;
  left: 100%;
  border-right-color: transparent;
  border-left-color: #b2e281;
}

.room_bar {
  width: 100%;
  height: auto;
  border-top: 1px solid #CFCFCF;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1;
  background-color: #FFFFFF;
}

.send_btn {
  width: 40px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #000;
  padding: 0;
  margin: 4px 8px auto auto;
  background-color: #fff;
}

.room_bar form {
  width: 100%;
  height: 40px;
  padding: 0;
  display: block;
}

.news {
  width: 79%;
  height: 30px;
  border: 1px solid #CFCFCF;
  border-radius: 5px;
  font-size: 14px;
  padding-left: 4px;
  margin: 4px 2px 4px 6px;
}