前言

分享一个小程序对接直播H5的案例，直播的过程却是让我啼笑皆非。

复盘的过程顺便好好反思反思。

正文开始

按照开发的一个顺序重现一下整个过程。

需求

需求如下：小程序提供入口进入到直播H5并能携带小程序用户的昵称和userId等来标识用户的参数。

小程序入口

通过太阳码扫码进入
小程序页面添加交互选项点击进入

直播H5参数要求
https://www.example.com/live/1001?name=xxx&email=xxx

讨论分析

第三方需要2个参数name和email，但是小程序注册时不包括email记录的，最终的确认结果便是name为用户昵称加userId方便记录直播过程中奖用户，email只传递唯一标识都可以，传递userId与邮箱格式的组合。即最终访问的url为

    // assume nickname = demo & userId = 11011
    https://www.example.com/live/1001?name=demo(11011)&email= 11011@email.com
复制代码

开发

    // joint pass params
    const path = 'https://www.example.com/live/1001'
    const { userId } = storage
    const { profile: { nickname = '' } } = this.context
    const joint = {
        name: `${nickname}(${userId})`,
        email: `${userId}@email.com`
    }
    // join path and jointParams
    jointPath(path, joint)
    
    
    export const jointPath = (path, params) => {
        // code here ...
        // use loash util
        const newParams = omitBy(
            params,
            (val) => isNil(val) && (typeof val === 'string' && !val.length)
        )
        
        // code here ...
    }
复制代码

Show Time

由于这个入口是临时的，只会在明天显示，定时任务搞起发布版本。

    const startTime = 'xxx'
    const endTime = 'xxx'
复制代码

okay! 没有问题，第二天入口如所设定一般，开放了。。。等到直播时间，主持人与嘉宾都已就位，座无虚席，因为弹幕区已经泛滥了，而我看着一堆的null一脸？？？ what the hell …? 难道这就是传说中的打脸么，这个入口是会员才会看到的，会员必定是有userId的，竟然userId会有null的，显示在页面就是null(null)，卧槽？nickname为空可以理解，因为部分未授权的用户的确是空的，但是userId就有点过分了啊！！！

事后方知

错误1

错估了omitBy函数会检查我为null或者假值的参数，当然omitBy并没有错，回顾代码咋一看，没毛病，细查之，我直接好家伙。。。

    const joint = {
        name: `${nickname}(${userId})`,
        email: `${userId}@email.com`
    }
复制代码

2个字段name和email中的值，因为加了字符串而整体都变为字符串了，所以omitBy的时候自然都是无法过滤的，幡然醒悟的我反手一巴掌。。。

错误2

没有对必须传的参数作校验，如上，userId是在直播间唯一标识用户的身份的，如果无法获取到，理论上是不应该让用户进入的，这就造成了直播间抽奖的时候，当有一个null(null)的用户中奖了之后，主持人在看到空的时候直接把他给过滤掉了?，此情此景，我也是笑了。不知道那哥们是否错过了一个亿，他也只能在发一个?的表情表示抗议，然无效之！