更新记录

1.1.11（2025-07-14） 下载此版本

更新readme说明文件

1.1.10（2025-04-11） 下载此版本

更新示例工程

1.1.9（2025-03-27） 下载此版本

示例工程接口配置，改为通过环境变量实现

平台兼容性

云端兼容性

uni-app(4.06)

uni-app x(4.06)

其他

组件说明

1. 此组件为页面组件，实现了 WebSocket连接/好友/群组/新消息/历史消息，且都是 全局配置/全局本地化存储，兼容 H5/微信小程序/安卓App （ 其它平台未测试 ）

自行准备内容

1. 此组件提供示例工程，其中的 接口服务 和 WebSocket服务 ，仅供各位开发者调试使用，正式发布需自行实现

2. 接口服务，实现 /api/chat.js 和 /api/login.js 里面的方法

3. WebSocket服务，实现 连接和心跳检测/离线消息/在线消息/已读回执4种类型消息处理

引用说明

1. 路由说明

导入组件后，会在 pages.json 中自动注册组件，若未注册可手动添加

{
    "path": "uni_modules/vrapile-im/pages/home/chatHome",
    "style": {
        "enablePullDownRefresh": false,
        "navigationBarTitleText": "消息"
    }
},
{
    "path": "uni_modules/vrapile-im/pages/chat/chatFriend",
    "style": {
        "enablePullDownRefresh": false,
        "navigationBarTitleText": "聊天"
    }
}

可在导航中配置 IM 消息页面

"tabBar": {
    "selectedColor": "#0000ff",
    "list": [
        {
            "pagePath": "uni_modules/vrapile-im/pages/home/chatHome",
            "iconPath": "static/image/tabbar/chat.png",
            "selectedIconPath": "static/image/tabbar/chat-fill.png",
            "text": "消息"
        },
        {
            "pagePath": "pages/home/user",
            "iconPath": "static/image/tabbar/user.png",
            "selectedIconPath": "static/image/tabbar/user-fill.png",
            "text": "我的"
        }
    ]
},

2. 页面样式修改

当前页面样式在 /uni_modules/vrapile-im/static/style/ 下的 nine-chat-home-001.scss 和 nine-chat-friend-001.scss

可在 /static/style/ 下的 nine-chat-home-001.scss 和 nine-chat-friend-001.scss 中重写样式替换

演示说明

以下所有工程共用一个后端，账号互通 （ 账号/密码：visitor/visitor ）

示例工程 [ 源码 ] 运行效果：

https://www.ninecloud.top/udemo/im/index.html

演示商城效果：（ H5中可下载安卓App ）
https://www.ninecloud.top/unine/index.html

演示PC前端：（ 与此组件无关，可用于多端消息互相发送测试 ）
https://www.ninecloud.top/msw/index

注：通过以上系统新注册账号，默认添加 visitor 为好友，默认加入 客服专用群

以上任意系统之间，IM消息皆能同步显示