美文网首页微信小程序
创建微信小程序接入并Tencent即时通信IM

创建微信小程序接入并Tencent即时通信IM

作者: 鹿简luz | 来源:发表于2021-09-24 13:56 被阅读0次

官网地址:https://cloud.tencent.com/document/product/269

一:小程序配置及准备工作;

1.微信公众平台 -> 开发 -> 开发设置 -> 服务器域名,配置域名;

request域名:

https://web.sdk.qcloud.com
https://webim.tim.qq.com

socket域名:

wss://wss.im.qcloud.com
wss://wss.tim.qq.com

uploadFile域名:

https://cos.ap-shanghai.myqcloud.com

downloadFile域名:

https://cos.ap-shanghai.myqcloud.com
2. 新建小程序项目,填入AppID;
image.png

二:集成小程序SDK;

官网地址:https://cloud.tencent.com/document/product/269/37413

image.png
根据提示进行配置;
1.打开项目文件cmd进入;
image.png
2.输入npm init 一路回车;
npm init

3.继续输入 ;

npm install tim-wx-sdk --save
npm install tim-upload-plugin --save

项目文件夹多出以下目录;

image.png
4.进入小程序开发者工具;
image.png
选择构建npm,然后确认;
构建npm

项目文件夹多出以下目录


image.png

三:开始进入项目配置;

1. 前期配置工作,

A:注册腾讯云账户并登录;

B:创建新应用;

官网地址:https://console.cloud.tencent.com/im

即可获取创建的应用SDKAppID;

image.png
C:点击应用卡片,进入应用基础配置页面;
image.png
D:右侧签名生成工具内,填入自己的用户名,点击生成签名,
即可获取用户名 <userID> 及签名字段 <userSig>;

image.png
2. 引入模块并初始化;

Index.js文件夹内填入 上方获取到的SDKAppID:

import TIM from 'tim-wx-sdk';
import TIMUploadPlugin from 'tim-upload-plugin';
let options = {
  SDKAppID: 140****579 // 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
};
// 创建 SDK 实例,`TIM.create()`方法对于同一个 `SDKAppID` 只会返回同一份实例
let tim = TIM.create(options);  // SDK 实例通常用 tim 表示
// 注册腾讯云即时通信 IM 上传插件
tim.registerPlugin({'tim-upload-plugin': TIMUploadPlugin});
3. 调用即时通信IM SDK;

A:首先调用即时通信IM接口事件,官网解释为 <避免漏掉SDK派发的事件>
官方文档:https://web.sdk.qcloud.com/im/doc/zh-cn//SDK.html


// 监听事件,如:
tim.on(TIM.EVENT.SDK_READY, function(event) {
  // 收到离线消息和会话列表同步完毕通知,接入侧可以调用 sendMessage 等需要鉴权的接口
  // event.name - TIM.EVENT.SDK_READY
});

tim.on(TIM.EVENT.MESSAGE_RECEIVED, function(event) {
  // 收到推送的单聊、群聊、群提示、群系统通知的新消息,可通过遍历 event.data 获取消息列表数据并渲染到页面
  // event.name - TIM.EVENT.MESSAGE_RECEIVED
  // event.data - 存储 Message 对象的数组 - [Message]
});

B:接着登录即时通信IM的login接口,登陆成功后就可以调用获取会话列表Conversation,创建文本消息实例createTextMessage,发送消息sendMessage .....

官网文档登录: https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html#login

image.png

具体接口的调用查看官方文档接口

相关文章

  • 创建微信小程序接入并Tencent即时通信IM

    官网地址:https://cloud.tencent.com/document/product/269[https...

  • 微信小程序之环信接入

    IM 聊天接入思考过程 前期 初识IM聊天 带着问题去调研 必须接入环信吗?除了环信是否可以接入其他即时通信? 环...

  • IM小结

    作用: 腾讯云云通信 IM 提供功能丰富,易于接入的即时通信服务。云通信 IM 能提供单聊、群聊、资料托管、关系链...

  • iOS-App跳转微信小程序

    官方接入介绍App打开微信小程序并传递参数

  • 小程序1——开启小程序之旅

    目录:1、用新的邮箱创建微信小程序公众平台2、在微信小程序公众平台,创建微信小程序,并获取微信小程序APPID3、...

  • 腾讯IM推送问题怎么查?

    前言:对于新接入腾讯云IM即时通信的开发者来说,接入过程中,难免会遇到一些问题,接下来笔者将针对使用腾讯云IM接入...

  • 一篇文章为你深度解析HTTPS 协议

    一、微信小程序接入的困境 农历新年将至,微信小程序也如期发布,开发者在接入微信小程序过程中,会遇到以下问题: 小程...

  • 微信小程序创建项目 我们需要通过开发者工具,来完成微信小程序创建和代码编辑。 开发者工具安装完成后,打开并使用微信...

  • 即时通讯IM技术领域提高篇

    [TOC] 即时通讯IM技术领域提高篇 即时通讯IM技术领域基础篇 接入层的服务器程序如何升级 对于当前特定Acc...

  • 微信小程序

    制作微信小程序: A:微信小程序接入流程 注册:微信公众平台注册小程序,同步进行信息完善和开发 小程序信息完善:填...

网友评论

    本文标题:创建微信小程序接入并Tencent即时通信IM

    本文链接:https://www.haomeiwen.com/subject/imkzgltx.html