更新记录

v1.1.1（2023-11-30）

V1.1.1 解决H5火狐浏览器运行问题

v1.1.0（2023-11-24）

V1.1.0 1、IM uniapp demo支持安卓、iOS、H5、微信小程序 2、好友关系管理 3、黑名单管理 4、消息回复功能 5、消息转发能力 6、群聊@ 功能 7、群成员列表更新 8、系统通知优化 9、支持单聊直接创群

平台兼容性

云信 IM 介绍

网易云信 IM 即时通讯服务（以下简称 IM）基于网易二十余年的 IM 技术积累，致力于打造最稳定的即时通讯云平台。

IM 提供了一整套即时通讯基础能力。通过该平台服务您可以将即时通讯、实时网络能力快速集成至企业自身应用中。针对不同场景，IM 提供了一系列产品及技术解决方案，包括：客户端 IM 组件、客户端 IM 基础库、全平台 SDK 以及服务端 API 等。通过这些解决方案，企业可以直接在自身的应用中快速搭建出即时通讯产品，也可以构建出自己的即时通讯场景。

IM uni-app Demo 介绍

IM uni-app Demo 是基于网易云信 NIM SDK 的一款 uni-app Demo，支持 Android、iOS、H5 和微信小程序，它提供了一些通用功能，包含会话、聊天、群组等，您可以基于源码搭建自己的 IM 业务逻辑。

IM uni-app Demo 的部分界面效果如下：

限时优惠活动

如果您通过 Dcloud 平台在云信控制台注册账号并开通 IM 服务，云信将提供特别的渠道版套餐，低至五折接入，可在开通账号后联系云信销售或技术支持。

点击 立即注册 前往云信控制台开通 IM 服务。

推荐有礼

推荐好友使用云信 IM 即时通讯产品，返佣奖励高至 20%，上不封顶！

点击 网易云信 8 周年庆 即可参与，合法致富机会，赶紧牢牢抓住！

Demo 体验

平台	二维码
Android
iOS
小程序	即将发布
H5	点击 H5 Demo 在线体验地址 即可直接体验。

技术支持

网易云信提供多种服务，包括客服、技术支持、热线服务、全流程数据监控等，建议使用微信或企业微信扫码加入咨询群，我们的产品、技术、开发将协助接入、测试以及定制需求。

微信咨询	在线咨询	电话咨询
	点击在线咨询	4009-000-123

快速开始

开发环境要求

• HBuilderX 官方 IDE 1.9 及以上版本
• Vue 3
• TypeScript
• sass（sass-loader 版本 <= 10.1.1）
• node（12.13.0 <= node 版本 <= 17.0.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0）
• npm（版本请与 node 版本匹配）

准备工作

• 创建应用

  1. 登录网易云信控制台。

     如果您在 Dcloud 平台通过此链接登录云信控制台并成功注册账号开通 IM 服务，云信将提供特别的渠道版套餐，低至五折接入，可在开通账号后联系云信销售或技术支持。

  2. 如果您是首次登录控制台，控制台会弹出一个新手向导窗口，单击去创建。

  3. 完成实名认证后，在控制台首页单击创建应用。

     

  4. 填写应用的基本信息，如应用名称、行业类型和应用环境。

     

  5. 单击确定完成创建应用。

  6. 在应用配置导航栏中，单击AppKey 管理页签，查看该应用的 AppKey。

     

• 注册 IM 测试账号

  如仅需简单体验或者快速测试，请按照以下步骤在云信控制台创建测试账号。正式生产环境请通过云信服务端接口注册云信 IM 正式账号。

  1. 在控制台首页应用管理选择应用进入应用配置页面，然后单击 IM即时通讯 专业版下的功能配置按钮进入 IM 即时通讯配置页。

     

  2. 在顶部选择基础功能页签，单击测试账号管理下的子功能配置。

     

  3. 单击新建账号，在弹窗填写账号、昵称、密码后，单击确定。

     在云信控制台创建的 IM 账户信息与服务端的账户信息相对应：

     • 账号：accid
     • 密码：token
     • 昵称：name

  4. （可选）对于创建好的测试账号，您可以在控制台进行修改昵称，重置密码，以及禁用操作。

     

步骤1：创建项目

单击本页面右侧下载插件并导入HBuildX按钮后，在 HBuilderX 中创建 uni-app 项目。

Vue 版本请选择 v3。当右下角出现“项目[]创建成功”的提示时，表示项目已创建完成，可以进行下一步。

步骤2：配置项目

在 HBuilderX 中配置项目 App.vue 文件中的 appkey、account、token。
如何获取请参考准备工作。

<script>
    import RootStore from '@xkit-yx/im-store'
    import { NimKitCore } from '@xkit-yx/core-kit/dist/uniapp-nim-core'
    import { getMsgContentTipByType } from './utils/msg'
    export default {
        onLaunch: function() {
            const nim = uni.$UIKitNIM = new NimKitCore({
              initOptions: {
               "appkey": "", //您在云信控制台注册的appkey
                "account": "", //云信控制台上的account
                "token": "",
                "lbsUrls": [
                  "https://lbs.netease.im/lbs/webconf.jsp"
                ],
                "linkUrl": "weblink.netease.im",
                "needReconnect": true,
                // "reconnectionAttempts": 5,
                debugLevel: 'debug'
              },
              platform: 'UniApp',
            })
            uni.$UIKitStore = new RootStore(nim, {
              addFriendNeedVerify: false,
              teamBeInviteMode: 'noVerify',
              teamJoinMode: 'noVerify',
              teamUpdateExtMode: 'all',
              teamUpdateTeamMode: 'all',
              teamInviteMode: 'all',
              sendMsgBefore: async (options, type) => {
                const pushContent = getMsgContentTipByType({ body: options.body, type })

                // 如果是 at 消息，需要走离线强推
                const { forcePushIDsList, needForcePush } = options.ext?.yxAitMsg
                  // @ts-ignore
                  ? store.msgStore._formatExtAitToPushInfo(options.ext?.yxAitMsg, options.body)
                  : { forcePushIDsList: '[]', needForcePush: false }

                console.log('forcePushIDsList: ', forcePushIDsList)

                // 不同产商的推送消息体
                const { scene, to } = options
                const pushPayload = JSON.stringify({
                  // oppo
                  oppoField: {
                    "click_action_type": 4, // 参考 oppo 官网
                    "click_action_activity": '', // 各端不一样 TODO
                    "action_parameters": { "sessionId": scene, "sessionType": to } // 自定义
                  },

                  // vivo
                  vivoField: {
                    "pushMode": 0 //推送模式 0：正式推送；1：测试推送，不填默认为0
                  },

                  // huawei
                  hwField: {
                    click_action: {
                      'type': 1,
                      'action': '' // 各端不一样 TODO
                    },
                    androidConfig: {
                      'category': 'IM',
                      'data': JSON.stringify({ 'sessionId': to, 'sessionType': scene })
                    }
                  },

                  // 通用
                  sessionId: to,
                  sessionType: scene
                })

                const pushInfo = {
                  needPush: true,
                  needPushBadge: true,
                  pushPayload: '{}',
                  pushContent,
                  needForcePush,
                  forcePushIDsList,
                  forcePushContent: pushContent,
                }
                return { ...options, pushInfo }
              },
            })
            nim.connect()

        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

<style>
    /*每个页面公共css */
</style>

配置完成后，等待 HBuilderX 将依赖安装完成。

步骤3：运行项目

在 HBuilderX 的运行选项中，根据实际情况选择运行的客户端。

源码集成

• 源码集成开发文档：源码集成

• 云信开源代码仓库：github 源码地址

• API 参考：UIKitStore

云信推荐

云信 IM UIKIt：基于 NIM SDK（网易云信 IM SDK）开发的一款即时通讯 UI 组件库，可助您快速集成包含 UI 界面的即时通讯应用，同时支持调用 NIM SDK 相应的接口实现即时通讯业务逻辑和数据处理。

• Android UIKit

• iOS UIKit

• Web UIKit

• Flutter UIKit

常见问题

无法正常打开相册

相册拒绝授权后再次开启授权，由于 uni-app api 兼容问题，部分 Android 机型无法正常打开相册，需要用户自行处理。

iOS 低版本构建后无法运行

如果 iOS 低版本构建后无法运行，需在构建出的资源 dist/build/app/app-service.js 文件最前面添加 var globalThis = Function('return this')();。

uni-app 兼容问题

部分 uni-app 兼容问题，已在代码中说明。

page 结构问题

由于 uni-app 自身的 uni.setNavigationBarTitle 限制，chat 页面的 NavigationBarTitle，需要您自行调整 page 结构设置。

uni-app 推送

uni-app 推送相关问题请参考uni-app 离线推送。