Taro H5 在支付宝打开白屏的问题解决

一、前言

• 问题描述：基于 Taro 框架的 H5，本地构建或者发到服务器后，安卓手机在支付宝APP中打开链接呈现白屏的情况，但是在其他浏览器或者微信中打开正常；
• 问题根源：由于目前Android系统的支付宝APP的 webview 浏览器内核暂时不支持 ES6 或以上的高级 JS 语法，导致页面解析出错；
• 问题解决：在项目打包构建的时候，利用 babel 将 ES6 转成 ES5 即可。

二、解决步骤

1. 添加 Babel

yarn add @babel/preset-env

2. 添加版本限制（可不添加，最好添加一下）

// babel.config.js
// 添加以下配置内容：
// targets: {
//   ios: '9',
//   android: '5'
// }
module.exports = {
  presets: [
    [
      'taro',
      {
        framework: 'react',
        ts: true,
        targets: {
          ios: '9',
          android: '5'
        }
      }
    ]
  ],
  plugins: [
   ...
  ]
};

3. 添加 babel-loader 调用 babel，进行 es6 转 es5 操作

// config/index.js
const config = {
  ...
  h5: {
    ...
    webpackChain(chain, webpack) {
      chain.merge({
        module: {
          rule: {
            loader: {
              test: /\.js$/,
              use: [
                {
                  loader: 'babel-loader',
                  options: {}
                }
              ]
            }
          }
        }
      });
    }
  },
  ...
};

三、拓展补充

对于 ios9 和 android5 以下的版本，目前大部分情况下开发已不进行考虑兼容

Android 5及以下版本存在一些已知的问题和限制，包括但不限于：

• 安全性问题：随着Android版本的更新，Google不断增强了系统的安全性。Android 5及以下版本可能缺乏最新的安全补丁和防护措施。
• 性能问题：新的Android版本通常会包含性能优化和改进，而旧版本可能无法享受到这些优化。
• 兼容性问题：许多新的应用和库可能不再支持Android 5及以下版本。
• 用户体验：新的Android版本通常会带来更好的用户体验，包括新的用户界面和功能。
• API限制：Android 5及以下版本的API级别较低，无法使用一些新的API和功能。

开发者可能会限制对iOS 9及以下版本的支持，主要原因包括：

• 兼容性问题：随着iOS版本的更新，Apple引入了许多新的API和功能。这些新的API和功能可能无法在iOS 9及以下版本上使用。
• 安全性问题：新的iOS版本通常包含最新的安全补丁和防护措施。iOS 9及以下版本可能缺乏这些安全更新。
• 性能问题：新的iOS版本可能包含性能优化和改进，而iOS 9及以下版本可能无法享受到这些优化。
• 维护成本：支持旧版本的iOS可能会增加开发和测试的复杂性和成本。例如，开发者可能需要编写额外的代码来处理旧版本的iOS的特殊情况，或者需要在多个版本的iOS上进行测试。
• 用户基数：随着时间的推移，使用iOS 9及以下版本的用户可能会越来越少。因此，开发者可能会选择只支持更新的版本，以便能够专注于为大多数用户提供最好的体验。