论坛 › 鸿蒙 › 【环信uniapp uikit】手把手教你uniapp uikit运行到鸿蒙

饭宝 发表于 2025-1-21 16:52:50

【环信uniapp uikit】手把手教你uniapp uikit运行到鸿蒙

写在前面：

好消息好消息，环信uniapp出uikit啦～
更好的消息，环信uniapp sdk也支持鸿蒙系统啦！！！！那么我们一起来看看uniapp uikit如何运行到鸿蒙系统～～let’s go
   uniapp uikit以及支持鸿蒙系统的uniapp sdk版本都是4.11.0
准备工作

1. HBuilderX 4.36

2. DevEco-Studio 5.0.5.310

3. sass：sass-loader 10.1.1 及之前版本

4. node：12.13.0 - 17.0.0，推荐 LTS 版本 16.17.0

5. npm：版本需与 Node.js 版本匹配

6. 已经在环信即时通讯云控制台创建了有效的环信即时通讯 IM 开发者账号，并获取了 App Key

7. 相识uniapp创建运行鸿蒙系统

8. 相识uniapp UIkit各功能以及api调用

开始集成：

第一步：创建一个uniapp+vue3项目进度10%

https://i-blog.csdnimg.cn/direct/6e8ad445013042409628a9bd07bd7d5d.jpeg#pic_center
第二步：安装依赖进度15%

npm init -y
npm i easemob-websdk@4.11.0 pinyin-pro@3.26.0 mobx@6.13.4 --save
第三步：下载uniapp uikit源码进度20%

git clone https://github.com/easemob/easemob-uikit-uniapp.git
第四步：拷贝uikit组件进度50%

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

# windows
move ${组件项目路径}/ChatUIKit/* .\ChatUIKit
https://i-blog.csdnimg.cn/direct/a9ca29f3db3e4f4db5f285595f8edb5a.png#pic_center
第五步：替换pages/index/index.vue文件进度70%

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


第六步：替换app.vue文件进度80%

<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.json设置路由进度90%

{
"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"
                                }
                        }
                }
]
}

第八步：运行到chrome浏览器看下结果进度90%

https://i-blog.csdnimg.cn/direct/8cd1d1ab642941bd85c4f7b8a3337039.png#pic_center
https://i-blog.csdnimg.cn/direct/15b13637bdb5488b89b0875d09080d9f.png#pic_center
第九步：运行到鸿蒙并发送一条消息进度100%

https://i-blog.csdnimg.cn/direct/2cff1fea33764d949d7de51bc96cdc85.png#pic_center
https://i-blog.csdnimg.cn/direct/b86987e8c5234ab1a5ad27de7ceb547f.png#pic_center
遇到的标题：

标题1:

具体报错信息如下
hvigor ERROR: Invalid product for target ‘default’.
Detail: Check the target applyToProducts field for ‘default’: [ ‘default’, ‘release’ ].
at /Users/admin/Desktop/ouyeel_worksheet/unpackage/debug/app-harmony-2f573459/build-profile.json5
办理方案：

   在harmony-configs/build-profile.json5文件，复制default设置，将default改为relese，参考
https://i-blog.csdnimg.cn/direct/2df9c6f9931c4c07861379c977c5bd91.png#pic_center
标题2:

登录报错
https://i-blog.csdnimg.cn/direct/372b04d4792947b3a0b837e5bad0c5b6.png#pic_center
办理方案：

   在/harmony-configs/entry/src/main/module.json5文件添加以下代码
    "requestPermissions": [
              {"name": "ohos.permission.GET_NETWORK_INFO"},
              {
                "name": "ohos.permission.INTERNET"},
          ],
https://i-blog.csdnimg.cn/direct/740ecb6b4fef48058dd5ae6914f91441.png#pic_center
标题3:

HBuilderX无限重连
https://i-blog.csdnimg.cn/direct/2ad6d5f0ba3a426f823b2789ca5848b5.png#pic_center
办理方案：

   看看sdk 是不是最新版，无限重连的标题已经在 4.12.0版本的sdk修复～
总结：

初步运行到鸿蒙的话标题会比较多，大家可以善用百度大法办理掉它！！！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

查看完整版本: 【环信uniapp uikit】手把手教你uniapp uikit运行到鸿蒙