项目文章索引
1、项目引言
2、腾讯云后台配置TXIM
3、配置项目并实现IM登录
4、会话好友列表的实现
5、聊天输入框的实现
6、聊天界面容器的实现
7、聊天消息项的实现
8、聊天输入框扩展面板的实现
9、聊天会话管理的实现
10、聊天记录的加载与消息收发
11、定位SD配置与收发定位消息
12、贴图表情的定制化开发
13、腾讯云后台配置TRTC功能
14、集成音视频通话功能
15、集成仿微信的拍照,相册选择插件
16、集成美颜功能
17、集成TPNS消息推送(暂未接入)
@
文章概述
前面两篇文章过去了,啥代码都没写,本来今天还是啥代码都不像写的,因为配置Uniapp也有不少内容,但是实在过意不去,咱今天的文章稍微长一点,不仅配置好功能,还要把用户登录给实现。
一、配置Uniapp工程
1.申请试用
打开uniapp 腾讯云TXIM原生插件地址:https://ext.dcloud.net.cn/plugin?id=5116 并点击“试用”,如果您已经创建了APP,直接选择对应的APP即可,如果未创建APP,请点击“管理我的APP”,创建APP后刷新界面再点击试用。
2.将示例工成导入到HBuilderX
试用成功之后,我们可以将DEMO项目导入到HbuilderX,导入成功之后就看到代码了...
3.配置插件
点击左侧的"manifest.json",进入"App启动界面配置",先将图标配置一下,以免生成失败。
进入“App原生插件配置”,将无用的插件删除,然后点击“选择云端插件”
选择刚才试用的插件,并确定,完成插件的配置
二、打包自定义基座
因为试用插件只能在自定义基座中运行,所以我们需要来打包自定义基座。
1.安装依赖
在打包之前,我们需要安装依赖,这里需要开发者安装nodejs运行环境,以及安装hbuilderx scss编译插件,没有安装的开发者请按照以下链接安装对应的环境。
nodejs官方网站:https://nodejs.org/zh-cn/
nodejs中文网:http://nodejs.cn/
scss/sass编译插件:https://ext.dcloud.net.cn/plugin?id=2046
安装完成之后,开发者可以在hbuilderx中打开终端,输入以下命令完成依赖安装。
2.制作自定义基座
由于uniapp框架限制问题,使用原生插件必须先打包自定义基座,然后通过自定义基座开发调试。这里我们先演示安卓如何打包自定义基座并且使用自定义基座进行开发
(PS:IOS操作流程一致,证书需要使用开发证书或者企业证书,不能使用发布证书)
三、配置项目的AppId、密钥、用户信息
1.配置AppId
首先我们需要修改来自Demo工程中的SDKAppID,正如前文所说,每个IM应用都有其专属的SDKAppID,那么在demo工程中我们需要修改utils/txim.js文件此处位置
2.配置用户信息
一般情况来说我们是需要后端反馈用户信息的以便登录TXIM,而测试环境下我们需要先预置测试用户信息,以便前端的本地开发,在demo中我们需要找到以下文件修改对应位置(请注意此处的userId为字符串,请勿提供整数)
3.调用登录代码执行登录
我们来看看登录的代码,当我们点击登录的时候,我们通过绑定点击事件获取了userId和userSig之后,我们只需要通过执行以下代码即可登录TXIM SDK,从而开始聊天,消息监听等逻辑。
this.$txim.login(item.id, item.sign, async res => {
if (res.code == 0) {
// 登录成功
} else {
// 登录失败
}
})
修改完成之后运行项目,效果如下:
四、项目开源地址及交流群
项目开源地址:https://gitee.com/ckong/Zhimi.OpenSource.UniApp.TXIM.Vue
Uniapp开发交流群:755910061
三、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-配置项目并实现IM登录的更多相关文章
-
一、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-项目引言
项目文章索引 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展面板的 ...
-
二、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-腾讯云后台配置TXIM
项目文章索引 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展面板的 ...
-
五、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-聊天输入框的实现
会话好友列表的实现 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展 ...
-
四、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-会话好友列表的实现
会话好友列表的实现 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展 ...
-
七、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-聊天消息项的实现
会话好友列表的实现 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展 ...
-
八、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-聊天输入框扩展面板的实现
聊天输入框扩展面板的实现 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入 ...
-
Android 音视频开发(一) : 通过三种方式绘制图片
版权声明:转载请说明出处:http://www.cnblogs.com/renhui/p/7456956.html 在 Android 音视频开发学习思路 里面,我们写到了,想要逐步入门音视频开发,就 ...
-
Android IOS WebRTC 音视频开发总结(六六)-- 三个角度分析美女视频直播这个行业
本文主要从用户,公司和技术角度分析美女视频直播这个行业,文章最早发表在我们的微信公众号上,支持原创,详见这里, 欢迎关注微信公众号blackerteam,更多详见www.rtc.help 美女视频直播 ...
-
Android IOS WebRTC 音视频开发总结(六三)-- 2016国内IM云服务行业分析
本文主要国内IM云服务行业分析,文章最早发表在我们的微信公众号上,详见这里,欢迎关注微信公众号blackerteam,更多详见www.blackerteam.com 谈到IM我们最先想到的是qq和微信 ...
随机推荐
-
设计模式(八): 从“小弟”中来类比";外观模式";(Facade Pattern)
在此先容我拿“小弟”这个词来扯一下淡.什么是小弟呢,所谓小弟就是可以帮你做一些琐碎的事情,在此我们就拿“小弟”来类比“外观模式”.在上面一篇博文我们完整的介绍了“适配器模式”,接下来我们将要在这篇博客 ...
-
C# listview 拖动节点
/// <summary> /// 当拖动某项时触发 /// </summary> /// <param name="sender"></ ...
-
【verilog】fdisplay中如何保存有符号形式
2014-01-02 10:10:29 参考:http://xilinx.eetop.cn/viewthread-275584 使用系统任务$signed,如 $fdisplay(fp, " ...
-
hdu 1874 畅通工程续 Dijkstra
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1874 题目分析:输入起点和终点,顶点的个数,已连通的边. 输出起点到终点的最短路径,若不存在,输出-1 ...
- jsp中全局变量和局部变量的设置
-
OpenCV入门教程
OpenCV入门教程 作者:于仕琪 OpenCV入门教程.pdf
-
Java并发,看到了,就记录下呗
在这篇博客中,主要把之前看的书的内容记录一下,个人感觉还是可以的,原题是这样的:开发一个高效的缓存.这里指的是单机. 首先我来看当前的一个版本 public interface Computable& ...
-
PHP MySQL 插入数据
PHP MySQL 插入数据 使用 MySQLi 和 PDO 向 MySQL 插入数据 在创建完数据库和表后,我们可以向表中添加数据. 以下为一些语法规则: PHP 中 SQL 查询语句必须使用引号 ...
-
selenium处理元素定位到了点击无效问题
在WEB自动化测试过程中,经常会遇到这样的问题: 元素定位到了,但是点击无效?有人可能会问了,怎么判断元素定位到了,这个问题很好判断 1.给元素加高亮显示 self.driver.execute_sc ...
-
支持向量机(SVM)、支持向量回归(SVR)
1.支持向量机( SVM )是一种比较好的实现了结构风险最小化思想的方法.它的机器学习策略是结构风险最小化原则 为了最小化期望风险,应同时最小化经验风险和置信范围) 支持向量机方法的基本思想: ( 1 ...