主要思想使用websocket,微信小程序有提供websocket的直接方法,所有问题的难点在于后端代码的编写。
效果示意图
演示视频地址 https://www.bilibili.com/video/av57449552/
长话短说直接上代码
微信小程序端代码
<!--pages/chat/chat.wxml-->
<!--显示咨询医生--->
<view class='title'>
<label style='margin-left:30rpx'>您选择的咨询医生:
<label style="color:#099594">{
{doctorInfo.name}}</label>
</label>
</view>
<scroll-view class='chatPage' scroll-y style='height:{
{scrollHeight}}px'
scroll-top="{
{scrollTop}}" scroll-into-view="{
{lastId}}">
<block wx:for-items="{
{messages}}" wx:key='id' wx:for-index="index">
<view id="msg{
{index}}" class='container-left' wx:if="{
{item.msgType==0}}">
<image class='cover' src='{
{doctorInfo.url}}'></image>
<view class='bubble'>
<view class='caret-left'></view>
<view class='bubble1'><label style='margin-left:10px;margin-right:30rpx;'>{
{item.msg}}</label></view>
</view>
</view>
<view id="msg{
{index}}" class='container-right' wx:else>
<view class='bubble'>
<view class='bubble2'><label style='margin-left:10px;margin-right:10px;'>{
{item.msg}}</label></view>
<view class='caret-right'></view>
</view>
<view class='cover'></view>
</view>
</block>
</scroll-view>
<!--输入框组件-->
<view class='messageInfo'>
<image src='../../images/keyboard.png' class='icon' hidden='{
{flag}}' bindtap='changeShowStatus'></image>
<image src='../../images/voice.png' class='icon' hidden='{
{!flag}}' bindtap='changeShowStatus'