当前位置: 代码迷 >> 综合 >> Taro 框架开发的H5项目,在Android 5.1手机的APP嵌套的webview中白屏问题及解决方案
  详细解决方案

Taro 框架开发的H5项目,在Android 5.1手机的APP嵌套的webview中白屏问题及解决方案

热度:83   发布时间:2024-03-09 01:20:13.0

出现的问题:

使用Taro框架进行移动端H5项目开发,打包构建后,在Android 5.1手机上(目前遇到的机型是vivo Y66),使用该手机的自带浏览器可以正常加载该H5项目,但在公司APP的webview加载该H5项目,显示白屏。

问题定位:

根据以往经验,和在网上查找的信息(此处要吐槽一下,Taro相关社区、开发贴真是少),确定是在打包或者编译过程中,es6转es5没有完全进行转译造成的。

其中的问题,主要集中在打包完成后生成的dist/js/app.js中,该文件中还保留有箭头函数、const、let等语法,还有容易忽略的Object.assign等。用于转换语法的插件目前使用较多的是babel,但是babel并不会转译全部es6语法,有些是不会处理的,例如IteratorGeneratorSetMapProxyReflectSymbolPromise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码,参考文档——《ES6标准入门》-阮一峰中ECMSScript 6简介一章中polyfill一节相关内容。

处理方案:

目前总结的处理方案,并非最优处理方案,有待以后继续学习webpack等知识点,尽可能通过现有插件自动化进行处理;

1、对于最终打包后生成的dist/js/app.js还含有箭头函数、const、let等es6语法的问题:

针对该问题,需要在项目的config/index.js中,对应的h5配置项中,使用webpackChain配置方法,进行处理;

需要将node_nodules/@taro下的各个组件分别引入,用于告知webpack,在编译或者构建时,对相应文件进行语法处理;这样,在构建后生成的app.js文件便找不到箭头函数等es6语法了;

h5: {...webpackChain(chain, webpack) {...chain.module.rule("script").include.add(resolve("src")).add(resolve("test")).add(resolve("node_modules/@tarojs")).add(resolve("node_modules/@tarojs/api")).add(resolve("node_modules/@tarojs/cli")).add(resolve("node_modules/@tarojs/components")).add(resolve("node_modules/@tarojs/helper")).add(resolve("node_modules/@tarojs/mini-runner")).add(resolve("node_modules/@tarojs/react")).add(resolve("node_modules/@tarojs/router")).add(resolve("node_modules/@tarojs/runner-utils")).add(resolve("node_modules/@tarojs/runtime")).add(resolve("node_modules/@tarojs/service")).add(resolve("node_modules/@tarojs/shared")).add(resolve("node_modules/@tarojs/taro")).add(resolve("node_modules/@tarojs/taro-h5")).add(resolve("node_modules/@tarojs/taro-loader")).add(resolve("node_modules/@tarojs/taroize")).add(resolve("node_modules/@tarojs/transformer-wx")).add(resolve("node_modules/@tarojs/webpack-runner")).add(resolve("node_modules/taro-ui")).add(resolve("node_modules/reto"));chain.module.rule("script").exclude.clear();...},...}

2、针对Object.assign方法的处理:

在处理了基本语法问题后,发现app.js中还是有Object.assign的方法;

(1)  针对该问题,目前使用的处理方法为,在入口文件index.html中重写Object.assign方法,做兼容处理:

参考文档:MDN Web 文档——Object.assign();

对于以下代码,还看到一篇技术贴,有做更深入的处理,对应文章:Object.assign的polyfill引起的思考 ;

<script>// 处理打包后Object.assign未被转为es5问题if (typeof Object.assign != 'function') {Object.assign = function(target) {'use strict';if (target == null) {throw new TypeError('Cannot convert undefined or null to object');}target = Object(target);for (var index = 1; index < arguments.length; index++) {var source = arguments[index];if (source != null) {for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}}return target;};}</script>

(2)如果不想在index.html中重写方法,还可以使用babel-polyfill(尝试过,没有生效):

1、安装依赖npm i --save babel-polyfill2、在项目入口文件app.tsx中引入,写在最上边import 'babel-polyfill'
// 或者
require('babel-polyfill')

按照方法二中的写法引入,重新编译或者构建均未成功处理Object.assign的转译。可能跟babel配置或者taro的配置有关,目前对于该部分还是盲区,待以后成功处理再做补充更正吧。

总结:

Taro框架虽然可以一套代码,通过不同构建命令,在H5、多端小程序甚至RN中使用,但是限于其基于小程序为基础进行的开发模式,还有许多在开发中感觉别扭的地方,例如样式的书写,对低版本Android和iOS系统中应用时的兼容问题,以及项目的webpack配置等,都要花时间去学习总结,并且相关社区建设,反馈问题、查找问题及解决方案都太方便。不过目前也没有一个比较完美的一套代码跑多端的技术方案,希望以后能够遇到吧。

  相关解决方案