日常开发之分享小程序对接直播h5参数探讨

红叶飘零
420 阅读3分钟

前言

分享一个小程序通过webview迁入直播H5的案例。

复盘之中进行反思！！！

正文开始

开发流程重现

业务需求

需求：

  • 小程序提供入口进入H5直播页
    • 通过太阳码扫描进入
    • 页面添加交互事件点击进入
  • 在给定的直播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 ...
    }

开发完成

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

    const startTime = 'xxx'
    const endTime = 'xxx'

Okay! 第二天入口已经开放， 等到直播时间，主持人与嘉宾都已就位，座无虚席，因为弹幕区已经泛滥了，而当我看着一堆的null一脸？？？ what the hell ...? 这就有点打脸了，因为部分未授权的用户的nickname值为null值，但我的本意是当值为null，空值这些的时候，只显示userId即可，因为这是针对会员开放入口，userId必然存在。

原来如此

错误

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

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

2个字段name和email中的值，因为加了字符串而整体都变为字符串了，所以omitBy的时候自然都是无法过滤的，草率了...。

改进与反思

场景

A页面定义了字段 username，age 传递参数给B，path类似 /pages/toB/index?username=${username}&age=${age}

正确传递参数的终极姿态：

  • 在传递参数的时候对参数进行校验异常参数，例如常见的null undefined 空字符不应该传递过去 防止产生意想不到的bug
    const jointWithSearchParams = (href = '', params) => {
        const [, search] = href ? href.split('?') : ['', '']
        const newParam = omitBy(
              param,
              (val) => isNil(val) || (typeof val === 'string' && !val.length),
             )
            const newParamStr = qs.stringify(newParam).replace(/%40/g, '@')

            if (isEmpty(newParam)) return href

            if (search) {
              return href + '&' + newParamStr
            } else {
              return href + '?' + newParamStr
            }
        }
        // 正确的姿态应该如此
        const href = '/pages/toB/index'
        const params = {
            username,
            age,
        }
        const url = jointWithSearchParams(href, params)

针对此次对接调整

传递的name参数是最为重要的，原计划name参数的构成为用户昵称+小程序注册的userId，即结果 name=$(username)(${userId})，userId是我们必要参数，username确实也显得不那么重要，因为userId便可以知道在小程序用户的所有信息了，这也是核心所在，事实上，H5那边对name参数的长度作了限制，造成的结果便是用户如果昵称很长的情况，userId便会显示不全，所以，重要的信息我们应该提前展示，长度限制至少是大于userId的length的，故而调整如下：

    // 获取nickanme
    const { nickname = '', userId } = (await getUserInfo(dispatch)) || {}
    // 是否授权
    const hasAuth = nickanme !== null & nickname.length > 0
    const params = {
        email: `${userId}@email.com`,
        name: hasAuth ? `${userId}-${nickname}` : userId
    }

弹幕区突然干净了...如此一来，完美解决！

总结

  1. 代码总会以你想不到的方式运行，字符串的拼接一定要注意，因为一旦有字符与你要检测的参数拼接在一起，这个值都怎么都是真
  2. 参数对接是经常遇到的 对于必传参数一定要提前校验，防止异常数据的产生
  3. 重要的参数我们需要优先展示，正如简历一般，优秀的特点优先展示，放到后面估计没人会看到，导致丧失许多机会。
  4. 艺术来源于生活，细节决定成败
avatar
文章
阅读
粉丝