preface

Share a small program through webview migration live H5 case.

Reflection in the replay!!

The text start

Development process reproduction

The business requirements

Requirements:

  • Applets provide access to the H5 live page
    • Enter by scanning the sun code
    • Page to add interactive events click to enter
  • Pass the corresponding parameters on the given live H5 connection
    • https://www.example.com/live/1001?name=xxx&email=xxx

Discuss the analysis

There are two parameters name and email, but the email record is not included in the registration of the small program. The final confirmation result is that name is the nickname of the user and userId is added to facilitate the recording of prize winners in the process of live broadcast. It is ok to send only the unique identification of email, and the combination of userId and email format is transmitted. That is, the final url accessed is

    // assume nickname = demo & userId = 11011
    https://www.example.com/live/1001?name=demo(11011)&email= [email protected]
Copy the code

The development of

    // 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 ...
    }
Copy the code

Development is complete

Since this entry is temporary and will only be displayed tomorrow, the scheduled task will start the release.

    const startTime = 'xxx'
    const endTime = 'xxx'
Copy the code

Okay! The next day the entrance was open, and by the time it was time to go live, the hosts and guests were all in place, and the seats were full, because the barrage area was overflowing, and I was looking at a bunch of null faces. what the hell … ? (nickname = null) (nickname = null) (nickname = null) (nickname = null) (nickname = null) (nickname = null) (nickname = null)

So that’s it

error

The omitBy function will check if I am null or false. Of course, omitBy is not wrong.

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

The value of the two fields name and email, because the string is added, the whole becomes a string, so the omitBy naturally cannot filter, sloppy… .

Improvement and reflection

scenario

/pages/toB/index? /pages/toB/index? username=${username}&age=${age}

The ultimate pose for correctly passing parameters:

  • Verify parameters as they are passed exception parameters such as the common null – undefined null character should not be passed to prevent unexpected bugs
    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.The '@')

            if (isEmpty(newParam)) return href

            if (search) {
              return href + '&' + newParamStr
            } else {
              return href + '? ' + newParamStr
            }
        }
        // The correct posture should be like this
        const href = '/pages/toB/index'
        const params = {
            username,
            age,
        }
        const url = jointWithSearchParams(href, params)
Copy the code

For this docking adjustment

${userId} =$(username)(${userId}); In fact, H5 limits the length of the name parameter. As a result, if the user’s nickname is long, the userId will not be displayed completely. Therefore, important information should be displayed in advance. The length limit is at least greater than the length of the userId, so adjust as follows:

    / / get nickanme
    const { nickname = ' ', userId } = (await getUserInfo(dispatch)) || {}
    // Whether to authorize
    consthasAuth = nickanme ! = =null & nickname.length > 0
    const params = {
        email: `${userId}@email.com`.name: hasAuth ? `${userId}-${nickname}` : userId
    }
Copy the code

The barrage area was suddenly clean… In this case, perfect solution!

conclusion

  1. Code will always work in unexpected ways. Concatenation of strings must be taken care of, because once a character is concatenated with the parameter you want to check, how can the value be true
  2. Parameter docking is often encountered. The required parameters must be verified in advance to prevent abnormal data
  3. Important parameters need to be shown first, just like resumes, excellent features should be shown first, and no one will see them later, resulting in the loss of many opportunities.
  4. Art comes from life, and details determine success or failure