【环信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%

第二步：安装依赖进度15%

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

复制代码

第三步：下载uniapp uikit源码进度20%

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

复制代码

第四步：拷贝uikit组件进度50%

1.   mkdir -p ./ChatUIKit
2.   # macOS
3.   mv ${组件项目路径}/ChatUIKit/* ./ChatUIKit
4.   
5.   # windows
6.   move ${组件项目路径}/ChatUIKit/* .\ChatUIKit

复制代码

第五步：替换pages/index/index.vue文件进度70%

1. <template>
2.   <view class="index">
3.     <view class="login-form">
4.       <input
5.         class="input-field"
6.         type="text"
7.         v-model="userId"
8.         placeholder="请输入用户ID"
9.       />
10.       <input
11.         class="input-field"
12.         type="password"
13.         v-model="password"
14.         placeholder="请输入密码"
15.       />
16.       <view class="login-button" @click="handleLogin">登录</view>
17.     </view>
18.   </view>
19. </template>
21. <script lang="ts" setup>
22. import { ref } from "vue";
24. const userId = ref("");
25. const password = ref("");
27. const id = ""; // 用户 ID 或者群组 ID
28. const type = ""; // 会话类型：单聊 singleChat，群聊为 groupChat
30. const handleLogin = () => {
31.   if (!userId.value || !password.value) {
32.     uni.showToast({
33.       title: "请输入用户ID和密码",
34.       icon: "none"
35.     });
36.     return;
37.   }
38.   // 登录
39.   uni.$UIKit.chatStore
40.     .login({
41.       user: userId.value,
42.       pwd: password.value
43.     })
44.     .then(() => {
45.       // 登录成功跳转聊天页面
46.       uni.navigateTo({
47.         url: `/ChatUIKit/modules/Chat/index?id=${id}&type=${type}`
48.       });
49.     })
50.     .catch((error) => {
51.       console.error("登录失败", error);
52.     });
53. };
54. // 退出登录
55. const logout = () => {
56.     uni.$UIKit.chatStore.logout();
57. };
58. </script>
59. <style lang="scss" scoped>
60. .index {
61.   height: 100%;
62.   display: flex;
63.   justify-content: center;
64.   align-items: center;
65.   background-color: #f5f5f5;
67.   .login-form {
68.     width: 80%;
69.     max-width: 300px;
70.     padding: 20px;
71.     background-color: #fff;
72.     border-radius: 8px;
73.     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
75.     .input-field {
76.       width: 100%;
77.       height: 40px;
78.       margin-bottom: 15px;
79.       padding: 0 15px;
80.       border: 1px solid #dcdfe6;
81.       border-radius: 4px;
82.       font-size: 14px;
83.       box-sizing: border-box;
85.       &:focus {
86.         border-color: #006eff;
87.       }
88.     }
90.     .login-button {
91.       width: 100%;
92.       padding: 12px 0;
93.       color: #fff;
94.       background-color: #006eff;
95.       font-size: 16px;
96.       border-radius: 4px;
97.       text-align: center;
99.       &:active {
100.         opacity: 0.8;
101.       }
102.     }
103.   }
104. }
105. </style>

复制代码

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

1. <script lang="ts">
2. import { ChatUIKit } from "./ChatUIKit";
3. import websdk from "easemob-websdk/uniApp/Easemob-chat";
4. import { EasemobChatStatic } from "easemob-websdk/Easemob-chat";
6. // 创建 IM 实例
7. const chat = new (websdk as unknown as EasemobChatStatic).connection({
8.   appKey: '', // 应用的 App Key
9.   isHttpDNS: false,
10.   url: '', // 环信 websocket URL
11.   apiUrl: '', // 环信 Restful API URL
12.   delivery: true // 是否开启消息已送达回执
13. });
16. // 初始化 ChatUIKit
17. ChatUIKit.init({
18.   chat, // 传入 IM 实例
19.   config: {
20.     theme: {
21.                         // 头像形状：圆形（circle）和方形（square）
22.       avatarShape: "square"
23.     },
24.     isDebug: true // 是否开启调试模式
25.   }
26. });
28. uni.$UIKit = ChatUIKit;
30. export default {
31.   onLaunch: function () {
32.     console.log("App Launch");
33.   },
34.   onShow: function () {
35.     console.log("App Show");
36.     // 在 onShow 中调用 ChatUIKit.onShow() 方法，主动监测 IM 连接状态
37.     ChatUIKit.onShow();
38.   },
39.   onHide: function () {
40.     console.log("App Hide");
41.   }
42. };
43. </script>
44. <style>
45. /* 通用样式 */
46. html,body,page {
47.   height: 100%;
48.   width: 100%;
49. }
50. </style>

复制代码

第七步：在pages.json设置路由进度90%

1. {
2.   "pages": [
3.         {
4.                         "path": "pages/index/index",
5.                         "style": {
6.                                 "navigationBarTitleText": "uni-app"
7.                         }
8.                 },
9.                 {
10.                         "path": "ChatUIKit/modules/Chat/index",
11.                         "style": {
12.                                 "navigationStyle": "custom",
13.                                 // #ifdef MP-WEIXIN
14.                                 "disableScroll": true,
15.                                 // #endif
16.                                 "app-plus": {
17.                                         "bounce": "none",
18.                                         "softinputNavBar": "none"
19.                                 }
20.                         }
21.                 },
22.                 {
23.                         "path": "ChatUIKit/modules/VideoPreview/index",
24.                         "style": {
25.                                 "navigationBarTitleText": "Video Preview",
26.                                 "app-plus": {
27.                                         "bounce": "none"
28.                                 }
29.                         }
30.                 }
31.   ]
32. }

复制代码

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

第九步：运行到鸿蒙并发送一条消息进度100%

---

遇到的标题：

标题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，参考
  

标题2:

登录报错

办理方案：

   在/harmony-configs/entry/src/main/module.json5文件添加以下代码

1.     "requestPermissions": [
2.               {"name": "ohos.permission.GET_NETWORK_INFO"},
3.               {
4.                 "name": "ohos.permission.INTERNET"},
5.             ],

复制代码

标题3:

HBuilderX无限重连

办理方案：

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

---

总结：

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

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