Rumah > Artikel > hujung hadapan web > 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:
3. Pelaksanaan Fungsi
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.
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.
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="['chat-message',userOpenid===message.openid?'right':'left']"> <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==='text'">{{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!