So implementieren Sie eine Sitzung in Uniapp

Mit der rasanten Entwicklung der mobilen Internetbranche ist die Chat-Funktion zu einer der regulären Funktionen vieler APPs geworden und Konversation ist die Grundlage für den Chat. Als ich kürzlich die Uniapp-Technologie erlernte, stellte ich fest, dass Uniapp auch eine umfangreiche API bietet, mit der sich Sitzungsfunktionen problemlos implementieren lassen. In Kombination mit der Lernerfahrung des Autors werde ich hier erläutern, wie Uniapp Konversationen implementiert.

1. Grundkonzepte

Bevor wir mit der Implementierung der Konversationsfunktion beginnen, wollen wir die Grundkonzepte der Konversation verstehen. Eine Sitzung ist eine Reihe von Interaktionen zwischen einem Sitzungsobjekt vom Anfang bis zum Ende. In Chat-Anwendungen enthält ein Konversationsobjekt normalerweise Chat-Aufzeichnungen zwischen zwei oder mehr Personen, die in chronologischer Reihenfolge angeordnet sind.

2. Projektkonstruktion

In diesem Artikel werden das Uniapp-Framework und die UniCloud-Umgebung als Beispiel verwendet, um den Sitzungsimplementierungsprozess vorzustellen. Zuerst müssen wir ein Uniapp-Projekt erstellen. Die spezifischen Schritte sind wie folgt:

1. Erstellen Sie ein neues Uniapp-Projekt in HBuilderX und wählen Sie uniCloud als Serverumgebung aus.
2. Konfigurieren Sie in der Datei manifest.json Netzwerkanforderungsberechtigungen, Navigationsleistenstil usw.
3. Erstellen Sie im Seitenordner einen neuen Chat-Ordner, um chatbezogene Seiten und Komponenten zu speichern.

3. Funktionsimplementierung

1. Anmeldeauthentifizierung

Bevor wir die Sitzungsfunktion implementieren, müssen wir zuerst den Anmeldeauthentifizierungsvorgang durchführen. uniCloud bietet zwei Anmeldemethoden mit Konto und Passwort sowie WeChat-Anmeldung. Auf der Anmeldeseite können wir entsprechende Auswahlen treffen und die API von uniCloud aufrufen, um den Anmeldevorgang abzuschließen. Nach erfolgreicher Anmeldung werden die Mitgliedsinformationen lokal oder in uniCloud gespeichert.

2. Chat-Liste abrufen

Das Abrufen der Chat-Liste ist ein wichtiger Schritt zur Implementierung der Konversationsfunktion. In diesem Artikel verwenden wir zur Implementierung die von uniCloud bereitgestellten Cloud-Funktionen. Erstellen Sie zunächst eine neue Cloud-Funktion in der uniCloud-Plattform und nennen Sie sie „getChatList“. In der Cloud-Funktion können wir die Chatlisteninformationen des Benutzers abfragen und Daten im JSON-Format an das Frontend zurückgeben.

Beispiel für einen Cloud-Funktionscode:

'use strict';
const db = uniCloud.database()
exports.main = async (event, context) => {
  const collection = db.collection('chatList')
  const res = await collection.where({
    openid: event.openid
  }).get()
  return res.data
};

Auf der Front-End-Seite können wir die Cloud-Funktions-API von uniCloud aufrufen, um Chatlistendaten abzurufen. Erstellen Sie im Chat-Ordner eine neue Datei chatlist.vue, um die Chat-Liste des Benutzers anzuzeigen. Verwenden Sie die Uni-List-Komponente, um die Chat-Liste zu rendern.

3. Implementieren der Chat-Seite

Wenn wir auf einen Chat-Datensatz in der Chat-Liste klicken, müssen wir die Chat-Seite aufrufen und den Chat-Inhalt anzeigen. Im Chat-Ordner erstellen wir eine neue chat.vue-Datei, um die Chat-Interaktionsfunktion zu implementieren. Die spezifischen Implementierungsschritte lauten wie folgt:

(1) Rufen Sie durch Übergabe von Benutzerinformationen und Chat-Objektinformationen die Cloud-Funktion auf, um den Chat-Datensatz abzurufen und anzuzeigen.

(2) Verwenden Sie die Uni-Input-Komponente, um das Nachrichteneingabefeld zu implementieren.

(3) Verwenden Sie die Uni-List-Komponente und die Uni-Message-Komponente, um die Anzeige der Nachrichtenliste zu implementieren.

(4) Implementieren Sie die Funktion zum Senden von Nachrichten durch Aufrufen von Cloud-Funktionen und zeigen Sie die Nachricht in Echtzeit auf der Chat-Seite an.

Chat-Seitencode-Beispiel:

<template>
  <view class="chat-page">
    <view class="chat-messages">
      <view v-for="(message,index) in messages" :key="index" :class="[&#39;chat-message&#39;,userOpenid===message.openid?&#39;right&#39;:&#39;left&#39;]">
        <view v-if="userOpenid!==message.openid" class="avatar">
          <image class="avatar-img" :src="friendInfo.avatarUrl"></image>
        </view>
        <view class="message-info">
          <view class="message-content">
            <template v-if="message.type===&#39;text&#39;">{{message.content}}</template>
          </view>
        </view>
        <view v-if="userOpenid===message.openid" class="avatar">
          <image class="avatar-img" :src="userInfo.avatarUrl"></image>
        </view>
      </view>
    </view>
    <view class="chat-input">
      <uni-input type="text" v-model="inputContent" @confirm="sendMessage" placeholder="请输入"/> 
    </view>
  </view>
</template>
<script>
import { uniCloud } from 'wx-resource'
import { mapState } from 'vuex'
import socket from '@/utils/socket.js'
export default {
  data() {
    return {
      messages: [],
      inputContent: ''
    }
  },
  computed: {
    ...mapState(['userInfo','friendInfo'])
  },
  onLoad() {
    this.getChatList()
  },
  methods: {
    async getChatList() {
      const res = await uniCloud.callFunction({
        name: 'getChatList',
        data: {
          openid: this.userInfo.openid,
          friendOpenid: this.friendInfo.openid
        }
      })
      this.messages = res.result
    },
    async sendMessage() {
      if (this.inputContent === '') {
        return
      }
      socket.emit('chat message', {
        openid: this.userInfo.openid,
        friendOpenid: this.friendInfo.openid,
        content: this.inputContent.trim(),
        type: 'text'
      })
      this.inputContent = ''
    }
  },
  created() {
    socket.on('chat message', message => {
      this.messages.push(message)
    })
  }
}
</script>

<style>
.chat-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.chat-messages {
  flex: 1;
  overflow-y: scroll;
}
.chat-message {
  display: flex;
  margin: 10px;
  max-width: 60%;
}
.chat-message .avatar {
  margin-right: 10px;
}
.chat-message .message-info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-grow: 1;
  max-width: 80%;
}
.chat-message.right .message-info {
  align-items: flex-end;
}
.chat-message .avatar-img {
  display: block;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.message-content {
  word-wrap: break-word;
  white-space: pre-wrap;
  background-color: #eee;
  padding: 7px;
  border-radius: 10px;
}
.chat-input {
  padding: 10px;
  background: #fff;
}
</style>

IV. Durch die Einleitung dieses Artikels verstehen wir, wie Uniapp die Sitzungsfunktion implementiert und zeigen den spezifischen Code zur Implementierung der Chat-Seite. Während des eigentlichen Entwicklungsprozesses können wir diese Funktionen auch nach unseren eigenen Bedürfnissen erweitern und optimieren. Ich hoffe, dass es für alle in der Uniapp-Entwicklung hilfreich sein kann.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Sitzung in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!