Das WeChat-Applet implementiert einen einfachen Chatroom

// Seiten/Chat/chat.js
// Holen Sie sich die Mini-Programminstanz let app = getApp();
Seite({

  /**
   * Ausgangsdaten der Seite */
  Daten: {
    Spitzname:'',
    Avatar:'',
    Chatlisten:[
      {
        Spitzname: „小林“,
        Avatar: „https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591617971938&di=30d9f3b49a0d1b27fb4b61ea424f82c9&imgtype=0&src=http%3A%2F%2Fa-ssl.duitang.com%2Fuploads%2Fitem%2F201610%2F07%2F20161007135058_nUxji.jpeg“,
        Inhalt: „Hallo! `
      }
    ],
    imWert:''
  },
  sendMsg:Funktion(){
    lass _this = dies;
    lass obj = {
      Spitzname:_dieser.Daten.Spitzname,
      avatar:_diese.Daten.avatar,
      Inhalt:_diese.Daten.inWert
    };
    lass arr = _this.data.chatlists;
    arr.push(Objekt)
    _this.setData({
      Chatlisten:arr,
      imWert:''
    });

    // Sende den Chat-Inhalt an den Server, kehre nach der Verarbeitung zurück und füge die zurückgegebenen Daten dann in die Chatliste ein},
  getInput:Funktion(e){
    Konsole.log(e.detail.Wert);
    dies.setData({invalue:e.detail.value});
  },

  /**
   * Lebenszyklusfunktion - auf Seitenladen warten*/
  onLoad: Funktion (Optionen) {
    console.log(app.globalData.userInfo.nickName);
    dies.setData({
      Spitzname:app.globalData.userInfo.nickName,
      avatar:app.globalData.userInfo.avatarUrl
    });
  },

  /**
   * Lebenszyklusfunktion - wartet auf den Abschluss der ersten Darstellung der Seite*/
  onReady: Funktion () {

  },

  /**
   * Lebenszyklusfunktion - Seitenanzeige überwachen*/
  onShow: Funktion () {

  },

  /**
   * Lebenszyklusfunktion - Achten Sie auf das Ausblenden von Seiten */
  onHide: Funktion () {

  },

  /**
   * Lebenszyklusfunktion - Deinstallation der Seite überwachen*/
  beimEntladen: Funktion () {

  },

  /**
   * Seitenbezogene Ereignisverarbeitungsfunktion - Achten Sie auf die Pulldown-Aktion des Benutzers */
  onPullDownRefresh: Funktion () {

  },

  /**
   * Die Funktion, die das Bottoming-Ereignis auf der Seite behandelt*/
  onReachBottom: Funktion () {

  },

  /**
   * Der Benutzer klickt auf die obere rechte Ecke, um zu teilen*/
  beiShareAppMessage: Funktion () {

  }
})

<block wx:for="{{chatlists}}" wx:for-index="ind" wx:for-item="chat" wx:key="ind">

<view class="chat self" wx:if="{{nickname == chat.nickname}}">
 <Ansichtsklasse="rechts">
  <Klasse anzeigen="Inhalt">
   {{chat.inhalt}}
  </Ansicht>
 </Ansicht>
 <Ansichtsklasse="links">
  <Bild Klasse="Avatar" src="{{chat.avatar}}"></Bild>
 </Ansicht>
</Ansicht>

<Ansichtsklasse="Chat" wx:else>
 <Ansichtsklasse="links">
  <Bild Klasse="Avatar" src="{{chat.avatar}}"></Bild>
 </Ansicht>
 <Ansichtsklasse="rechts">
  <view class="nickname">{{chat.nickname}}</view>
  <Klasse anzeigen="Inhalt">
      {{chat.inhalt}}
  </Ansicht>
 </Ansicht>
</Ansicht>

</block>


<view class="form">
 <Ansichtsklasse="weui-cell weui-cell_input">
  <input class="weui-input" value="{{invalue}}" bindinput="getInput" placeholder="Bitte geben Sie den Chat-Inhalt ein" />
 </Ansicht>
 <button type="primary" bindtap="sendMsg">Senden</button>
</Ansicht>

/* Seiten/Chat/chat.wxss */
.avatar{
  Breite: 130rpx;
  Höhe: 130rpx;
  Randradius: 50 %;
}


.chat{
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Rand oben: 15px;
}
.selbst{
  Inhalt ausrichten: Flex-Ende;
  Rand oben: 15px;
}

.links{
  Polsterung: 20rpx;
  selbst ausrichten: Flex-Start;
}
.selbst .links{
  Polsterung oben: 0;
}

.Rechts{
  Rand links: 10px;
}
.richtig .Inhalt{
  Hintergrundfarbe: #eee;
  Farbe: #123;
  Schriftgröße: 16px;
  /* Rahmen: 1px durchgezogen #ddd; */
  Polsterung: 10px;
  Zeilenhöhe: 26px;
  Rand rechts: 10px;
  Rahmenradius: 3px;
  Position: relativ;
  Mindesthöhe: 20px;
}
.rechts .content::before{
  Inhalt: ' ';
  Anzeige: Block;
  Breite: 0;
  Höhe: 0;
  Rand: 12px durchgehend transparent;
  Rahmenfarbe rechts: #eee;
  Position: absolut;
  oben: 10px;
  links: -23px;
}
.self .right .content::vor{
  Rand: 0;
}
.selbst .rechts .inhalt::nach{
  Inhalt: ' ';
  Anzeige: Block;
  Breite: 0;
  Höhe: 0;
  Rand: 12px durchgehend transparent;
  Rahmenfarbe links: #1ad409;
  Position: absolut;
  oben: 10px;
  rechts: -23px;

}
.selbst .rechts .inhalt{
  Hintergrundfarbe: #1ad409;
}

.bilden{
  Position: fest;
  unten: 0;
  Hintergrundfarbe: #eee;
  Breite: 750rpx;
  Anzeige: Flex;
  Höhe: 39px;
  Elemente ausrichten: zentrieren;
}
.form input{
  Breite: 600rpx;
  Hintergrundfarbe: #fff;
  Höhe: 36px;
  Zeilenhöhe: 36px;
  Polsterung: 0,5px;
}
Taste{
  Breite: 65rpx;
  Höhe: 36px;
}