更新记录

1.1.10(2025-04-11) 下载此版本

更新示例工程

1.1.9(2025-03-27) 下载此版本

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

1.1.8(2025-03-26) 下载此版本

上传示例工程

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.94 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

组件说明

  1. 此组件为页面组件,实现了Socket连接/好友/群组/新消息/历史消息,且都是全局配置全局本地化存储,兼容H5/微信小程序/安卓App(其他平台未做调试)

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

自行准备内容

  1. WebSocket服务,替换.env.development下VITE_APP_SOCKET_URL地址

    websocket需要实现连接,实现心跳检测/离线消息/在线消息/已读回执4种消息类型

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

引用说明

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,将原样式替换

演示说明

以下共用一个后端,全部互通


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

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



演示商城H5效果:

https://www.ninecloud.top/unine/index.html

H5中可下载安卓App



演示PC前端(与此组件无关,可用于多端消息互相发送测试):

https://www.ninecloud.top/msw/index



注:新注册账号,默认添加【visitor】为好友,默认加入【客服专用群】群

因此,可用访客/注册账号登录以上任意系统,可任意发送消息,皆能同步显示

以上系统皆可用访客账号/密码:visitor/visitor

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问