微信小程序仿微信聊天

最新推荐文章于 2024-01-26 11:04:21 发布

lois_wjj

最新推荐文章于 2024-01-26 11:04:21 发布

阅读量3.7k

点赞数 5

分类专栏：微信小程序文章标签：微信小程序 websocket

本文链接：https://blog.csdn.net/lois_wjj/article/details/94381151

版权

本文介绍了如何使用微信小程序内置的websocket功能实现仿微信聊天应用。文章提供了前端代码示例，并指出后端代码编写是难点。虽然无法展示完整源码，但分享了遇到的问题和解决思路。

摘要由CSDN通过智能技术生成

主要思想使用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'