如何在Uni-app中通过腾讯IM SDK实现社交应用和直播互动等功能
Uni-app想开发社交应用、IM、店铺客服、嵌入式社交模块、在线直播互动,这些功能Uni-app官方也没提供SDK,怎么办呢?找IM老大腾讯云啊,今天我们就在Uni-app中把腾讯云即时通讯TXIM SDK跑起来,实现发发消息,聊聊天等功能。废话不多说,开干!
1、插件的获取
1.1在线插件获取和运行请参考本站文章《Uni-app原生插件入门使用教程「1」:从Uni-app插件市场获取并试用插件》(文章地址),对应的插件地址:
智密-即时通讯TXIM(商业版)(试用就用商业版,省事)
智密-即时通讯TXIM(免费版)(链接里有免费试用的要求,当然要求也不高)
PS:免费版和收费版功能相同,都永久维护,收费版可以按照客户要求定制。当然目前功能足够丰富,可以说已经不需要定制了,我们把IM的接口基本都开放了,并且自己做了一套仿微信的IM(源码只提供给收费版客户,咱也要养开发人员不是),效果杠杠滴。
1.2离线插件获取和运行请参考本站文章:《Uni-app原生插件入门使用教程「2」:如何离线使用原生插件》(文章地址),对应插件地址:插件链接
试用的时候,建议试用在线的收费版插件(反正试用的时候免费的),为啥不用免费版呢... 因为免费版需要到我们网站注册才能获取到30天的免费试用,反而变得麻烦了;为啥不用离线包呢... 因为这不仅需要到我们网站注册,而且更关键的是超过40M的包去打包是要收费的,能白嫖的尽量白嫖吧...大家赚钱都不容易。
2、腾讯云中开通服务并获取相关参数(这里的每一步都要照做,后面要考...)
2.1 登录腾讯云,并找到“即时通讯IM”
首先麻烦您登陆腾讯云管理后台(跳转链接),(万一、如果、假设很幸运的你没有腾讯云账号,顺带你想用免费版,可以直接私信后台,也可以添加微信:zhimitec,获取我的推广信息之后再注册。天下没有免费的午餐,你免费的东西我得从你在腾讯云的消费中拿回来不是)登陆之后您将进入新版管理界面,旧版管理界面用户请自行切换至新版管理界面。进入之后,请在首页搜索框输入“即时通信 IM”,点击搜索结果进入 即时通信 IM应用总览。
2.2 创建应用
进入 即时通信 IM应用总览 之后,点击创建应用(如已有相关应用请跳过这一步)。
创建完成之后,我们需要点击已经创建的应用进入应用管理面板。
2.3 获取SDK_AppID(这里一会要考,看仔细喽...)
如图所示这是我们刚刚创建的“TXIM”应用对应的管理面板,我们需要记录 应用资料 - SDKAppID,稍后在uniapp项目中我们需要用到,如图所示,我们的SDKAppID是1400521882(请实际开发中使用您自己创建的应用对应的SDKAppID,请勿使用1400521882)
2.4 获取UserID和User Sign(这里一会要考,看仔细喽...)
测试时候生成的UserID + UserSign有效期为180天,需要通过腾讯云后台生成,在前面“准备环境”一文提到过的应用后台,具体操作如下。
请注意,用户名(UserID)使用数字/字母/数字+字母的组合,请勿使用中文,否则将导致登陆或发送消息时候抛异常无法正常使用。
2.5 官方SDK文档
因为我们的DEMO无法调用到所有的方法,但是我们在对接的时候尽量按照官方SDK的API进行了暴露,请多看官方SDK。
文档地址:链接
3、将DEMO中腾讯云部分参数更换为您自己的参数
3.1 替换SDK_AppID
请按照步骤2.3进行获取并完成替换。
3.2 替换UserID和User Sign
按照步骤2.4进行获取并完成替换,代码里面是10001用户登录,发送给10002,要看下获取到的数据的话,得换成10002登录,然后看数据回调就能看到10001发过来的数据啦。
4、运行DEMO
此DEMO只包含了单聊部分的接口,群聊部分的接口插件中也进行了集成,可以根据官方SDK的说明直接使用
5、付费版DEMO展示
当然了,做到付费版的DEMO样子,光一个IM插件是不够滴,拍照、拍摄视频、图片/视频选择这部分使用了相册插件,语音视频通话使用了腾讯的实时直播插件,消息推送使用了腾讯的TPNS,后续文章我们会先将用到的插件一个个分解讲述怎么把每个插件跑起来,最后再来写一个用Uniapp来实现微信的整个过程和关键代码(PS:源码目前来说我们只提供给IM付费客户,谁让IM的返点几乎木有呢)。
智密科技,专业开发各类Uniapp原生插件、目前交付给客户的插件已经超过100个各类插件,正在陆续整理上架并分享一切关于Uni-app的教程、资讯。欢迎加入QQ群与作者一起讨论uni-app!
插件使用交流QQ群:755910061
如何在Uni-app中通过腾讯IM SDK实现社交应用和直播互动等功能的更多相关文章
- 如需在APP中使用腾讯QQ登陆,需提前申请获取腾讯QQ的APPKEY和APPSecret。
如需在APP中使用腾讯QQ登陆,需提前申请获取腾讯QQ的APPKEY和APPSecret. 申请流程如下: 步骤1:登陆腾讯开放平台.链接地址: http://open.qq.com/ . 步骤2:填 ...
- uni app中使用自定义图标库
项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...
- uni app中关于图片的分包加载
因为在项目中使用了大量的静态资源图片,使得主包体积过大, 而把这些图片全部放到服务器又有点麻烦,就想能不能把图片也分包,但是直接放在分包下的话导致图片资源找不到了, 在社区中看到大佬分享的十分有用,特 ...
- 怎样禁止手机app 中页面有时候会把数字当做电话号码,从而自动进行打电话功能
想要禁止这种功能,只需要给头不加一个meta标签就可以了, <meta name="format-detection" content="telephone=no& ...
- 如何把apk编译时间和最后次git commit的sha值,写入到app中
需求背景:我们修复Bug的时候,频繁提交APK包,导致测试同学搞不清哪个包才是最新的 比如一个版本3.0.1,我们可能后续基于这个版本陆续提交了好几个修复包 同时,如果服务端ip地址能在界面上配置的话 ...
- 如何在cocos2d项目中enable ARC
如何在cocos2d项目中enable ARC 基本思想就是不支持ARC的代码用和支持ARC的分开,通过xcode中设置编译选项,让支持和不支持ARC的代码共存. cocos2d是ios app开发中 ...
- 如何在NodeJS项目中优雅的使用ES6
如何在NodeJS项目中优雅的使用ES6 NodeJs最近的版本都开始支持ES6(ES2015)的新特性了,设置已经支持了async/await这样的更高级的特性.只是在使用的时候需要在node后面加 ...
- [译]如何在Web开发中使用Python
[译]如何在Web开发中使用Python 原文:HOWTO Use Python in the Web 摘要 这篇文档展示了Python如何融入到web中.它介绍了几种Python结合web服务器的方 ...
- 如何在Qt Creator中导入图标资源
本文主要描述如何在Qt Creator中创建资源文件,并的打入导入图标文件. 查看图标资源文件时,可以在项目的工程文件上鼠标单击右键-Open With-资源编辑器,效果如下图所示: 在项目的工程文件 ...
随机推荐
- 理解ASP.NET Core - 过滤器(Filters)
注:本文隶属于<理解ASP.NET Core>系列文章,请查看置顶博客或点击此处查看全文目录 Filter概览 如果你是从ASP.NET一路走过来的,那么你一定对过滤器(Filter)不陌 ...
- 洛谷 P5048 - [Ynoi2019 模拟赛] Yuno loves sqrt technology III(分块)
题面传送门 qwq 感觉跟很多年前做过的一道题思路差不多罢,结果我竟然没想起那道题?!!所以说我 wtcl/wq 首先将 \(a_i\) 离散化. 如果允许离线那显然一遍莫队就能解决,复杂度 \(n\ ...
- NOIP2020 模拟赛 B 组 Day6
非常巧妙的一场模拟赛,比较偏向于 Atcoder 的风格,考场上做出了 A .C 两题. A. 礼物购买 排完序后一个个礼物地枚举时间复杂度是\(\Theta(nm)\)的,不能接受.但是注意到,若当 ...
- PHP非对称加密-RSA
对称加密算法是在加密和解密时使用同一个密钥.与对称加密算法不同,非对称加密算法需要两个密钥--公开密钥(public key)和私有密钥(private key)进行加密和解密.公钥和密钥是一对,如果 ...
- 问题记录:SNP 标记 phasing
GATK4 检测的SNP标记,有些位点会在检测过程中完成 phasing,在后续做基因型填充的时候有坑. GATK4 phasing 结果的缺失位点不是 ./. 也不是 .|. 而是直接变成一个单独 ...
- Markdown—.md文件是什么?怎么打开?
md全称markdown,markdown也是一种标记语言. md文件其实可以用常用的文本编辑器都可以打开. 用记事本打开,把markdown文件拖到记事本图标上就可以打开 . 用 subli ...
- R语言中的正则表达式(转载:http://blog.csdn.net/duqi_yc/article/details/9817243)
转载:http://blog.csdn.net/duqi_yc/article/details/9817243 目录 Table of Contents 1 正则表达式简介 2 字符数统计和字符翻译 ...
- EXCEL excel中运用ctrl+D、ctrl+enter、ctrl+E批量填充数据
在excel中,利用鼠标拖动可以快速向下或者向右填充序列或者复制单元格.但是利用快捷键也可以实现多种填充方式,本文就为大家介绍一些ctrl系列快捷键的填充,一起来看看吧. 封面tu 一,ctrl+D/ ...
- 突破冯·诺依曼架构瓶颈!全球首款存算一体AI芯片诞生
过去70年,计算机一直遵循冯·诺依曼架构设计,运行时数据需要在处理器和内存之间来回传输. 随着时代发展,这一工作模式面临较大挑战:在人工智能等高并发计算场景中,数据来回传输会产生巨大的功耗:目前内存系 ...
- 关于vue-cli中-webkit-flex-direction: column失效问题
我最近在用vue-cli更新项目,在我引入layer.css后会报错并且使用弹性盒时查看元素的时候没有-webkit-flex-direction: column这个属性会失效 这个本身就不打算给di ...