一、前言
- 问题描述：基于 taro 框架的 H5，本地构建或者发到服务器后，安卓手机在支付宝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及以下版本的用户可能会越来越少。因此，开发者可能会选择只支持更新的版本，以便能够专注于为大多数用户提供最好的体验。
