产品简介
即时通信(Instant Messaging,IM)基于QQ 底层 IM 能力开发,仅需植入 SDK 即可轻松集成聊天、会话、群组、资料管理能力,帮助您实现文字、图片、短语音、短视频等富媒体消息收发,全面满足通信需要。
应用场景
客服咨询
即时通信 IM 可满足商家与用户多场景沟通的需要,为客户提供专属客服服务,提升服务效率,通过与智能机器人结合,可有效降低人力成本,沉淀客户价值。
直播弹幕
即时通信 IM 可支持弹幕、 送礼和点赞等多消息类型,轻松打造良好的直播聊天互动体验;提供弹幕内容审核能力,保证您的直播免受不雅信息干扰。
网红带货
即时通信 IM 与商业直播相结合,通过提供点赞、询价、购物券等特定消息类型,帮助直播客户实现流量变现。
教学白板
即时通信 IM 为可提供在线课堂,文本消息,画笔轨迹等能力,轻松实现教师学生沟通、画笔轨迹保存、大班课与小班课教学等教学场景。
社交沟通
即时通信 IM 可实现单聊、群聊、弹幕等多种聊天模式,支持文字、图片、语音、短视频等多种消息类型,有效提升用户粘性与活跃度。
企业办公
即时通信 IM 为企业客户提供覆盖桌面与移动端的完整解决方案,满足设备无缝切换的需求,提高企业内外沟通效率。
智能设备
即时通信 IM 提供人与物、物与物协同通信,携手共进引领 5G 通信时代潮流。
快速体验,IMSDK小程序demo运行
本 IM 小程序 demo 是基于 MpVue 框架进行开发的。一分钟跑通 demo
小节只是用于引导您打开编译后的文件进行快速预览,如果您想要进行二次开发,请看开发运行
小节。
一分钟跑通demo
-
克隆仓库到本地
# 命令行执行 git clone https://github.com/tencentyun/TIMSDK.git # 进入小程序 Demo 项目 cd TIMSDK/WXMini
- 安装微信小程序 开发者工具。
- 使用微信开发者工具导入项目,请注意目录为
/dist/wx
,然后填入自己的小程序 AppID。
-
配置
SDKAPPID
和SECRETKEY
,获取方式参考:密钥获取方法- 打开
/debug/GeneraterUserSig.js
文件 - 按图示填写相应配置后,保存文件
- 打开
-
本地配置如下图所示
- 勾选ES6转ES5选项
- 勾选不检验合法域名选项
- 基础库版本 > 2.1.1
- 点击编译即可运行
注意事项
合法域名
如果您要发布小程序,请将以下域名在【微信公众平台】>【开发】>【开发设置】>【服务器域名】中进行配置
进入微信公众平台,在小程序开发的服务器域名配置相关域名信息
添加到 request 合法域名:
域名 说明 是否必须 https://webim.tim.qq.com
Web IM 业务域名 必须 https://yun.tim.qq.com
Web IM 业务域名 必须 https://pingtas.qq.com
Web IM 统计域名 必须 添加到 uploadFile 合法域名:
域名 说明 是否必须 https://cos.ap-shanghai.myqcloud.com
文件上传域名 必须 添加到 downloadFile 合法域名:
域名 说明 是否必须 https://cos.ap-shanghai.myqcloud.com
文件下载域名 必须
开发运行
项目目录
├───sdk/ - 存放tim-wx.js,demo 中未使用,仅供自行集成
├───build/
├───config/
├───dist/
│ └───wx/ - MpVue 项目编译后文件目录,使用小程序开发工具导入此文件夹
├───src/
│ ├───components/ - 组件
│ ├───pages/ - 页面
│ ├───store/ - Vuex 目录
│ ├───stylus/ - 全局主题色样式,可以修改全局颜色
│ ├───utils/ - 方法
│ ├───app.json
│ ├───App.vue
│ └───main.js
├───static/ - 静态依赖资源
│ ├───debug/ - 包含 userSig 验证登录方法
│ ├───images/ - 图片
│ └───iview/ - 使用的 iview 组件
├───_doc/
├───.babelrc
├───.editorconfig
├───.eslintignore
├───.eslintrc.js
├───.postcssrc.js
├───index.html
├───package-lock.json
├───package.json
├───project.config.json
└───README.md
准备工作
- 获取到您应用的
SDKAPPID
和SECRETKEY
,方式参考:密钥获取方法 - 安装微信小程序 开发者工具
-
安装 nodejs 环境 ( Version > 8 ) ,选择合适您安装环境的安装包
- 安装后,在命令行输入
node --version
,如果 > 8 即可
- 安装后,在命令行输入
启动流程
-
克隆仓库到本地
# 命令行执行 git clone https://github.com/tencentyun/TIMSDK.git # 进入 Demo 项目 cd TIMSDK/WXMini
- 将
project.config.json
文件中的appid
修改为自己微信小程序的appid
-
配置
SDKAPPID
和SECRETKEY
,获取方式参考:密钥获取方法- 打开
/static/debug/GeneraterUserSig.js
文件 - 按图示填写相应配置后,保存文件
- 打开
-
安装依赖并启动
# 安装demo构建和运行所需依赖 npm install # 构建并生成最终可在小程序开发工具内使用的代码 npm run start
使用
npm install
命令,如果有些依赖包无法成功安装您可以试着切换源, 例如:
npm config set registry http://r.cnpmjs.org/
然后再执行
npm install
- 使用微信开发者工具导入项目,目录为
/dist/wx
-
本地配置如下图所示
- 勾选ES6转ES5选项
- 勾选不检验合法域名选项
- 基础库版本 > 2.1.1
![](https://user-gold-cdn.xitu.io/2019/9/16/16d37e19553aa202?w=410&h=517&f=png&s=24754)
-
点击开发工具的编译即可预览该项目
注意事项
合法域名
如果您要发布小程序,请将以下域名在【微信公众平台】>【开发】>【开发设置】>【服务器域名】中进行配置
进入微信公众平台,在小程序开发的服务器域名配置相关域名信息
添加到 request 合法域名:
域名 说明 是否必须 https://webim.tim.qq.com
Web IM 业务域名 必须 https://yun.tim.qq.com
Web IM 业务域名 必须 https://pingtas.qq.com
Web IM 统计域名 必须 添加到 uploadFile 合法域名:
域名 说明 是否必须 https://cos.ap-shanghai.myqcloud.com
文件上传域名 必须 添加到 downloadFile 合法域名:
域名 说明 是否必须 https://cos.ap-shanghai.myqcloud.com
文件下载域名 必须
项目截图
备注
页面结构
目录 /src/pages
页面 | 简介 |
---|---|
login/ | 登录页 |
index/ | 首页,对话列表 |
chat/ | 聊天对话页 & 群信息/用户信息 |
contact/ | 通讯录 |
own/ | 个人信息 |
create/ | 创建群聊 |
members/ | 群成员 |
profile/ | 修改个人信息 |
groups/ | 群列表 |
groupDetail/ | 群详细页 |
system/ | 系统通知页 |
blacklist/ | 黑名单页 |
detail/ | 个人信息&群信息 |
friend/ | 发起会话 |
mention/ | @选择页 |
注意事项
1. 避免在前端进行签名计算
本 Demo 为了用户体验的便利,将 userSig
签发放到前端执行。若直接部署上线,会面临 SECRETKEY
泄露的风险。正确的 userSig
签发方式是将 userSig
的计算代码集成到您的服务端,并提供相应接口。在需要 userSig
时,发起请求获取动态 userSig
。更多详情请参见 服务端生成 UserSig。
2. 如果无法访问github或者访问速度过慢
下载zip包
解压后,进入 TIMSDK/WXMini目录,即可查看demo代码。