一、判定埋点来源

1. 小程序场景值

const { scene } = getLaunchOptionsSync();
switch (scene) {
    // 公众号会话下发的文字链
    case 1082:
    break;
    default:
    break;
}

2. 小程序路由带参

const params: any = getCurrentInstance().router?.params;
params?.from === 'banner' && console.log('成功！')

二、小程序实现特殊方法

1. 锚点地位（类似于h5中的a标签的锚点）

const goToPoint = () => {
    const query = createSelectorQuery();
    query.select('#point').boundingClientRect();
    query.selectViewport().scrollOffset();
    query.exec((res) => {
      if (res[0] && res[1]) {
        pageScrollTo({
          scrollTop: res[0].top + res[1].scrollTop,
          duration: 500,
        });
      }
    });
  };

2. 微信小程序wx.showtoast真机一闪而过

发现问题：

微信小程序发送网络请求前，调用wx.showLoading()显示加载中，在回调success和fail中先调用wx.hideLoading()关闭加载提示框，再调用相应业务提示wx.showToast()；开发工具中一切正常，真机测试时却一闪而过。

我们知道showLoading和showToast调用的是同一个提示框，同时调用时会冲突，所以在代码里已经避免；但真机测试仿佛执行顺序仍然是wx.showLoading() -> wx.showToast() -> wx.hideLoading()

解决方案：

添加小延时，确保showToast最后执行

如果100毫秒延迟不能解决问题，可以尝试调整这个值，调整到不影响用户体验的情况下解决这个问题。

.....
wx.showLoading({
      title: '加载中',
      mask: true
    });
 
.....
 
wx.hideLoading();
.....
setTimeout(() => {
          showToast({
            title: '证书已保存到相册',
            icon: 'none',
            duration: 2000,
          });
        });

2. 微信小程序重定向之后参数丢失

错误1：两个？，路由会解析出错，得吧第二个？用encodeURIComponent方法解析

错误2：friendUserHashId属于主页面的参数，不属于重定向后页面的参数

// 错误1
res.from === 'menu'
          ? `/pages/main/index?redirect=${treePlantingActivityConstants.IndexPage}`
          : `/pages/main/index?redirect=${
              treePlantingActivityConstants.IndexPage
            }?friendUserHashId=${encodeURIComponent(user_hash_id)}`,

// 错误2
res.from === 'menu'
          ? `/pages/main/index?redirect=${treePlantingActivityConstants.IndexPage}`
          : `/pages/main/index?redirect=${
              treePlantingActivityConstants.IndexPage
            }&friendUserHashId=${encodeURIComponent(user_hash_id)}`,
// 正确
res.from === 'menu'
          ? `/pages/main/index?redirect=${treePlantingActivityConstants.IndexPage}`
          : `/pages/main/index?redirect=${treePlantingActivityConstants.IndexPage}${encodeURIComponent(
              '?'
            )}friendUserHashId=${encodeURIComponent(user_hash_id)}`,

2023CNY-冷链.png

飞书20221227-143752.png

二维码透明度解析失败

安卓点击带有参数的链接进入小程序活动页之后，如果点击重新进入小程序会附带原来链接参数，开发者工具不会

发现问题：

三、React Hook

1. useRef

Hook API 索引 – React (docschina.org)

当 ref 对象内容发生变化时，useRef 并不会通知你。变更 .current 属性不会引发组件重新渲染。

四、React其他相关问题

1. dom树结构中尽量不使用 && 方法，或者避免`number`类型

treeId如果为0，则返回0，会显示在dom树中；如果为null、undefined、false、""则不会

// 错误
{treeId && isShowCertificateModal && (
        <CertificateModal tree_id={treeId} handleCertificateClose={handleCertificateClose} />
      )}
      
// 正确
{!!treeId && isShowCertificateModal && (
        <CertificateModal tree_id={treeId} handleCertificateClose={handleCertificateClose} />
      )}
// 正确
{treeId && isShowCertificateModal ? (
        <CertificateModal tree_id={treeId} handleCertificateClose={handleCertificateClose} />
      ) : null}

(39条消息) 【微信小程序】小程序显示弹窗时禁止下层的内容滚动|遮罩层滚动穿透_网猴的博客-CSDN博客

小程序项目bug汇总