h5直播项目weLiveShow

html5直播聊天互动webapp|微直播h5|移动端web直播|html5视频直播

这一两年直播、小视频这些多媒体应用都比较火，像陌陌、抖音、火山短视频… 于是空闲时间自己也利用html5技术也试着开发了下直播项目，使用到了h5+css3+iscroll+zepot+swiper+wlsPop等技术架构开发，实现了互动聊天、消息提醒、礼物动效展示，打赏主播、发红包、送礼物……

// 发送快捷模板信息
var fastMsgTplIdx = null;
$(".J__fastMsgTpl").on("click", "ul li.more", function () {
    fastMsgTplIdx = wcPop({
        id: 'wcFastMsg',
        skin: 'android',
        title: '给主播请个安吧',
        content: '<div class="wls__fastMsgTpl J__fastMsgTpl"><ul class="clearfix"><li class="item">凉了</li><li class="item">聊天要有礼貌哟！</li><li class="item">守塔</li><li class="item">求签名</li><li class="item">老司机带带我</li><li class="item">确认过眼神，我遇上对的人</li><li class="item">这个人说话很好听</li><li class="item">慌的一批</li><li class="item">家里有矿啊</li><li class="item">被安排的明明白白</li></ul></div>',
        xclose: true
    });
});


/* 选择区函数----------------------------------------------------*/
// 打赏
$(".J__fnDs").on("click", function () {
    var dashangIdx = wcPop({
        skin: 'android',
        title: '<div style="color:#ffe9be;text-align:center;">打赏</div>',
        content: $("#J__popupTmpl-Dashang").html(),
        style: 'background:#e2554b;width:90%;max-width:640px;',
        xclose: true,
        show: function(){
            $("body").on("click", "#J__donateList dd", function () {
                $(this).addClass("cur").siblings().removeClass("cur");
            });
        }
    });
});
// 发红包
$(".J__fnHb").on("click", function () {
    var hongbaoIdx = wcPop({
        skin: 'android',
        title: '<div style="color:#ffe9be;text-align:center;">发红包</div>',
        content: $("#J__popupTmpl-Hongbao").html(),
        style: 'background:#e2554b;width:90%;max-width:640px;',
        xclose: true
    });
});
// 发私信
$(".J__fnSx").on("click", function () {
    var sixinIdx = wcPop({
        skin: 'android',
        title: '提示',
        content: '<div style="font-size:16px;">给 <em class="c-23ade5">Salon肥仔</em> 发送私信<div class="flexbox flex-alignc rmt-25"><input class="flex1" type="text" style="border: 0; border-bottom:1px solid #23ade5; padding:.1rem 0;" /></div></div>',
        style: 'width:90%;',
        btns: [
            {
                text: '取消',
                onTap() {
                    wcPop.close(sixinIdx);
                }
            },
            {
                text: '发送',
                style: 'color: #23ade5;',
                onTap() {
                    ...
                }
            }
        ]
    });
});


/* 底部toolbar函数----------------------------------------------------*/

// 送一朵花
$(".J__toolbtnSH").on("click", function(){
    var _toolIdx03 = wcPop({
        skin: 'ios',
        title: '<div style="font-size:18px;text-align:left;">提示</div>',
        content: '<div style="text-align:left;padding-bottom:.25rem;">需要支付1微播币，确认支付吗？<div class="flexbox flex-alignc rmt-25"><input class="cp__checkboxPX-switch" type="checkbox" /><em class="flex1 rml-10 c-b9bbbc">以后不再提醒</em></div></div>',
        style: 'width:90%;',
        btns: [
            {
                text: '取消',
                onTap() {
                    wcPop.close(_toolIdx03);
                }
            },
            {
                text: '确定',
                style: 'color: #ff7e00;',
                onTap() {
                    ...
                }
            }
        ]
    });
});

// 送礼物弹窗
$(".J__toolbtnLW").on("click", function(){
    var _toolIdx04 = wcPop({
        skin: 'actionsheet',
        content: $("#J__popupTmpl-giveGift").html(),
        position: 'bottom',
        opacity: 0,
        style: 'background-color:rgba(0,0,0,.9); border-radius: 10px 10px 0 0;'
    });

    // 初始化swiper礼物
    var giftSwiper = new Swiper('.J__swiperGiveGift', {
        pagination: '.pagination-gift',
        paginationClickable: true
    });
});
// 送礼物选项
$("body").on("click", ".J__swiperGiveGift .item", function(){
    var coins = $(this).attr("coins");
    var _tipidx = wcPop({
        id: 'wcCoins',
        skin: 'ios',
        title: '<div style="font-size:18px;text-align:left;">提示</div>',
        content: '<div style="text-align:left;padding-bottom:.25rem;">需要支付'+coins+'微播币，确认支付吗？<div class="flexbox flex-alignc rmt-25"><input class="cp__checkboxPX-switch" type="checkbox" /><em class="flex1 rml-10 c-b9bbbc">以后不再提醒</em></div></div>',
        style: 'width:90%;',
        btns: [
            {
                text: '取消',
                onTap() {
                    wcPop.close(_tipidx);
                }
            },
            {
                text: '确定',
                style: 'color: #ff7e00;',
                onTap() {
                    ...
                }
            }
        ]
    });
});
// 礼物充值弹窗
$("body").on("click", "#J__giftRecharge", function(){
    var _rechargeIdx = wcPop({
        skin: 'actionsheet',
        content: $("#J__popupTmpl-giftRecharge").html(),
        position: 'bottom',
        style: 'border-radius: 10px 10px 0 0;'
    });
});
// 充值选项
$("body").on("click", "#J__rechargeList .item", function(){
    $(this).addClass("on").parent().siblings().find(".item").removeClass("on");
    var num = $(this).find(".money").text();
    $("#J__btnPayment .num").text(num)
});
// 去支付
$("body").on("click", "#J__btnPayment", function(){
    var num = $(this).find(".num").text();
    popupToPay(num);
});
// 支付弹窗
function popupToPay(total){
    var goPayIdx = wcPop({
        id: 'wcGoPay',
        skin: 'ios',
        title: '<div style="font-size:14px;text-align:left;margin:-12px 0 0 -10px;">需支付：' + total + '</div>',
        content: '<div style="font-size:14px;padding:20px 0;">实际支付：<span style="color:#ff7e00;font-size:28px;">' + total + '</span></div><ul class="payType J__payType"><li class="flexbox flex-alignc active"><span class="flex1"><i class="iconfont icon-wxpay"></i> 微信支付</span><i class="iconfont icon-gouxuan"></i></li><li class="flexbox flex-alignc"><span class="flex1"><i class="iconfont icon-alipay"></i> 支付宝支付</span><i class="iconfont icon-gouxuan"></i></li></ul>',
        style: 'width:90%;',
        xclose: true,
        shadeClose: false,
        btns: [
            {
                text: '确认付款',
                style: 'color: #ff7e00;font-size:16px;',
                onTap() {
                    ...
                }
            }
        ]
    });
}
// 支付方式切换（微信、支付宝）
$("body").on("click", ".J__payType li", function(){
    $(this).addClass("active").siblings().removeClass("active");
});

// 设置
$(".J__toolbtnSZ").on("click", function(){
    var _toolIdx05 = wcPop({
        skin: 'actionsheet',
        content: $("#J__popupTmpl-liveShowSetting").html(),
        anim: 'scaleIn',
        xclose: true,
        opacity: 0,
        style: 'background-color:rgba(255,255,255,.9); border-radius: 10px 10px 0 0;'
    });
});