Taro3的H5项目在Android、IOS 中因为兼容性问题导致的白屏问题

浅箬2025-12-25 12:23

使用场景：Taro 的H5项目在Android 11 以上版本可以正常展示，但是在Android 10以及一下版本会出现白屏无法加载。

问题定位：由于我们是混合开发，在APP内部嵌入H5的时候使用的浏览器版本相对手机的默认浏览器来说，兼容性会更低。在最后在测试之后发现当浏览器内核版本小于77之后，才会出现白屏。那么进一步排查，发现是在构建打包的时候ES不兼容到之后，最后确认当浏览器版本低于77之后，不兼容ES6+，所有我们在构建的时候需要考虑低版本兼容。

解决方案：

第一步：添加 babel

TypeScript 复制代码

yarn add @babel/preset-env --dev

第二步：在babel配置中增加低版本限制

TypeScript 复制代码

module.exports = {
   presets: [
    ['taro', {
      framework: 'preact',
      ts: true,
      hot: false,
      targets: {
        ios: '9',
        android: '5'
      }
    }]
  ],
 ...
}

第三步：在config/index.ts文件中增加ES转换

TypeScript 复制代码

h5: {

  ...
  webpackChain(chain) {
     chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin);
        chain.merge({
          module: {
           rule: {
              injectBaseComponentLoader: {
                test: /\.tsx$/,
                use: [
                  {
                    loader: 'taro-inject-component-loader',
                    options: {
                      importPath: '@/custom-tab-bar',
                      logError: true,
                      isPage(filePath) {
                        // 兼容 windows
                        const formatFilePath = filePath.replace(/\\/g, '/')
                        const reg = /pages\/(cart|plantGrass|user|index|classify)\/index\.[tj]sx$/
                        return reg.test(formatFilePath)
                      }
                    },
                  },
                ],
              },
              myloader: {
                test: /\.js$/, 
                use: [{
                  loader: 'babel-loader',
                  options: {}
                }]
              },
              es5Loader: {
                include: [
                  path.resolve(__dirname, "../node_modules"),
                ],
                test: /\.*[tj]s$/,
                use: [
                  {
                    loader: "babel-loader",
                  }
                ]
              }
            }
         ...
      });
  }
}

**结果测试：**好啦，我门把以上三个步骤走完之后就可以验证结果了。之后我们验证之后发件浏览器版本低于77之后是可以兼容了。因为我们只有Andriod 手机，所以使用了Andriod 10 、Andriod 9、Andriod 8 都是可以兼容了。好啦，到这里大功告成！！！