Taro.pxTransform report error: Cannot read property '750' of undefined

[chj-damon]

相关平台

微信小程序

复现仓库

https://github.com/thundersdata-frontend/taro-style.git
小程序基础库: 3.0.0
使用框架: React

复现步骤

https://github.com/thundersdata-frontend/taro-style/tree/master/demo

npm run dev:weapp

然后打开微信开发者工具，在console里面就可以看到报错

期望结果

可以正常使用

实际结果

报错： Cannot read property '750' of undefined

环境信息

👽 Taro v3.6.12


  Taro CLI 3.6.12 environment info:
    System:
      OS: macOS 13.4.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 16.19.1 - ~/.nvm/versions/node/v16.19.1/bin/node
      Yarn: 1.22.19 - /usr/local/bin/yarn
      npm: 8.19.3 - ~/.nvm/versions/node/v16.19.1/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.12 => 3.6.12 
      @tarojs/components: 3.6.12 => 3.6.12 
      @tarojs/helper: 3.6.12 => 3.6.12 
      @tarojs/plugin-framework-react: 3.6.12 => 3.6.12 
      @tarojs/plugin-platform-alipay: 3.6.12 => 3.6.12 
      @tarojs/plugin-platform-h5: 3.6.12 => 3.6.12 
      @tarojs/plugin-platform-jd: 3.6.12 => 3.6.12 
      @tarojs/plugin-platform-qq: 3.6.12 => 3.6.12 
      @tarojs/plugin-platform-swan: 3.6.12 => 3.6.12 
      @tarojs/plugin-platform-tt: 3.6.12 => 3.6.12 
      @tarojs/plugin-platform-weapp: 3.6.12 => 3.6.12 
      @tarojs/react: 3.6.12 => 3.6.12 
      @tarojs/runtime: 3.6.12 => 3.6.12 
      @tarojs/shared: 3.6.12 => 3.6.12 
      @tarojs/taro: 3.6.12 => 3.6.12 
      @tarojs/taro-loader: 3.6.12 => 3.6.12 
      @tarojs/webpack5-runner: 3.6.12 => 3.6.12 
      babel-preset-taro: 3.6.12 => 3.6.12 
      eslint-config-taro: 3.6.12 => 3.6.12 
      react: ^18.0.0 => 18.2.0 
    npmGlobalPackages:
      typescript: 5.0.2

[chj-damon]

从debug上看，这里taro.config是空的，然后才导致后面计算rootValue的时候报错

[ZakaryCode]

fixed in #14352

[chj-damon]

@ZakaryCode 有点不理解，为什么taro.config是空的？

[chj-damon]

@ZakaryCode 还是会有问题的。

function getPxTransform(taro) {
    return function(size) {
        var config = taro.config || {}; 
        var deviceRatio = config.deviceRatio || defaultDesignRatio;
        var baseFontSize = config.baseFontSize;
        var designWidth = function() {
            var input = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
            return isFunction(config.designWidth) ? config.designWidth(input) : config.designWidth || defaultDesignWidth;
        }(size);
        if (!(designWidth in deviceRatio)) {
            throw new Error("deviceRatio \u914D\u7F6E\u4E2D\u4E0D\u5B58\u5728 ".concat(designWidth, " \u7684\u8BBE\u7F6E\uFF01"));
        }
        var formatSize = ~~size;
        var rootValue = 1 / deviceRatio[designWidth];
        switch(config.targetUnit){
            case "rem":
                rootValue *= baseFontSize * 2;
                break;
            case "px":
                rootValue *= 2;
                break;
        }
        var val = formatSize / rootValue;
        if (config.unitPrecision >= 0 && config.unitPrecision <= 100) {
            val = Number(val.toFixed(config.unitPrecision));
        }
        const result = val + config.targetUnit; // 因为config是空的，导致这里targetUnit是undefined，所以这里的result是NaN
        console.log(val, config.targetUnit, result, 'result');
        return result;
    };
}

因为config是空的，导致这里targetUnit是undefined，所以这里的result是NaN.

所以这个问题的根源应该是，为什么taro.config没有数据？

[chj-damon]

这是上面console.log(val, config.targetUnit, result, 'result');的打印结果

[ZakaryCode]

因为config是空的，导致这里targetUnit是undefined，所以这里的result是NaN.

所以这个问题的根源应该是，为什么taro.config没有数据？

修改后为空应当会使用默认的 ratio 配置才对，可以看看 initPxTransform 执行是否正确

[chj-damon]

从断点执行的情况来看，是直接走了getPxTransform函数，getInitPxTransform这个函数没有被执行。

[ZakaryCode]

导出的自定义组件？

[chj-damon]

可以看看我那个demo。我只是写了一个函数用到了。然后它实际上是在一个theme里面定义变量值用的。这个theme会在app.ts里面注入到一个包裹children的ThemeProvider里面。

有没有可能就是因为在入口组件里使用的，才导致taro拿到的config是空？

[chj-damon]

有什么反馈吗？

[chj-damon]

@ZakaryCode 大佬，有什么反馈吗？

[ZakaryCode]

验证了下，你调用方法太早了，需要在应用启动之后才能正常执行该方法，可以写到组件内调用

[chj-damon]

可是这个是定义的作为主题的，然后注入给ThemeProvider，怎么写到组件内？

[ZakaryCode]

可是这个是定义的作为主题的，然后注入给ThemeProvider，怎么写到组件内？

launch 之后再创建 theme，改一下 useChangeTheme 的实现

[chj-damon]

除了app.ts这里以外，useChangeTheme还能放在什么地方，才能让整个app都可以被Provider包裹呢？

[ZakaryCode]

除了app.ts这里以外，useChangeTheme还能放在什么地方，才能让整个app都可以被Provider包裹呢？

不需要挪动 useChangeTheme 啊，只是改下 theme 就行，不在创建前执行即可

[chj-damon]

谢谢，我把原先静态的lightTheme/darkTheme改成了函数createLightTheme()和createDarkTheme()之后就可以了。

现在发现了另外一个问题，就是我console.log打印出来的单位确实是rpx，但是在wxml里面看到的却变成了px。这个可能是什么原因？

[chj-damon]

实测代码：

<View style={{margin: Taro.pxTransform(20), padding: 20}}>
  <TaroText>hello</TaroText>
</View>

实际效果：

[chj-damon]

补充一下：我在pxTransform方法里面打印了一下，发现最后return出去的确实是20rpx，但是为什么到wxml就变成了10px

[chj-damon]

再补充：如果是写在css里面的话，单位确实是会变成rpx

<View style={{margin: Taro.pxTransform(20), padding: 20}} className='hello'>
        <TaroText>hello</TaroText>
      </View>

.hello {
  margin: 20px;
  padding: 40px;
  background-color: red;
}

效果：

[ZakaryCode]

现在发现了另外一个问题，就是我console.log打印出来的单位确实是rpx，但是在wxml里面看到的却变成了px。这个可能是什么原因？

这个是模拟器自行转换的，无需在意，它转换单位也是适配了的

[chj-damon]

好的好的。