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

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

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

页面部分

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

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

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

我们首先要

"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》

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