点击微信小程序分享的页面链接，页面空白

大花也是花
803 阅读2分钟

事情的开端

风平浪静的工作上午，本人正在吭哧吭哧的敲代码，突然企业微信某个群聊，亮起了小红点，起初我并没有在意，像这样的事情，每个工作日都在发生，了无新意。直到这个小红点直接@到我，既然都直接点名我了，作为爱岗敬业的我，必须马上点开看看，到底发生了什么，xx小程序，正在搞活动，分享页面空白，马上看看，就几个字，瞬间让我紧张起来了。

复现场景

看到消息后，经过一番沟通，了解到事情发生的完整过程如下：

用户1进入商城微信小程序，点击某个商品列表A页面，然后分享这个商品列表。用户2从这个分享的商品列表页，点击进入的时候，一片空白。

此时我们试了多个商品列表页面的分享，发现只有部分商品列表页会出现这个问题，那问题很可能出现在商品列表页的参数上。那接下来就本地调试看看具体是什么个情况。尽快修复上线

调试过程

项目的业务流程如下

例如有一个进入商品列表按钮，按钮文案brand one, 用户点击这个按钮，就会进入brand one的系列的商品列表页面，此时商品列表页链接上的参数是keyword=brand%20one。

为什么对参数进行encodeURIComponent，是因为系统原因，不同的商品列表的分类只能用品牌名称命名，而品牌名称的可能有特殊符号，避免在链接参数传递出现问题。所以统一进行encodeURIComponent。

// 简略示例代码如下：
const keyword = 'brand one'
// 跳转商品列表页
const handleJump = () => {
    const jumpUrl = `/pages/test/index?keyword=${encodeURIComponent(keyword)}`
    this.router.navigateTo(jumpUrl)
}

找出问题出现的过程

用户从微信商城点击按钮进入商品列表页，展示正常，而从分享的进入商品列表页的时候空白。那可能就是点击分享的时候，链接的参数被改变了。根据这个猜想，我们在进入商品列表页的onLoad打印了链接上的参数。结果发现跟我们猜想的是一致的。

// 正常进入商品列表链接
/pages/test/index?keyword=brand%20one
// 从分享进入商品列表的链接
/pages/test/index?keyword=brand%2520one

我们发现链接上面的参数多了一个25，这个是因为又对参数空格encodeURIComponent之后的结果再次encodeURIComponent结果导致。

image.png

问题出现的原因

我们发现小程序的分享onShareAppMessage方法，我们没有自定义path, 微信小程序会默认分享当前页的链接，并且对链接会再次进行encodeURIComponent。才导致这个分享后，参数出现不正常的问题。

onShareAppMessage() {
    return {
      title: 'xx商品列表页',
      imageUrl: 'xxxx',
    };
  }

如何解决

既然分享的链接不对，那我们就对onShareAppMessage的path进行处理。在商品列表页的分享方法里，path设置为当前商品列表页链接。

// 部分代码示例
import { toPairs, get } from 'lodash'
onShareAppMessage() {
    // pageOptions ---onLoad的options参数
    let params = '' 
    const paramsList = toPairs(pageOptions)
    paramsList.forEach((item) => {
      const key = get(item, '0', '')
      const val = get(item, '1', '')
      params += `&${key}=${val}`
    })
    params = params.substring(1, params.length)
    return {
      title: 'xxxx商品列表页',
      imageUrl: 'xxxxx',
      path: `/pages/test/index?${params}`,
    };
  }

结尾

虽然只是一个非常小的的知识点，为什么要写下来呢，因为有人告诉我，如果你觉得自己表述不清楚的话，可以尝试写出来。如果能写清楚，那么自然就能说清楚。

如有错误，恳请指正

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情

avatar
文章
阅读
粉丝