不知不觉过了半年过去了，我也做了半年多Taro小程序开发支付宝和微信小程序。现在抽空整理下些那踩过的哪些坑，整理经验。当然我之前的一篇文章《Uniapp学习笔记》也纪录一些小程序的踩坑笔记，这里就不做记录。Taro与Uniapp一样，针对微信小程序与支付宝的小程序只做浅层摩平，一些问题也并得taro的问题，而是平台差异导致的，需开发者自行解决。

考虑个人的懒惰和经历有限，所以这边文章写的会比较粗糙，对问题的描述比较浅，主要是写给自己看的，不太推荐阅读。

1. <ScrollView/>

对于h5来说可以通过样式overflow: scroll来控制滚动，但是小程序有<ScrollView>组件。

• 其实小程序也可以使用overflow: scroll来控制滚动，但是如果在微信小程序弹窗fixed布局里面的内容如果想滚动就必须用<ScrollView/>
• 当滑动过快时，bindscrolltolower、bindscrolltoupper可能不会被触发，通过配置upper-threshold、lower-threshold的值，调大一些，一定程度缓解这种问题。
• 假如我们有这种需求，当scrollTop > X 显示某些内容（如导航头），反之不显示某些内容， 正确的做法是设置一个boolean变量如 showNavTitle, 在bindscroll 事件中进行判断，伪代码如下

js
const X = 100;
function bindscroll(e) {
    if(e.detail.scrollTop >= X && !this.state.showNavTitle) {
        this.setState({showNavTitle: true});
    } else if(e.detail.scrollTop < X && this.state.showNavTitle) {
       this.setState({showNavTitle: false}); 
    }
}

• 业务开发中页面可能有定时器，需要重复渲染，但是在微信小程序中 如果ScrollView重新渲染了，会导致scrollTop = 0, 正确的做法（伪代码）如下

js
import React from 'react';
import {ScrollView} from '@tarojs/components';

let scrollTop = 0;



export default class Page extends React.Component {
    bindscroll = (e) => {
        scrollTop = e.detail.scrollTop;
    }
    render() {
        return <ScrollView scroll-y={scrollTop} scroll={(e) => bindscroll(e)}>
            ...
        </ScrollView>
    }
} 

2. 事件的冒泡和捕捉

对于h5开发可以通过e.stopPropagation() 阻止事件冒泡，但对于小程序来说不能在滚动或拖拽的过程中条件控制事件是否冒泡、是否阻止默认事件，必须提前声明。

但是taro3是一个运行时框架，在逻辑层实现了一套事件系统，包括事件触发和事件冒泡。

一半情况下，这套在逻辑层实现的小程序事件系统是可以正常工作的，事件毁掉能正常触发、冒泡、停止冒泡。

但是小程序模版中绑定的catchtouchmove事件，除了可以阻止回调函数冒泡触发外，还能阻止试图的滚动穿透，这点Taro的事件系统是做不到的。

3. 阻止滚动穿透（触摸弹窗时背景页滚动）

• 使用样式解决
• <View catchMove>..</View> 实测只在微信小程序有效
• css touch-action: none 可解决支付宝小程序滚动击穿问题

4. 时间组件<PickerView>、<PickerViewColumn>

一般情况下使用 Picker、 <PickerView>、<PickerViewColumn> 没啥问题，但也架不住业务的特殊逻辑，比如一个日期组件有日期列、小时列、分钟列， 最早时间、最晚时间、时间拨片是配置的。也就是说，波动小时列，分钟列的选项要重新计算，还要勾选之前的选项值（如果时间拨片是5的倍数），波动日期列也是一样。

但是微信的<PickerView>有坑， 1> 只有初次渲染是可以设置选项值，2>不能手动设置选项值。

但是业务诉求要求动态设置分钟列，且勾选之前的值，这就貌似无解了，

但其实微信的<PickerView>可以手动设置选项值的，知识有两个前提，必须先设置选项列，渲染后在设置选项值；必须在触发事件后的短暂时间内进行设置。伪代码如下

js
this.setData({
    days,
    hours,
    minutes,
  }, () =>
    this.setData({
      value: ['2024.10.06', '08', '50'],
    })
);

这样确实解决了微信小程序的问题，但是在taro框架中，还要增加额外逻辑，使它强制渲染

jsx
{
    [Date.now() + Math.random()].map((it) => <PickerViewColumn 
        key={it}
    >
    <view wx:for="{{dates}}" style="line-height: 30px">{{item}}</view>
    </PickerViewColum>)
}

大问题解决了，但是支付宝小程序还有个小问题，由于支付宝小程序不支持组件上设置样式，导致日期、小时、分钟三列的宽度是均分的，如果我要显示 “10月6日（周日）”这样的文案， 只能根据文字长度缩小fontSize了。

5. 扫码打开小程序自定义页面

业务迭代中可能有这样的诉求，微信扫码打开微信小程序、支付宝扫码打开支付宝小程序、其他场景扫码（如浏览器）打开微信小程序，支持携带动态参数。

• 微信扫码打开微信小程序
  • 需要在微信小程序后台配置扫普通二维码
• 支付宝扫码打开支付宝小程序
  • 需要在支付宝小程序配置 小程序码 添加关联规则

这里有一些坑

1. 关于二维码后面的域名需要配置校验文件
2. 支付宝只支持打开体验码和生产码，体验版小程序要打开 联调设置 --> 联调扫码版本
3. 微信小程序可以配置开发版、体验版，
   • 如果是开发版，必须用自己的微信（与IDE账号一致）扫码，
   • 如果二维码有动态参数调整，需要在小程序后台重新配置
   • android扫码有坑，一直在loading，等它转5分钟吧，然后杀死小程序，重新扫码即可。
4. 关于动态参数、微信小程序扫码后可以在onLoad事件接收到，支付宝小程序在世在app onLaunch事件接收到，且获得的路径getCurrentInstance().router?.path 没有以'/'开头。

6. getSystemInfo

7. MoveView MoveArea