【环信uniapp uikit】手把手教你uniapp uikit运行到鸿蒙 - IT评测·应用市场-qidao123.com

npm init -y
npm i easemob-websdk@4.11.0 pinyin-pro@3.26.0 mobx@6.13.4 --save

复制代码

git clone https://github.com/easemob/easemob-uikit-uniapp.git

复制代码

mkdir -p ./ChatUIKit
# macOS
mv ${组件项目路径}/ChatUIKit/* ./ChatUIKit
# windows
move ${组件项目路径}/ChatUIKit/* .\ChatUIKit

复制代码

<template>
<view class="index">
<view class="login-form">
<input
class="input-field"
type="text"
v-model="userId"
placeholder="请输入用户ID"
/>
<input
class="input-field"
type="password"
v-model="password"
placeholder="请输入密码"
/>
<view class="login-button" @click="handleLogin">登录</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const userId = ref("");
const password = ref("");
const id = ""; // 用户 ID 或者群组 ID
const type = ""; // 会话类型：单聊 singleChat，群聊为 groupChat
const handleLogin = () => {
if (!userId.value || !password.value) {
uni.showToast({
title: "请输入用户ID和密码",
icon: "none"
});
return;
}
// 登录
uni.$UIKit.chatStore
.login({
user: userId.value,
pwd: password.value
})
.then(() => {
// 登录成功跳转聊天页面
uni.navigateTo({
url: `/ChatUIKit/modules/Chat/index?id=${id}&type=${type}`
});
})
.catch((error) => {
console.error("登录失败", error);
});
};
// 退出登录
const logout = () => {
uni.$UIKit.chatStore.logout();
};
</script>
<style lang="scss" scoped>
.index {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
.login-form {
width: 80%;
max-width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
.input-field {
width: 100%;
height: 40px;
margin-bottom: 15px;
padding: 0 15px;
border: 1px solid #dcdfe6;
border-radius: 4px;
font-size: 14px;
box-sizing: border-box;
&:focus {
border-color: #006eff;
}
}
.login-button {
width: 100%;
padding: 12px 0;
color: #fff;
background-color: #006eff;
font-size: 16px;
border-radius: 4px;
text-align: center;
&:active {
opacity: 0.8;
}
}
}
}
</style>

复制代码

<script lang="ts">
import { ChatUIKit } from "./ChatUIKit";
import websdk from "easemob-websdk/uniApp/Easemob-chat";
import { EasemobChatStatic } from "easemob-websdk/Easemob-chat";
// 创建 IM 实例
const chat = new (websdk as unknown as EasemobChatStatic).connection({
appKey: '', // 应用的 App Key
isHttpDNS: false,
url: '', // 环信 websocket URL
apiUrl: '', // 环信 Restful API URL
delivery: true // 是否开启消息已送达回执
});
// 初始化 ChatUIKit
ChatUIKit.init({
chat, // 传入 IM 实例
config: {
theme: {
// 头像形状：圆形（circle）和方形（square）
avatarShape: "square"
},
isDebug: true // 是否开启调试模式
}
});
uni.$UIKit = ChatUIKit;
export default {
onLaunch: function () {
console.log("App Launch");
},
onShow: function () {
console.log("App Show");
// 在 onShow 中调用 ChatUIKit.onShow() 方法，主动监测 IM 连接状态
ChatUIKit.onShow();
},
onHide: function () {
console.log("App Hide");
}
};
</script>
<style>
/* 通用样式 */
html,body,page {
height: 100%;
width: 100%;
}
</style>

复制代码

{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
},
{
"path": "ChatUIKit/modules/Chat/index",
"style": {
"navigationStyle": "custom",
// #ifdef MP-WEIXIN
"disableScroll": true,
// #endif
"app-plus": {
"bounce": "none",
"softinputNavBar": "none"
}
}
},
{
"path": "ChatUIKit/modules/VideoPreview/index",
"style": {
"navigationBarTitleText": "Video Preview",
"app-plus": {
"bounce": "none"
}
}
}
]
}

复制代码

"requestPermissions": [
{"name": "ohos.permission.GET_NETWORK_INFO"},
{
"name": "ohos.permission.INTERNET"},
],

复制代码