Bagaimana untuk melaksanakan sesi dalam uniapp

Dengan perkembangan pesat industri Internet mudah alih, fungsi sembang telah menjadi salah satu fungsi tetap banyak APP, dan perbualan adalah asas untuk sembang. Semasa saya mempelajari teknologi uniapp baru-baru ini, saya mendapati bahawa uniapp juga menyediakan API yang kaya yang boleh melaksanakan fungsi sesi dengan mudah. Di sini, digabungkan dengan pengalaman pembelajaran pengarang, saya akan berkongsi cara uniapp melaksanakan perbualan.

1. Konsep asas

Sebelum kita mula melaksanakan fungsi perbualan, mari kita fahami konsep asas perbualan. Sesi ialah satu siri proses interaktif antara objek sesi dari awal hingga akhir. Dalam aplikasi sembang, objek perbualan biasanya termasuk rekod sembang antara dua atau lebih orang, disusun dalam susunan kronologi.

2. Pembinaan Projek

Artikel ini akan menggunakan rangka kerja uniapp dan persekitaran uniCloud sebagai contoh untuk memperkenalkan proses pelaksanaan sesi. Pertama, kita perlu membina projek uniapp. Langkah khusus adalah seperti berikut:

1. Buat projek uniapp baharu dalam HBuilderX dan pilih uniCloud sebagai persekitaran pelayan.
2. Dalam fail manifest.json, konfigurasikan kebenaran permintaan rangkaian, gaya bar navigasi, dsb.
3. Dalam folder halaman, cipta folder sembang baharu untuk menyimpan halaman dan komponen berkaitan sembang.

3. Pelaksanaan Fungsi

1. Pengesahan Log Masuk

Sebelum melaksanakan fungsi sesi, kita perlu melakukan operasi pengesahan log masuk terlebih dahulu. uniCloud menyediakan dua kaedah log masuk dengan akaun dan kata laluan dan log masuk WeChat. Kami boleh membuat pilihan yang sepadan pada halaman log masuk dan memanggil API uniCloud untuk menyelesaikan operasi log masuk. Selepas log masuk berjaya, maklumat ahli disimpan secara tempatan atau dalam uniCloud.

2. Dapatkan senarai sembang

Mendapatkan senarai sembang ialah langkah penting untuk melaksanakan fungsi perbualan. Dalam artikel ini, kami akan menggunakan fungsi awan yang disediakan oleh uniCloud untuk melaksanakannya. Mula-mula, buat fungsi awan baharu dalam platform uniCloud dan namakannya "getChatList". Dalam fungsi awan, kami boleh menanyakan maklumat senarai sembang pengguna dan mengembalikan data dalam format JSON ke bahagian hadapan.

Contoh kod fungsi awan:

'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
};

Di halaman hujung hadapan, kami boleh memanggil API fungsi awan uniCloud untuk mendapatkan data senarai sembang. Dalam folder sembang, cipta fail chatlist.vue baharu untuk memaparkan senarai sembang pengguna. Gunakan komponen uni-list untuk memaparkan senarai sembang.

3. Melaksanakan halaman sembang

Apabila mengklik pada rekod sembang dalam senarai sembang, kita perlu memasuki halaman sembang dan memaparkan kandungan sembang. Dalam folder sembang, kami mencipta fail chat.vue baharu untuk melaksanakan fungsi interaksi sembang. Langkah pelaksanaan khusus adalah seperti berikut:

(1) Dengan menghantar maklumat pengguna dan maklumat objek sembang, panggil fungsi awan untuk mendapatkan rekod sembang dan paparkannya.

(2) Gunakan komponen uni-input untuk melaksanakan kotak input mesej.

(3) Gunakan komponen uni-list dan komponen uni-message untuk melaksanakan paparan senarai mesej.

(4) Laksanakan fungsi penghantaran mesej dengan memanggil fungsi awan, dan paparkan mesej dalam halaman sembang dalam masa nyata.

Contoh kod halaman sembang:

<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>

4. Ringkasan

Melalui pengenalan artikel ini, kami memahami cara uniapp melaksanakan fungsi perbualan dan menunjukkan cara melaksanakan kod khusus halaman sembang. Semasa proses pembangunan sebenar, kami juga boleh mengembangkan dan mengoptimumkan fungsi ini mengikut keperluan kami sendiri. Saya harap ia dapat membantu semua orang dalam pembangunan uniapp.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan sesi dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!