美文网首页微信小程序
创建微信小程序接入并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://www.haomeiwen.com/subject/imkzgltx.html