融云im小程序集成初体验

最近领导让做一个小程序端的聊天功能，基于多方考虑，最终选择了融云的im来实现，那就先写个demo体验下吧。

首先呢，当然是查看官方文档，文档地址如下:
https://docs.rongcloud.cn/v4/views/im/noui/guide/private/setting/include/mini.html

需要注意要在管理后台的小程序服务下将小程序的开关打开，否则会报错，相关的demo也可从后端下载到。

拿到sdk了，我们就可以上手集成了，嘻嘻……

由于是demo，暂时先把appkey和token配置写死了，放在了config.js中，appkey和token可以从管理后台获取到。

其次呢，我们需要把im引入，可以整一个公用的js文件，在此引入im sdk，初始化一个全局的im对象（在此呢需要注意im对象一定是全局的，不能赋值给小程序里面的data值，之前我就犯了错，赋值给了data，导致页面只要一调用setData方法就一直报Converting string to Json的错误，大家可以在集成过程中避雷呢）。

引入代码如下：

const RongIMLib = require("./RongIMLib-3.0.7-dev.js");
const config = require("../public/config");
const imInstance = RongIMLib.init({ appkey: config.appkey});
export {RongIMLib,config,imInstance
}

接着我们创建一个主页面，在这个页面中我们可以建立融云的连接以及获取会话列表。

connect() { if (this.data.isConnect) {this.data.im.disconnect();}imInstance.connect({ token: config.token }).then(user => {this.isConnect = true;this.getConversationList();console.log('链接成功, 链接用户 id 为: ', user);}).catch(error => {console.log('链接失败: ', error);});
},

注意事项：在此需要注意安全域名问题，要不会报错，导致连接不上融云的服务。

1．开发环境的话，可以在右上角的详情中的本地设置中将不校验合法域名的地方打上对勾。

2．生产环境的话，可以参考如下地址设置：
https://docs.rongcloud.cn/v4/views/im/noui/guide/private/setting/include/mini.html

这样的话就可以连接成功了，哈哈，第一步总算是跨出去了。

接下来我们可以在连接成功后获取会话列表，代码如下：

imInstance.Conversation.getList().then(list => {this.setData({conversationList: list})
}).catch(error => {console.log('获取会话列表失败: ', error);
});

点击详情跳转到聊天页面,在此需要注意如果要获取历史记录的话是要开通im商业版-单群聊云存储的。开通后按照api使用说明获取就可以了，代码如下:

getHistory(conversation) {const option = {timestrap: +new Date(),count: 10};conversation.getMessages(option).then((result) => { var hasMore = result.hasMore; // 是否还有历史消息可以获取this.setData({messageList: result.list})});
}

接下来发送消息等其他接口，正常调用就可以了，和web端sdk基本是一致的，参考官方文档即可，整个集成过程花了两三天吧，还算顺利。有不足之处还望大家多多指教，多多交流……

融云官网地址：https://www.rongcloud.cn/

融云开发文档地址：https://docs.rongcloud.cn/v4/

融云im小程序集成初体验相关推荐

taro 重新加载小程序_Taro开发微信小程序的初体验
了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:"Hey, 你听说了Taro么,听说只需要写一套程序就可以生成H5,小程序以及RN的代码模板,并且类似于React ...
小程序开发初体验，从静态demo到接入Bmob数据库完全实现
之前我胖汾公司年会.问我能不能帮忙搞个小程序方便他们进行游戏后的惩罚/抽奖使用.出了个简单的设计图.大概三天左右做了个简单的小程序.目前提交审核了.对于写过一小段时间vue来说小程序很容易上手.写法和 ...
微信小程序开发初体验
前言最近不太忙,正好前两天看到园子里的大牛分享的微信小程序前端的UI界面--WeUI,看着非常不错,所以尝试着写了一下微信小程序一.简单介绍下WeUI WeUI 是一套同微信原生视觉体验一致的基础 ...
微信小程序之初体验（24点游戏）
根据网上的教程,申请了小程序开发,试着玩玩哈. 申请教程: http://www.ym360.cn/4049587.html 主要熟悉了一下小程序开发,熟悉了下各个组件主要写了个九九乘法表.和24点 ...
小程序AI初体验 | 做一款实时识别车辆报价的小程序
小程序缩放_缩放流星应用程序的初体验
小程序缩放 by Elie Steinbock 埃莉·斯坦博克(Elie Steinbock) 缩放流星应用程序的初体验 (First Experiences Scaling a Meteor Ap ...
SAP成都研究院大卫哥：SAP C4C中国本地化之微信小程序集成
今天的文章来自Wu David,SAP成都研究院C4C开发团队的架构师,在加入团队之前曾经在SAP上海研究院工作,组内同事习惯亲切地称呼他为大卫哥. 大卫哥身高据Jerry目测有1米8以上,是成都C4 ...
微信小程序集成腾讯IM，实现实时音视频通话，1V1聊天
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
微信小程序集成实时音视频通话功能
微信小程序集成实时音视频通话功能背景在项目的开发当中,很多时候,我们会有音频.视频通话的需求,但是一般都不会自己来写,所以我们就需要借助第三方来实现.尤其是这次的项目开发当中,需要在微信小程序当中 ...

融云im小程序集成初体验

融云im小程序集成初体验

融云im小程序集成初体验相关推荐

最新文章

热门文章