uniappでセッションを実装する方法-uni-app-php.cn

uniappでセッションを実装する方法

PHPz

リリース： 2023-04-06 10:44:11

オリジナル

933 人が閲覧しました

モバイルインターネット業界の急速な発展に伴い、チャット機能は多くの APP の標準機能の 1 つとなり、会話はチャットの基礎です。最近 uniapp テクノロジーを学習しているときに、uniapp がセッション関数を簡単に実装できる豊富な API も提供していることを知りました。ここでは、著者の学習経験と組み合わせて、uniapp が会話を実装する方法を共有します。

1. 基本概念

セッション機能の実装を始める前に、セッションの基本概念を理解しましょう。セッションは、セッションオブジェクト間の最初から最後までの一連の対話型プロセスです。チャットアプリケーションでは、通常、会話オブジェクトには、時系列に並べられた 2 人以上の人々の間のチャット記録が含まれます。

2. プロジェクトの構築

この記事では、uniapp フレームワークと uniCloud 環境を例として、セッションの実装プロセスを紹介します。まず、uniapp プロジェクトを構築する必要があります。具体的な手順は次のとおりです。

HBuilderX で新しい uniapp プロジェクトを作成し、サーバー環境として uniCloud を選択します。
manifest.json ファイルで、ネットワークリクエストのアクセス許可とナビゲーションバーのスタイルを構成します。
ページフォルダーに、チャット関連のページとコンポーネントを保存するための新しいチャットフォルダーを作成します。

3. 関数の実装

ログイン認証

セッション関数を実装する前に、まずログイン認証操作を実行する必要があります。 uniCloud では、アカウントとパスワードを使用したログインと WeChat ログインの 2 つの方法が提供されます。ログインページで対応する選択を行い、uniCloud の API を呼び出してログイン操作を完了します。ログインに成功すると、メンバー情報はローカルまたは uniCloud に保存されます。

チャットリストの取得

チャットリストの取得は、会話機能を実装するための重要な手順です。今回は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 を呼び出してチャットリストデータを取得できます。チャットフォルダーに、ユーザーのチャットリストを表示するための新しい chatlist.vue ファイルを作成します。 uni-list コンポーネントを使用してチャットリストをレンダリングします。

チャットページの実装

チャットリスト内のチャットレコードをクリックすると、チャットページに入り、チャットの内容を表示する必要があります。チャットフォルダー内に、チャットインタラクション機能を実装するための新しい 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>

ログイン後にコピー

IV. 概要

この記事の導入を通じて、uniapp がセッション関数を実装する方法を理解し、セッション関数を実装するための特定のコードを示します。チャットページ。実際の開発プロセスでは、必要に応じてこれらの機能を拡張および最適化することもできます。 uniapp開発の皆様のお役に立てれば幸いです。

以上がuniappでセッションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。