Taro2.x + Swan 小程序开发过程中的坑

环境

Taro 2.x
node 14.18.1

1. 启动 yarn dev:swan 启动不了

检查node版本是否太高，把node降级到14.x

2.进行页面配置

写的时候有个功能，需要隐藏顶部自带导航栏。但对于SPA来说，需要再index.json里面进行设置，或者直接在class组件中进行config的配置

class Home extends PureComponent {
  config = {
    navigationStyle:"custom", // 隐藏顶部navigation的样式
  };
}

但对于写function component的朋友来说就没有那么友好，配置会有坑。我就一直配不上lol。但是升级到Taro3之后，能够直接在function里面配置。

definePageConfig({
  navigationBarTitleText: '首页'
})
export function xxx(){
}

3. class component 需要extends pure component

当只extends component的时候会报以下错误

[Module Factory] modular 27 execution fail:
  Cannot read property 'call' of undefined
  TypeError: [Module Factory] modular 27 execution fail:
  Cannot read property 'call' of undefined

当没有extends任何东西的情况下报以下错误

Custom Component Error】can't find componentPaths, please check your config:
    1. Please check if the reference path is correct;
    2. If it is a page under this path, the "component: true" in the current page JSON should be removed.
  Error: 【Custom Component Error】can't find componentPaths,

主要是因为Taro需要支持多端，对component进行了进一步的封装

4. 对custom hook不友好

当class component需要使用custom hook的时候，需要使用hoc进行转化，使得class component能够使用。但因为Taro对component的封装，class component仍无法利用hoc使用

总的来说，taro2.x没有taro3对hook友好

5. canvas, camera 上的置顶元素，真机上无法看到

主要是因为 canvas和camera永远都是处在 z-index的最顶层，在模拟器上确实能看到置顶元素，因为模拟器和真机的渲染引擎不同，所以真机上看不到。如果需要置顶元素，需要使用原生cover-image或者cover-view来写。

<camera>
    <cover-view class="column_outline">
      <cover-view class="column_item"></cover-view>
      <cover-view class="column_item"></cover-view>
    </cover-view>
  </cover-view>
</camera>

6. 动态尺寸样式写法

Taro中写在class里面的尺寸样式，统一用px来写。taro会根据h5和小程序会转换成rem和rpx。但是一些情况下需要使用动态计算尺寸。直接通过style内联样式写，Taro无法进行自动转换。需要利用Taro.pxTransform()包一层

Jesslyn wongkayan