更新记录

1.0.1（2025-02-10）下载此版本

更新使用说明的
代码报错的一些细节。

1.0.0（2025-02-09）下载此版本

将sxran-im模版改成组件，以便大家现有项目可以无缝融合。后续主要更新这个组件，模版后续会改成其他的上线程序。

平台兼容性

Vue2	Vue3
×	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 4.0	×	×	×	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序	鸿蒙元服务
×	×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
×	×	×	×	√	×	×	√	√

sxran-im-modules

sxran-im 的 uni_modules组件插件可直接导入使用。

组件使用

main.js 文件中引入即可使用skd和工具类 
import SxranImModules from '@/uni_modules/sxran-im-modules' 
Vue.use(SxranImModules)
sdk挂载vue实例全局中
this.$Im 或 uni.$Im 包含Im通讯所有方法及数据存储
this.$u 或 uni.$u 包含实用工具类

主题使用

main.js 文件中引入
import '@/uni_modules/sxran-im-modules/theme/index.scss'

内置主题
sxran-im-white(极简)
sxran-im-warm(温暖)
sxran-im-light(经典)
sxran-im-dark(黑暗)

获取主题
uni.$Im.getTheme();
修改主题
uni.$Im.setTheme(value);

小程序 page页面外层view容器
<view :class=[$Im.getTheme()]>

h5 index.html文件 <html>标签设置 data-theme
<html lang="en" data-theme="">
主题变量
/* 背景颜色 */
  --uni-bg-color: #ffe5f2; /* 主要背景颜色 */
  --uni-bg-color-grey: #ffe0f1; /* 辅助背景颜色 */
  --uni-bg-color-assist: #ffe0f1; /* 辅助背景颜色 */
  --uni-bg-color-content: #ffe4f2; /* 内容背景颜色 */
  --uni-bg-color-envoy: #f7fde9; /* 环境背景颜色 */
  --uni-bg-color-hover: rgba(0,0,0 , 0.1); /*悬浮*/
  --uni-bg-color-active: #e990ba; /*选中背景色*/
  --uni-bg-color-mask: rgba(255, 0, 0, 0.4); /* 遮罩颜色 */
  --uni-bg-color-bubble: #ffffff;  //气泡
  --uni-bg-color-active: #ffc1de;  //气泡
  /* 文字颜色 */
  --uni-text-color: #22191d; /* 主要文字颜色 */
  --uni-text-color-inverse: #ffffff; /* 反色文字 */
  --uni-text-color-grey: #7f7279; /* 辅助文字颜色 */
  --uni-text-color-placeholder: #9999a5; /* 占位符文字颜色 */
  --uni-text-color-disable: #999999; /* 禁用状态文字颜色 */
  --uni-color-link: #4cd964; /* 链接颜色 */
  --uni-text-color-active: #e990ba; /*文字选中*/
  /* 边框颜色 */
  --uni-border-color: #ddcdce; /* 边框颜色 */

/* 行为相关颜色 */
--uni-color-primary: #0099ff;
--uni-color-success: #4cd964;
--uni-color-warning: #f0ad4e;
--uni-color-error: #dd524d;
--uni-color-info: #909399;
--uni-color-main: #303133;
--uni-color-content:#999999;
--uni-color-tips: #909193;
--uni-color-light: #c0c4cc;

--uni-color-hr: #e7d8d9; /* 分隔线颜色 */

/* 其他颜色 */
--uni-thumb-color: #d4ccd0; /* 滑块颜色 */
--uni-thumb-color-hover: #d4ccd0; /* 滑块悬停颜色 */

路由拦截

新建router/index.js文件
import router from '@/uni_modules/sxran-im-modules/sdk/router/Router.js'

//设置路由白名单参数接收数组或字符串类型，数组为覆盖路由,不传参数或【】为置空
//router.setWithRoutes([]);

//获取路由白名单
const withList = router.getWithRoutes();

//根据需求重写路由守卫
router.beforeEach((to, from, next) => {
if (withList.includes(to.path)) {
if(uni.getStorageSync('userInfo')){
uni.navigateTo({
url: '/uni_modules/sxran-im-modules/pages/index/index'
})
}else{
next();
}
} else {
if (!uni.getStorageSync('userInfo')) {
next(false);
uni.navigateTo({
url: '/uni_modules/sxran-im-modules/pages/login/login'
})
} else {
if(!uni.$Im.isSocketConnected()){
uni.$Im.connect();
}
}
}
});

export default router;

main.js 中引入 router/index
import router from '@/router/index'

聊天交友社交IM音视频通话-组件-uni-modules im 即时通讯 客服 聊天 社交

更新记录

1.0.1（2025-02-10）下载此版本

1.0.0（2025-02-09）下载此版本

平台兼容性

sxran-im-modules

组件使用

主题使用

路由拦截

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

聊天交友社交IM音视频通话持续完善

聊天交友社交IM音视频通话-组件-uni-modules

kit-ui

聊天交友社交IM音视频通话-组件-uni-modules im 即时通讯 客服 聊天 社交

更新记录

1.0.1（2025-02-10） 下载此版本

1.0.0（2025-02-09） 下载此版本

平台兼容性

sxran-im-modules

组件使用

主题使用

路由拦截

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

聊天交友社交IM音视频通话持续完善

聊天交友社交IM音视频通话-组件-uni-modules

kit-ui

Modal title

聊天交友社交IM音视频通话-组件-uni-modules im 即时通讯客服聊天社交

1.0.1（2025-02-10）下载此版本

1.0.0（2025-02-09）下载此版本