Uni-App IMLib 原生插件，从连接到收发消息保姆级教程

yongqiming · 2026 年1 月 28 日 06:07

Uni-App IMLib 原生插件，从连接到收发消息保姆级教程

1. 在 HBuilderX 新建一个项目工程

(1) 新建工程，这里以新建一个默认模版、Vue3 工程为例

(2) 获取 DCloud AppID ( uni-app应用标识 )，注意：HBuilderX 需要登录 DCloud 账号，创建项目才会默认分配标识

2. 原生插件配置

(1) 点击【插件市场】

(2) 在插件市场搜索 RCUniIMV2 ，点击进入详情，然后点击【购买】

(3) 点击RongCloud 进入融云 uni-app 插件集合，找到 RongCloud-IMWrapper-V2 融云IM原生插件包装层点击下载并导入 HBuilderX

(4) 选择云端插件（为云打包做准备）

3. 进行云打包，按照如下图配置完毕后，点击【打包】

提示

a. 打包需要一定的时间，等打包完成，按照如下方式运行，测试打包是否正常。

b. IOS 云打包，基本跟 Android 一致，区别就是 IOS 需要您这边的证书，没有云端证书。

c. 快速安心打包，uni-app 平台有一定的限制，demo 验证可以先选择传统打包。

注意

由于uni-app IMLib 原生插件只支持App，一定使用真机进行运行

4. 编写初始化、连接、收发消息代码

(1) 初始化，这里在 App.vue onLaunch 生命周期中进行初始化，实际请以您业务逻辑调整初始化时机。示例代码：


<script>
	import RCIMIWEngine from "@/uni_modules/RongCloud-IMWrapper-V2/js_sdk/RCIMEngine"
	export default {
		
		globalData:{
			imEngine:null
		},
		
		async onLaunch(){
			console.log('App Launch')
			const appKey = '您的 App Key'
			const options = {}
			const engine = await RCIMIWEngine.create(appKey, options)
			this.globalData.imEngine = engine
			console.log('App 全局 imEngine =', this.globalData.imEngine)
		},
		
		onShow: function() {
			console.log('App Show')
		},
		
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

提示

a. 更多初始化(options)配置，参考文档：引擎配置 | 融云开发者文档

b. 如果您找不到对应的 App Key，登录融云 RongCloud 开发者平台，参考如下图获取（注意：生产开发App Key 数据是隔离的，不互通）

(2) 连接，消息发送，消息接收参考如下代码：

<template>
	<view class="content">
			<button class="title" @click="connectIM">连接</button>
			<button class="title" @click="sendMessage">发消息</button>
			<text class="title">接收的消息为：{{msg}}</text>
	</view>
</template>

<script>
	import {RCIMIWConversationType,} from "@/uni_modules/RongCloud-IMWrapper-V2/js_sdk/RCIMDefines"
	export default {
		data() {
			return {
				imEngine:null,
				msg:'',
			}
		},
		onLoad() {
		  
		},
		onShow() {
			this.getEngine()
			/**
			 * 接收消息
			 */
			this.imEngine.setOnMessageReceivedListener((res) => {
				console.log('res =', JSON.stringify(res, null, 2))
			    this.msg = JSON.stringify(res, null, 2)
			});
		},
		methods: {
			/**
			 * 连接 IM 
			 */
         async connectIM(){
			  this.getEngine()
			  let token = 'wRRcc7tpneznfWJ8b8iAmHOsAEUbWUSplgyrA552U0I=@sdkq.cn.rongnav.com;sdkq.cn.rongcfg.com'
              let callback = {
				  
              onDatabaseOpened:(res) => {
                console.log("数据库打开")
              },
			  
              onConnected:(res) => {
              		 console.log(res)
              		 if(res.code ===0){
              		 uni.showToast({
              		     title:'连接成功',
              			 icon:"none"
              		 })
              	     }else if(res.code ===34001){
              		 uni.showToast({
              		 title:'连接已存在，不需要再李连接',
              		 icon:"none"
              		})
              	 }
              }};
              let code = await this.imEngine.connect(token, 20, callback);
		  },
		  
		  /**
		   * 发送消息
		   */
		  async sendMessage(){
			  this.getEngine()
			  let type = RCIMIWConversationType.private;
			  let targetId = '9996';
			  let channelId = '';
			  let text = '测试'
			  let message = await this.imEngine.createTextMessage(
			        type,
			        targetId,
			        channelId,
			        text,
			      );
			   let callback = {
			   onMessageSaved:(res) => {
				console.log(res)
			   },
			   onMessageSent:(res) => {
				console.log(res)
			    if(res.code ===0){
			    uni.showToast({
			        title:'消息发送成功成功',
			        icon:"none",
			    });
				}
			   }};
			   let code = await this.imEngine.sendMessage(message, callback);
		   },
		   
		   
		   /**
			* 为了防止 Vue页面修改重新挂载导致 data 里面 的imEngine 对象被清空
			* 这里只是单页面，为了方便，这么写，实际使用中，可以写成工具类获取其他
			* 比较符合您业务的方式
			*/
		   getEngine(){
			   if(!this.imEngine){
				  let app = getApp();
				  this.imEngine = app.globalData?.imEngine; 
			   }
		   },
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
		width: 50%;
		margin-top: 90rpx;
	}
</style>

提示

a. 更多连接细节参考：连接 | 融云开发者文档

b. 更多发送消息细节参考：发送消息 | 融云开发者文档

c. 消息创建细节参考：消息介绍 | 融云开发者文档

d. 更多消息接收细节参考：接收消息 | 融云开发者文档

e. 连接 Token 快速获取参考如下图：