评论

腾讯云 微信小程序 即时通信IM demo

腾讯云 微信小程序 即时通信IM demo

产品简介

即时通信(Instant Messaging,IM)基于QQ 底层 IM 能力开发,仅需植入 SDK 即可轻松集成聊天、会话、群组、资料管理能力,帮助您实现文字、图片、短语音、短视频等富媒体消息收发,全面满足通信需要。

应用场景

客服咨询

即时通信 IM 可满足商家与用户多场景沟通的需要,为客户提供专属客服服务,提升服务效率,通过与智能机器人结合,可有效降低人力成本,沉淀客户价值。

直播弹幕

即时通信 IM 可支持弹幕、 送礼和点赞等多消息类型,轻松打造良好的直播聊天互动体验;提供弹幕内容审核能力,保证您的直播免受不雅信息干扰。

网红带货

即时通信 IM 与商业直播相结合,通过提供点赞、询价、购物券等特定消息类型,帮助直播客户实现流量变现。

教学白板

即时通信 IM 为可提供在线课堂,文本消息,画笔轨迹等能力,轻松实现教师学生沟通、画笔轨迹保存、大班课与小班课教学等教学场景。

社交沟通

即时通信 IM 可实现单聊、群聊、弹幕等多种聊天模式,支持文字、图片、语音、短视频等多种消息类型,有效提升用户粘性与活跃度。

企业办公

即时通信 IM 为企业客户提供覆盖桌面与移动端的完整解决方案,满足设备无缝切换的需求,提高企业内外沟通效率。

智能设备

即时通信 IM 提供人与物、物与物协同通信,携手共进引领 5G 通信时代潮流。

快速体验,IMSDK小程序demo运行

本 IM 小程序 demo 是基于 MpVue 框架进行开发的。一分钟跑通 demo 小节只是用于引导您打开编译后的文件进行快速预览,如果您想要进行二次开发,请看开发运行小节。

一分钟跑通demo

  1. 克隆仓库到本地

    # 命令行执行
    git clone https://github.com/tencentyun/TIMSDK.git
    
    # 进入小程序 Demo 项目
    cd TIMSDK/WXMini
    
  2. 安装微信小程序 开发者工具

  3. 使用微信开发者工具导入项目,请注意目录为 /dist/wx,然后填入自己的小程序 AppID。

  1. 配置 SDKAPPIDSECRETKEY,获取方式参考:密钥获取方法
    • 打开 /debug/GeneraterUserSig.js 文件

    • 按图示填写相应配置后,保存文件

  1. 本地配置如下图所示

    • 勾选ES6转ES5选项
    • 勾选不检验合法域名选项
    • 基础库版本 > 2.1.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

准备工作

  1. 获取到您应用的 SDKAPPIDSECRETKEY,方式参考:密钥获取方法

  2. 安装微信小程序 开发者工具

  3. 安装 nodejs 环境 ( Version > 8 ) ,选择合适您安装环境的安装包

    • 安装后,在命令行输入node --version ,如果 > 8 即可

启动流程

  1. 克隆仓库到本地

    # 命令行执行
    git clone https://github.com/tencentyun/TIMSDK.git
    
    # 进入 Demo 项目
    cd TIMSDK/WXMini
    
  2. project.config.json文件中的appid修改为自己微信小程序的appid

  1. 配置 SDKAPPIDSECRETKEY,获取方式参考:密钥获取方法
    • 打开 /static/debug/GeneraterUserSig.js 文件

    • 按图示填写相应配置后,保存文件

  1. 安装依赖并启动

    # 安装demo构建和运行所需依赖
    npm install
    
    # 构建并生成最终可在小程序开发工具内使用的代码
    npm run start
    

    使用 npm install 命令,如果有些依赖包无法成功安装

    您可以试着切换源, 例如: npm config set registry http://r.cnpmjs.org/

    然后再执行 npm install

  2. 使用微信开发者工具导入项目,目录为/dist/wx

  3. 本地配置如下图所示

    • 勾选ES6转ES5选项
    • 勾选不检验合法域名选项
    • 基础库版本 > 2.1.1

  4. 点击开发工具的编译即可预览该项目

    注意事项

    合法域名

    如果您要发布小程序,请将以下域名在【微信公众平台】>【开发】>【开发设置】>【服务器域名】中进行配置

    进入微信公众平台,在小程序开发的服务器域名配置相关域名信息

    添加到 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代码。

最后一次编辑于  2019-09-16  
点赞 3
收藏
评论

10 个评论

  • 你是人间四月天
    你是人间四月天
    2020-03-31

    原生的demo没得,然后项目要对接IM,跑mpvue的有什么意义?能不能靠谱点啊。

    2020-03-31
    赞同 3
    回复 6
    • 呜啊吴👻
      呜啊吴👻
      2020-03-31
      你们现在是自己写页面吗
      2020-03-31
      1
      回复
    • 你是人间四月天
      你是人间四月天
      2020-03-31回复呜啊吴👻
      嗯 只有自己弄,还有好多东西要对接:首先要获取未读已读消息,然后发消息,然后刷新消息,还有查看历史记录消息。连最基础的用户头像也得自己去获取,。。。
      2020-03-31
      回复
    • 呜啊吴👻
      呜啊吴👻
      2020-03-31
      还有emoji表情 消息时间 系统消息 自定义消息 消息是语音格式还是文字还是图片 这里面可太多东西了....
      2020-03-31
      回复
    • 你是人间四月天
      你是人间四月天
      2020-03-31回复呜啊吴👻
      对的,你说这些我们二期再弄,目前只做单对单的发送文字消息
      2020-03-31
      回复
    • 呜啊吴👻
      呜啊吴👻
      2020-03-31
      我们要对app app那边有ui库已经把这些功能都对接完了 小程序这边就要跟上了 我起初一直以为又ui库 没想到小程序这边没有
      2020-03-31
      回复
    查看更多(1)
  • 凯文
    凯文
    2021-07-09

    我把 https://webim.tim.qq.com 配置到小程序的request合法域名中了,可是运行小程序还是报错,请问是怎么回事。

    2021-07-09
    赞同 2
    回复 1
    • 飘,,,,,
      飘,,,,,
      2023-03-28
      配置进去要重启小程序开发者工具的。否则经常识别不到,最新的域名配置。如果还不行的话,需要点击详情----->项目配置----->点击圆圈箭头进行刷新,确保开发者工具同步到域名。之后清缓存,重新编译
      2023-03-28
      回复
  • milk
    milk
    2019-12-10

    有没有原生的接im的,你们官方sdk用的第三方框架啥情况

    2019-12-10
    赞同 1
    回复 4
    • NewJerusalem
      NewJerusalem
      2019-12-10
      后续会有,现在是基于mpvue做的
      2019-12-10
      回复
    • 倦鸟
      倦鸟
      2020-03-24
      原生的demo还没出来吗,自己实现页面也挺麻烦的..
      2020-03-24
      回复
    • 呜啊吴👻
      呜啊吴👻
      2020-03-31回复倦鸟
      请问 你找到解决方法了吗 我们的小程序也是原生写的 现在要对这个im 真的只能自己写页面吗 感觉好麻烦啊
      2020-03-31
      回复
    • xiaopeng
      xiaopeng
      2020-07-28回复NewJerusalem
      后续还没到来么
      2020-07-28
      回复
  • 韦不吕
    韦不吕
    2019-09-16

    小程序能有这样的功能吗?

    2019-09-16
    赞同 1
    回复 6
    • NewJerusalem
      NewJerusalem
      2019-09-16
      可以的,小程序还可以做音视频直播和rtc通话,功能很丰富。
      2019-09-16
      回复
    • ice
      ice
      2019-09-21回复NewJerusalem
      我总感觉用第三方的IM太有局限性,而且自己写一个也并不麻烦
      2019-09-21
      回复
    • NewJerusalem
      NewJerusalem
      2019-09-21回复ice
      请问觉得局限在哪里?愿闻其详。你自己写一个IM,请问你会如何设计API使得简洁易懂好用,如何写文档,如何解决消息发送成功率和到达率,如何解决百万人大群的消息收发?如何解决消息的存储,鉴权,防脏字,如何过滤黄图,如何解决全平台互通?...等等这些问题,有信心搞定吗?
      2019-09-21
      回复
    • ice
      ice
      2019-09-23回复NewJerusalem
      比如打通用户系统,例如现在公司有3个产品,app,小程序,网页版,想他们之间打通IM通讯,外部对接感觉比较麻烦,每个产品的用户体系是独立的,但是可以通过关联关系关联起来,例如寻款,用户发送了商品链接,在im界面生成图文详情,商品界面甚至直接加购物车,例如在用户离线时要发送系统业务通知,又不想在每个产品客户端处理,我感觉对接第三方的IM和系统内部业务集成还是有些麻烦
      2019-09-23
      回复
    • ice
      ice
      2019-09-23
      技术发展到现在,IM搭建的门槛已经不高了,很多现成的框架都可以很方便程序员搭建一套IM,还可以很方便与自己的系统集成,数据丢给第三方,这中间还有一个信任度问题
      2019-09-23
      1
      回复
    查看更多(1)
  • Leo
    Leo
    2023-04-09

    请问用户的历史聊天信息如何保存获取?

    2023-04-09
    赞同
    回复
  • 十
    2020-12-06

    一个小程序里可以使用两个SDKAppID和密钥吗

    2020-12-06
    赞同
    回复
  • 张前龙_微信开发_网站开发
    张前龙_微信开发_网站开发
    2020-12-04

    小程序编译报错: TypeError: Cannot read property 'mark' of undefined

    npm install 也报错


    error code ERESOLVE

    75 error ERESOLVE unable to resolve dependency tree

    76 error

    77 error While resolving: [1mtimsdk-wx-demo[22m@[1m2.0.0[22m

    77 error Found: [1mwebpack[22m@[1m3.12.0[22m[2m[22m

    77 error [2mnode_modules/webpack[22m

    77 error [33mdev[39m [1mwebpack[22m@"[1m^3.11.0[22m" from the root project

    77 error

    77 error Could not resolve dependency:

    77 error [35mpeer[39m [1mwebpack[22m@"[1m^4.0.0 || ^5.0.0[22m" from [1mcss-loader[22m@[1m3.6.0[22m[2m[22m

    77 error [2mnode_modules/css-loader[22m

    77 error [33mdev[39m [1mcss-loader[22m@"[1m^3.0.0[22m" from the root project

    77 error


    2020-12-04
    赞同
    回复 1
    • 源
      2020-12-07
      我也遇到同样问题,请问你解决了吗?怎么解决的?
      2020-12-07
      回复
  • 竹
    2020-05-23

    楼主,您好。我们比赛项目就是简单的文字聊天,可以直接使用这个demo进行使用吗?


    2020-05-23
    赞同
    回复 3
  • 布朗
    布朗
    2019-11-21

    为什么点击不进聊天界面呢

    2019-11-21
    赞同
    回复
  • 老张
    老张
    2019-09-16

    在微信上做IM真的好吗?

    在奔驰店里卖宝马?淘宝网上开微店?

    2019-09-16
    赞同
    回复 4
    • NewJerusalem
      NewJerusalem
      2019-09-16
      微信是熟人社交,IM作为基础通信能力,可不止熟人社交这一个应用场景啊。老铁别被技术名词限制了产品想象力
      2019-09-16
      1
      回复
    • 老张
      老张
      2019-09-16回复NewJerusalem
      不是我们不敢做,而是没有先例啊。2年小程序了,怎么着也该有人成功做出一个吧?
      2019-09-16
      回复
    • NewJerusalem
      NewJerusalem
      2019-09-16回复老张
      im属于基础服务和能力,可以应用于很多业务场景,如斗鱼直播、QQ音乐等都在用,我们现在把这个能力移植到了小程序端,已经有很多外部业务在接入使用了
      2019-09-16
      回复
    • 峥
      2019-10-21
      杠精
      2019-10-21
      1
      回复
登录 后发表内容