Uniapp全平台方案简介

环信小程序 SDK 为各端小程序开发提供一套完整的技术解决方案,在各端小程序的开发环境下,集成 IM 相关的功能更加便捷、高效。让您的小程序快速获得安全稳定的 IM 能力,集成简单,使用方便,帮助您快速拓展业务,赢得先机。

注意: SDK目前支持微信、QQ、百度小程序、字节跳动(请使用低于1.70.0以下的版本基础库)、uni-app编译的 原生Android 以及 IOS。

扫描下方小程序二维码,或者微信搜索环信IM Uniapp即可快速体验环信小程序 Demo 在线版本

注意:

  • 小程序 Demo 只包含部分 IM 功能,详细参考功能说明
  • 支持账户注册登录
  • 支持 IM 基本功能收发文本、图片、语音、视频、音频、文件、透传、扩展消息等
  • 支持 群组聊天室功能
  • 支持个人设置
  • 支持发送语音功能

集成前准备

搭建开发环境

1、下载 HBuilderx 编辑器 https://www.dcloud.io/hbuilderx.html

2、DCloud 开发者中心注册 https://dev.dcloud.net.cn/

之后登陆HBuilderx编辑器。 至此小程序的开发环境差不多完成。

即将开发的平台配置服务

配置服务器域名(以微信为例)

登录微信公众平台,进入“开发 > 开发设置”页面,配置以下服务器地址(其他平台小程序配置与微信一致):

request 合法域名,uploadFile 合法域名,downloadFile 合法域名:

1、https://a1.easemob.com
2、https://a2.easemob.com
3、https://a3.easemob.com
4、https://a4.easemob.com
5、https://a5.easemob.com

socket合法域名:

1、wss://im-api.easemob.com(2.0 IM SDK)
2、wss://im-api-wechat.easemob.com(3.0 IM SDK)

各端小程序 WebSocket连接数量

  • QQ、微信小程序: 1.7.0 及以上版本,最多可以同时存在 5 个 WebSocket 连接
  • 字节小程序: 1.0.0 及以上版本 (在当前小程序页面已经有一个WebSocket 连接的情况下,如果再创建一个WebSocket 连接,会重新创建一个 WebSocket 连接,但是之前创建的WebSocket 连接并不会自动关闭。)
  • 百度小程序:1.9.4 及以上版本,支持存在多个 WebSokcet 连接,每次成功调用会返回一个新的 SocketTask
  • 支付宝小程序(暂不支持):支付宝小程序在一段时间内只能保留一个 WebSocket 连接,如果当前已存在 WebSocket 连接,那么会自动关闭该连接,并重新创建一个新的 WebSocket 连接。

将SDK添加到自己的小程序

下载SDK

可以通过以下方式获取SDK:

  • 从环信的github仓库 中获取 SDK 中的文件, 从3.3.1开始支持uniapp。

引入SDK

  • 开始一个全新的项目
    1. 将 SDK 目录下(src/sdk/)的文件全部导入到自己的项目中。
    2. 直接使用 import/require 方式获取引用, 如果使用 mpvue 保持引文件方式的统一。
  • 基于 Demo 二次开发

拉取代码,HBuilder 运行

调用示例

//使用示例
import SDK from "../sdk/webimSDK3.x.x"; // 3.0sdk

实例调用方式

实例化SDK,并挂载在全局对象下

//实例化SDK对象
const WebIM = wx.WebIM = SDK;
WebIM.conn = new WebIM.connection({
    isMultiLoginSessions: false, //是否可以登录多个,并在所有端上接收消息
    https: false, //是否使用HTTPS 
    url: 'wss://im-api-wechat.easemob.com/websocket', // socket server (3.0 SDK)
    apiUrl: 'https://a1.easemob.com',    // rest server
    heartBeatWait: 30000, //心跳间隔
    autoReconnectNumMax: 2, //自动重连次数
    useOwnUploadFun: false // 是否使用自己的上传方式(如将图片文件等上传到自己的服务器,构建消息时只传url)
});

IM 基本功能,请参考 http://docs-im.easemob.com/im/web/basics/message