Taro3 H5 问题汇总

[ycyeye]

相关平台

微信小程序

小程序基础库: 2.17.0
使用框架: React

复现步骤

下面是我们转 H5 的时候遇到的问题的汇总

view

表现: createAnimation 在 H5 下不生效
原因: animation 属性丢失了, 导致样式不生效
解决方法: 已经提了 PR

Taro.preload

表现: H5 下没法使用, 报没有该方法
原因: taro-h5这个包没有实现该方法
解决方法: 已经提了 PR

多个页面共用一个滚动位置的问题

表现: 当前页面滚动到底端时候,跳转至新的页面,该页面居然也滚动到底端了
原因:
如上图所示
尝试解决

.taro_router {
  overflow: hidden;
  & > div,
  .taro_page {
    height: inherit;
    overflow: auto;
  }
}

让页面在 .taro_page 下滚动, 可以解决该问题;
但是这样又会引发新的问题, 页面下刷新和上拉滚动就会失效了
因为 taro 把滚动监听放在了 .taro-tabbar__panel身上,按照上面的写法,他的子元素不会滚动,所以监听不了,
要想解决只能自己去给.taro_page加滚动事件监听,这样就需要去改原有的代码逻辑,可以实现就是比较麻烦

// 临时解决方案, 对原有逻辑侵入较小
import { isWeb } from '@/utils/tools';

let pageScrollFn = () => {};
let pageDOM: HTMLElement | null = null;
/**
 * 解决 H5 场景下页面滚动事件问题
 * @param id
 * @returns
 */
export default function wraper(id: string) {
  return function scroll<T extends { new (...args: any[]): {} }>(C: T) {
    return isWeb
      ? class Scroll extends C {
          constructor(...args) {
            super(...args);
          }
          componentDidMount() {
            const distance = 50;
            let isReachBottom = false;

            pageDOM = document.getElementById(id);

            if (!pageDOM) return C.prototype.componentDidMount.bind(this)();
            function getOffset() {
              if (!pageDOM) return 0;
              return (
                pageDOM.scrollHeight - pageDOM.scrollTop - pageDOM.clientHeight
              );
            }

            pageScrollFn = () => {
              if (!pageDOM) return;
              C.prototype.onPageScroll.bind(this)({
                scrollTop: pageDOM.scrollTop,
              });
              if (isReachBottom && getOffset() > distance) {
                isReachBottom = false;
              }
              if (!isReachBottom && getOffset() < distance) {
                isReachBottom = true;
                C.prototype.onReachBottom.bind(this)();
              }
            };
            pageDOM.addEventListener('scroll', pageScrollFn, false);
            C.prototype.componentDidMount.bind(this)();
          }
          componentWillUnmount() {
            if (!!pageDOM) {
              pageDOM.removeEventListener('scroll', pageScrollFn);
            }
            C.prototype.componentWillUnmount.bind(this)();
          }
        }
      : C;
  };
}

// 页面组件
@inject('store')
@observer
@scroll('/pages/shop/index')
export default class Page  extends Component {
    ...
    onPageScroll(){}
    onReachBottom(){}
}

-webkit-overflow-scrolling: touch

表现: .taro-tabbar__panel上加了这个, 导致手机 safari 上滚动有时会卡主和 fixed 定位的元素 z-index 失效
解决方法: -webkit-overflow-scrolling:auto

scrollView

手机 safari上表现不好, 直接 better-scroll自己实现一个scrollView

video

手机 safari上点击全屏,事件会穿透, 而且还会报错

// taro-component 源码
 toggleFullScreen = (isFullScreen = !this.isFullScreen) => {
    this.isFullScreen = isFullScreen
    this.controlsRef.toggleVisibility(true)
    this.fullScreenTimestamp = new Date().getTime()
    this.onFullScreenChange.emit({
      fullScreen: this.isFullScreen,
      direction: 'vertical'
    })
    if (this.isFullScreen && !document[screenFn.fullscreenElement]) {
      setTimeout(() => {
        this.videoRef[screenFn.requestFullscreen]({ navigationUI: 'show' })  // safair  this 指向的是 window
      }, 0)
    }
  }

setTabBarBadge

表现: 方法执行了, 但是视图没有更新; 只有刷新页面才会更新
解决方法: 自己通 操作dom方式 去修改

期望结果

可以解决这些问题

实际结果

有问题

环境信息

  Taro CLI 3.2.9 environment info:
    System:
      OS: macOS 11.3
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 12.18.0 - ~/.nvm/versions/node/v12.18.0/bin/node
      Yarn: 1.7.0 - /usr/local/bin/yarn
      npm: 6.14.4 - ~/.nvm/versions/node/v12.18.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.2.9 => 3.2.9 
      @tarojs/components: 3.2.9 => 3.2.9 
      @tarojs/mini-runner: 3.2.9 => 3.2.9 
      @tarojs/react: 3.2.9 => 3.2.9 
      @tarojs/runtime: 3.2.9 => 3.2.9 
      @tarojs/taro: 3.2.9 => 3.2.9 
      @tarojs/webpack-runner: 3.2.9 => 3.2.9 
      babel-preset-taro: 3.2.9 => 3.2.9 
      eslint-config-taro: 3.2.9 => 3.2.9 
      react: ^17.0.0 => 17.0.2 

[ycyeye]

我们的项目是从 taro2 就开始用了, 后面紧跟社区, 升级的 3.0, 适配了支付宝小程序, 目前正在适配 H5, 适配 H5 过程中遇到这些问题,还希望官方可以帮忙支持一下

[Chen-jj]

我们看看的

[conan51551]

我们看看的

期望抓紧和入这个改动，对于preload的影响挺大的

[ycyeye]

我记得 taro2 的文档是推荐使用preload来传递参数的, taro3以后这个 api 貌似就从文档上消失了, 还是找源码找到的 , 不知道官方还建不建议使用

[houta-higuchi]

preload的修复合并到最新版本了吗？

[ycyeye]

@houta-higuchi 没有, Taro 已经 17 天没发过版本了, 看了下他们最近的提交全是 RN 的, 看来重点不在 H5