使用环信提供的 uni-app Demo，快速实现一对一单聊

如何利用环信提供的 uni-app Demo，快速实现一对一单聊？真真保姆级别教程！

写在前面：

1）因为初期直接下载环信的 uni-app 的 demo 源码直接看可能一头雾水，因此写下这篇文档帮助项目周期较急，想要快速集成环信 uni-app 端 IM 开发者小伙伴。

2）这篇文档只帮助实现单聊功能，群组功能其实与单聊基本相仿，可以在参考单聊后的流程，自行看看源码实现群聊。

3）尽管已经从原项目中剥离了很多无关核心逻辑的代码，但仍然可能还有一些小伙伴本身项目中用不到的代码，因此化繁去简这一步就不再本文档中展示，请在按照这篇文档，完成核心逻辑后自行进行优化。然后就不多啰嗦了，下面开搞~

1、 下载环信 uni-app demo 源码 源码地址：

https://github.com/easemob/webim-uniapp-demo

2、在编辑器中打开项目，建议进行一次试运行确保 demo 源码可以正常跑起来，大概率是可以正常跑起来的。运行没有问题之后，强烈建议先在 README.md 中了解一下 demo 中的目录结构，做个初期的了解。 参考实际目录结构如图：

3、由于是作为演示，所以我只是简单的新建一个示例项目，写一个简易的聊天界面界面作为即时通讯功能的入口。仿咸鱼在线一对一沟通界面入口：

这个就是默认的项目目录（该示例项目为 Vue）

4、这一步就正式开始从环信的 Uni-App demo 中 CV 代码到自有的项目中：

setp1：先把最核心的 SDKcopy 进来，复制 demo 源码的 newSDK 这个文件到项目中（demo 中的 SDK 其实有很多个，建议选择版本号最新的一个即可）。

自己的项目目录如图：

setp2：复制 demo 中的 utils 文件到项目中。

utils 目录结构如图：

其中 WebIMConfig.js 是作为 SDK 的 Config 配置使用，WebIM.js 是针对于 SDK 进行初始化，并挂载一些常用方法，Dispatcher.js broadcast.js Observer.js 是用作发布订阅的使用，因为源码中有所使用，所以这几个文件都是必须引入。

setp3：copy static 静态资源包到自己的项目当中,因为组件的聊天界面里面的 emoji 是图片所以要用到。

此时的目录结构如图：

setp4：copy uview-ui 进来,因为组件中有用到这个包的 UI 组件，使用过 UI 组件的朋友应该都知道，除了这个还要引入相应的样式，这个组件的 README.md 中，说明了要进行什么样的配置，这里就不再一一赘述。

setp5：在示例项目中新建 components 文件夹，分别 copy demo 当中的 components 文件夹下的整个 chat 组件，pages 文件夹下的 chatroom 组件，由于示例项目中的 App.vue 组件没有自己的其他逻辑，所以我直接将 demo 中的 Appp.vue 中的所有代码全部 copy 到示例项目中。

PS：特别说明 demo 的 App.vue 尽管不是每一行代码都是必要的，但是如果要做优化或者 copy，确保 import 的引入部分先全部粘贴上，conn.listen 监听回调也一定要先 copy 上。确保先跑起来的原则，优化放在之后。

此时的目录结构如图：

以上步骤执行完成之后便可以跑一把试试了，运行起来查看一下是否有什么引入类型或者其他类型的报错在集中解决一下。

下图是运行到小程序的界面：

VM22 WAService.js:2 TypeError: Cannot read property 'forceUpdate' of undefined

这个报错原因是没有在 HbuilderX 配置微信小程序的 AppId。

5、开始登陆环信，执行跳转至 chat 聊天界面进行单聊消息的发送测试

step1：确保先登陆环信（能到这一步相信也都已经注册了环信的账号创建了应用，或者利用环信官方 demo 注册了测试 id）

我在示例项目中是在 index.vue 写的入口页面，因此登陆也写在了这个页面，示例代码截图可以看下图：

step2:运行项目看 App.vue 中的监听回调--onOpened 回调是否触发（这一步很重要，因为所有功能性接口调用都必须保证环信的连接成功）

看到代码中的打印输出之后证明已成功的建立 websocket 连接，正式可以开始下一步跳转至 chat 页面。

step3: 给引入的 chatroom 组件在 pages.json 中配置对应的路由映射，并在 pages/index.vue 组件再给"我想要"按钮添加事件执行路由跳转至 chatroom 组件。

index.vue 中的示例代码如图：

chatroom 组件不需要执行其他操作，onload 直接将路由传递的参数进行了接收：

step:4 跑起来看看吧！

这个时候顺利的话你会跳转至这样的一个页面，有可能出现这样一个报错：

这是因为 demo 重写了一个 setData 并放在了 main.js 的 mixin 里面，手动加上去即可，代码所在位置如图：

6、重新编译启动，点击进入 chat 页面测试聊天，就没问题了！

不排除列位遇到一些其他阻力导致没有成功跑起来，如果还遇到有其他问题，可以在评论区友好交流，我看到会帮忙解决的。

源码下载： https://www.imgeek.org/article/825360394