微信小程序仿微信聊天

本文介绍了如何使用微信小程序内置的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'
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值