直播类小程序，挺全的自己写的就给大家整理下

好长时间没写博客了，关键可能自己段位不够看的人没几个，最近刚接触到直播类的项目废了好大劲搞完了就和大家分享下。

页面部分

首先我《live-player》组件，原生的微信组件他可以直接播放我们的直播流地址
就比如这个这样你就会发现如果你这个地址有推流的情况下咱们的客户端就可以看到了（需要注意的是要在真机上运行）

<live-player  src="rtmp://pili-publish.baidu..com" />

还有些什么延迟时间啊播放模式啊这个可以去查阅官方文档就行

如果要全屏播放就是就是（上图）

我们首先要

"navigationStyle": "custom"  //写在 json文件中 是去处我们顶部导航栏的

可能有人想知道我上面图这个模糊背景咋做的哈哈

<view class="zhuojis"><image src="/assets/images/touxiang.png" class="beijingu"></image></view>

.zhuojis {width: 100%;z-index: -1;-webkit-filter: blur(5px);filter: blur(15px);transform: scale(1.2);position: relative;
}.beijingu {width: 100%;height: 90vh;
}

这样就我们的基本布局就完了

页面悬浮内容实现

就是这种效果我由于我项目问题我暂时不能开源这个页面还望大家理解后期可以了我就把项目上传上来

这块是我们直播页面上部悬浮的一些对话框还有礼物框以及我们的顶部主播栏和榜单

需要注意的是这快我当时用view写完了至于咋写你就按照最基础的布局去写就行简单的绝对定位和相对定位就可以实现这块然后我屁颠屁颠的写完后！

问题出来了所有悬浮在直播上面的东西都没了

然后我找了会发现了问题《层级样式显示问题》然后试了z-index 什么的没用别费力气了兄弟！！哈哈！！

我们要使用《cover-view》来解决

具体什么你仔细看下cover-view介绍就可以了这样的话我们就可以使得我们的内容悬浮在直播上面了

还是会有一定的几率会加载到层级下面这个也暂时是没法避免的就看官方以后的优化了吧

这个时候我们的页面布局就结束了还有很多的细节也没办法说你们遇到了就自己百度吧或者留言私信我都行！

js部分

我用的是即构的服务我这里就用即构的服务来举例子了吧具体自行调整就行

const ZegoSDK = require("../../utils/jZego-wx-1.3.0.js");
var zg;
// 初始化实例
zg = new ZegoSDK.ZegoClient();

然后初始化你的信息

 // 配置必要参数zg.config({appid: this.data.appid, // 必填，应用id，请从 即构管理控制台-https://console.zego.im/acount/register 获取idName: this.data.idName, // 必填，用户自定义id，全局唯一nickName: this.data.nickName, // 必填，用户自定义昵称remoteLogLevel: 0, // 上传日志最低级别logLevel: 0, // 日志级别server: 'wss://baidu.zego.im/ws', //这两处你们自己查logUrl: 'https://baidu.zego.im/httplog' //这两处你们自己查});

引入以后我们就按照他们的官方文档坐登陆什么的就行它这个登陆需要咱们自己的后台去帮助你实现

zg.login(self.data.roomID, self.data.loginType == "1" ? 1 : 2, self.data.token, function(streamList) {// 成功失败处理//这块你可以获取到房间id什么的//这块你可以继续的调用接口拿到你的播放路径  我们是拼接模式所以我们用的地址是直接用七牛云地址拼接房间id拿到的}, function(err) {// 登录失败处理});

这块你可以继续的调用接口拿到你的播放路径我们是拼接模式所以我们用的地址是直接用七牛云地址拼接房间id拿到的

然后到了我们的聊天和礼物的模块了

这个我以为是他后台把这个加载到视频里面然后直接返回的呢哈哈！

实际是:

//房间消息zg.onRecvRoomMsg = function(chat_data, server_msg_id, ret_msg_id) {  //这个方法是接受我门店 房间消息 就是别人别的id发送消息的时候这个这个方法就会触发（需要注意的是这个需要初始化调用一下）}

然后呢

 zg.onGetTotalUserList = function(roomId, userList) {//房间主播信息等}

这些在你服务商的文档里面都可以找到用法相同（需提前初始化调用）

{"time":"2019/11/19 19:48:48.711","level":1,"action":"zb.rh.hfulr","content"}

然后返回的都是写具体的展示逻辑和动画效果需要你们自己去写
（本来想介绍下我的逻辑代码但是这个一个人一个想法我的也不是最好的就不写了就是在这里就你就想办法给他搞到页面上就行）

还要注意的是自己发送消息不会回调以上方法需要你自己把它展示出来

礼物展示部分

 fasongimglw() {let that = this;if (that.data.xzuimg) {let lw = that.data.xzuimg;let lwdata = {svga: lw.svga,userId: that.data.idName,giftId: lw.id,userName: that.data.nickName,giftName: lw.name,giftImg: lw.img,userPhoto: that.data.userPhoto,time: '2'}zg.sendRoomMsg(4, 1, JSON.stringify(lwdata), function(seq, msgId, msg_category, msg_type, msg_content) {that.liwubofang(msg_content);}, function(err, seq, msg_category, msg_type, msg_content) {console.log("sendRoomMsg err:", seq, msgId, msg_category, msg_type, msg_content);})} else {}},liwubofang(lwarr) {var data = JSON.parse(lwarr) //格式化数据data.lisum = 1;let timestamp = Date.parse(new Date());data.timestamp = timestamp;if (data.userId == this.data.liwushujushang.userId && data.giftId == this.data.liwushujushang.giftId) {if ((parseInt(timestamp) - parseInt(this.data.liwushujushang.timestamp)) <= 2500) {data.lisum = this.data.liwushujushang.lisum + 1;this.handleDurationas(data);} else {this.handleDuration(data);}} else {this.handleDuration(data);}this.setData({liwushujushang: data})},handleDuration(data) {var animation = wx.createAnimation({duration: 200,timingFunction: "linear",delay: 0,});animation.opacity(1).translateY(10).step();this.setData({animationData: animation.export(),liwushuju: data})this.data.jignshiqu = setTimeout(function() {this.clonehandle();}.bind(this), 3000)},handleDurationas(data) {clearTimeout(this.data.jignshiqu);clearTimeout(this.data.jignshiquas);var animation = wx.createAnimation({duration: 200,timingFunction: "linear",delay: 0,});animation.scale(1.05).translateY(10).step();animation.scale(1.0).translateY(10).step();this.setData({animationData: animation.export(),liwushuju: data})this.data.jignshiquas = setTimeout(function() {this.clonehandle();}.bind(this), 3000)},clonehandle() {var animation = wx.createAnimation({duration: 200,timingFunction: "linear",delay: 0,});animation.opacity(0).translateY(-10).step();this.setData({animationData: animation.export(),})},

这块呢就是展示礼物的部分就是有个简单的动画效果和持续连击的业务控制然后在加了点动画的效果《Animation》

这里呢我们的这个直播基本的功能已经完了如有不对还望多多包涵希望可以帮助到你！

微信小程序直播项目（包含发礼物，实时通信IM，互动和动画显示，全屏模式等等）完整（免费）相关推荐

微信小程序直播开启公测了，与平台直播有何不同？小程序直播如何搭建
微信小程序直播开启公测了.在直播这个流量阵地里,每一个科技巨头,每一个零售商家,甚至是每一个个体,都渴望借助直播获得新的机遇. 1月中旬,不少商家收到小程序直播的公测邀请,并已交出了漂亮的成绩单: 完 ...
不同程序用不同网络_微信小程序直播登场，与平台直播有何不同？
星标我,不要迷路哦~ 微信小程序直播开启公测了.在直播这个流量阵地里,每一个科技巨头,每一个零售商家,甚至是每一个个体,都渴望借助直播获得新的机遇. 1月中旬,不少商家收到小程序直播的公测邀请,并已交 ...
微信小程序直播正式公测；刘强东 2020 年已卸任 8 家公司高管；React 16.13.0 发布| 极客头条...
整理 | 屠敏头图 | CSDN 下载自视觉中国快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦, ...
微信小程序直播二三事
去年蘑菇街首推超级购物台,率先实现了小程序端边看边聊边买的网购新模式, ,蘑菇街想做的不仅仅是依托于网红的电商直播,而是想要借直播之势渗透到整个网红生态 .uni 负责人郑慈航表示: uni 会 ...
uni-app开发经验分享十九： uni-app对接微信小程序直播
uni-app对接微信小程序直播 1.登录微信小程序后台-点击>设置->第三方设置->添加直播插件 2.添加直播组件后->点击<详情> 记录这两个参数直播 ...
微信小程序直播间实现下拉刷新(目前全网最优最美观的方法)
微信小程序直播间实现下拉刷新先上效果: 1.下拉距离一定时出现动画,保持下拉直到距离足够大时触发函数加载直播间列表,而且在足够大距离时会有振动反馈,增强用户体验 2.下拉小距离出现动画,此时释放不会 ...
微信小程序直播安装和开发指南
2020年2月28日微信小程序直播能力启动公测.微信小程序直播是微信官方提供的商家经营工具,商家可通过在小程序内直播,实现商家与消费用户互动,同时进行商品销售的闭环.在直播的时候无需任何的跳转,直接下 ...
即构微信小程序直播组件是什么？有哪些功能？哪些小程序类目可以使用？
即构直播助手是微信官方认证的微信小程序插件,为开发者提供便捷.强大的微信小程序音视频直播服务. 即构直播助手除了包含微信小程序下的音视频推拉流能力,还支持iOS.Android.Windows.Web ...
12 个 yyds 的微信小程序开源项目，速速收藏！
全文概览: wechat-app-mall:微信小程序商城: Vant Weapp:小程序 UI 组件库: iView Weapp:小程序 UI 组件库: echarts-for-weixin:Apa ...

微信小程序直播项目（包含发礼物，实时通信IM，互动和动画显示，全屏模式等等）完整（免费）