首頁 > web前端 > uni-app > 主體

uniapp怎麼實現會話

PHPz
發布: 2023-04-06 10:44:11
原創
919 人瀏覽過

隨著行動網路產業的快速發展,聊天功能已經成為了許多APP的常規功能之一,而會話則是實現聊天的基礎。作者最近在學習uniapp技術時,發現uniapp也提供了豐富的API,可以輕鬆實現會話功能。在此,結合筆者的學習經驗,分享uniapp實現會話的方法。

一、 基本概念

在開始實作會話功能之前,我們先來了解會話的基本概念。會話,就是一個會話物件從開始到結束之間的一系列互動過程。在聊天應用程式中,一個會話物件通常包括了兩個人或多個人之間的聊天記錄,以時間順序排列。

二、專案建置

本文將以uniapp框架,結合uniCloud環境為例,介紹會話的實作過程。首先,我們需要建立一個uniapp專案。具體步驟如下:

  1. 在HBuilderX中新建一個uniapp項目,並選擇uniCloud為服務端環境。
  2. 在manifest.json檔案中,設定網路請求權限和導覽列樣式等。
  3. 在pages資料夾中,新建chat資料夾,用來存放聊天相關的頁面和元件。

三、功能實作

  1. 登入認證

在實作會話功能之前,我們需要先進行登入認證作業。 uniCloud提供了帳號密碼登入和微信登入兩種方式。我們可以在登入頁面中進行對應的選擇,呼叫uniCloud的API來完成登入操作。登入成功後,將會員資訊存在本地或uniCloud中。

  1. 取得聊天清單

取得聊天清單是實現會話功能的重要步驟。在本文中,我們將用uniCloud提供的雲端函數來實現。首先,在uniCloud平台中新建一個雲端函數,命名為「getChatList」。在雲端函數中,我們可以查詢使用者的聊天列表信息,透過返回JSON格式的資料給前端。

雲端函數程式碼範例:

'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
};
登入後複製

在前端頁面中,我們可以呼叫uniCloud的雲端函數API來取得聊天清單資料。在chat資料夾中,新建chatlist.vue文件,用於展示使用者的聊天清單。使用uni-list元件實現聊天清單的渲染。

  1. 實作聊天頁面

在點擊聊天清單中某筆聊天記錄時,我們需要進入到聊天頁面,展示聊天內容。在chat資料夾中,我們新建chat.vue文件,用於實現聊天互動功能。具體實現步驟如下:

(1)透過傳入使用者資訊和聊天物件訊息,呼叫雲端函數獲取聊天記錄並展示。

(2)使用uni-input元件實作訊息輸入框。

(3)使用uni-list元件和uni-message元件實作訊息清單展示。

(4)透過呼叫雲端函數實現發送訊息功能,並將訊息即時展示在聊天頁面中。

聊天頁面程式碼範例:

<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>
登入後複製

四、 總結

透過本文的介紹,我們了解了uniapp如何實現會話功能,並展示了實現聊天頁面的具體程式碼。在實際開發過程中,我們也可以根據自身需求來擴充和最佳化這些功能。希望能夠對大家在uniapp開發上有所幫助。

以上是uniapp怎麼實現會話的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板