android studio 扣费白屏,详解一次Vue低版本安卓白屏问题的解决过程
因为业务需要一定要使用安卓4.4的webview浏览页面,测试的时候发生了白屏问题,很自然想到使用babel转换部分ES6语法.
Babel 转换 Promise 和 Symbol ES6语法的配置
# 两项都需要放到生产依赖
npm install babel-polyfill --save
npm install es6-promise --save
// main.js
import 'babel-polyfill';
import Es6Promise from 'es6-promise';
Es6Promise.polyfill();
// babel.config.js
process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;
module.exports = {
presets: [
[
'@vue/app',
{
useBuiltIns: 'entry',
polyfills: [
'es6.promise',
'es6.symbol',
],
},
],
],
plugins,
};
// 使用vue cli3构建的vue项目
// vue.config.js
module.exports = {
transpileDependencies: ['webpack-dev-server/client'],
chainWebpack: (config) => {
config.entry.app = ['babel-polyfill', './src/main.js'];
}
}
但结果还是白屏,那么决定使用Babel把语法转换成安卓4.4以上,应该没有问题了。
// .browserslistrc
>= 1%
last 1 major version
not dead
Android >= 4.4
不同运行环境下的严格模式
结果还是白屏,查阅众多网络文章,同样没有很好的答案...
百思不得其解,无奈之下在 Android Studio 上下载了个4.4的模拟器,在内置浏览器上打开页面,使用 Chrome 远程调试 Android 上的浏览器, 在 Chrome 上地址栏输入 chrome://inspect/#devices 选择相应模拟器设备的 inspect 就会弹出 console 调试。
没想到发现报错是 Uncaught SyntaxError: Duplicate data property in object literal not allowed in strict mode ,意思是在严格模式下的对象里不能重复定义相同属性,但是这在现代浏览器(Chrome)的严格模式上运行是没有问题的,其结果是后定义的属性值会覆盖前定义的属性值,例如:
'use strict'
var test = {
a: 1,
a: 2,
}
// 结果test会定义成 => {a: 2}
但是为什么会这样呢,在打包后的报错js文件里将其格式化后发现是组件的属性重复定义了,
title="标题"
left-text="返回"
right-text="按钮"
left-arrow
@click-left="onClickLeft"
@click-right="onClickRight"
:left-arrow="true"
/>
我的项目里 Vant 的 left-arrow 被我重复定义了,组件会被转义成js:
所以说不同运行环境的严格模式还是会有不一样的结果,
在网上查了下资料总结了严格模式下的几种错误:
1. 我上面遇到的对象属性重复定义
2. 在函数声明中相同的参数名
SyntaxError: Strict mode function may not have duplicate parameter names.
例如:
function fix(a,b,a) {
return a+b;
}
3. 用前导0声明8进制直接量
SyntaxError: Octal literals are not allowed in strict mode.
var a = 012;
4. 在eval中声明变量、重新声明、删除或重写eval和arguments这两个标示符
SyntaxError: Assignment to eval or arguments is not allowed in strict mode.
例如:
'use strict';
eval('var foo = 2');
5. 用delete删除显示声明的标识符、名称和具名函数
SyntaxError: Delete of an unqualified identifier in strict mode.
例如:
function temp() {
'use strict';
var test = 1;
delete test;
}
6. 代码中使用扩展的保留字,例如 interface , let , yield , package , private 等
SyntaxError: Unexpected strict mode reserved word
7. 使用了 with
SyntaxError: Strict mode code may not include a with statement
8. 函数中不可访问caller、callee以及arguments
例如:
function foo(){
'use strict';
foo.caller; // TypeError
foo.arguments; // TypeError
arguments.callee; // TypeError
}
foo();
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
android studio 扣费白屏,详解一次Vue低版本安卓白屏问题的解决过程相关推荐
- android studio下的NDK开发详解
点击右边,选择你解压的NDK,点击应用.这一步将工具包关联到android studio. 在 local.properties 文件中设置ndk的路径: 就是你解压的NDK工具集的路径 我的是 ...
- Android Studio配置优化最全详解
适合第一次安装AS的新手,感谢网上的资源 是不是很多同学已经有烦恼出现了?电脑配置已经很高了,但是每次运行Android程序的时候就很卡,而且每次安装运行程序都要等待很长时间,如果是在开发后期需要不停 ...
- Android studio | Android studio下APP目录工程结构详解
/********************************************************************* github:https://github.com/Mic ...
- Android Doze and App Standby模式详解
Android Doze and App Standby模式详解 来源:腾云阁 https://www.qcloud.com/community Optimizing for Doze and Ap ...
- Android 系统属性读取和设置详解
Android 系统属性读取和设置详解 一.在adb中进行属性读取和设置 1.Settings Provider设置和读取 获取 设置 2.SystemProperties属性读取和设置 二.Andr ...
- Android vector标签 PathData 画图超详解
此文章来源于https://www.cnblogs.com/yuhanghzsd/p/5466846.html点击打开链接 Android vector标签 PathData 画图超详解 SVG是一种 ...
- android doze模式源码分析,Android Doze模式启用和恢复详解
从Android 6.0(API level 23)开始,Android提出了两个延长电池使用时间的省电特性给用户.用户管理可以在没有充电的情况下管理app的行为.当用户一段时间没有使用手机的时候,D ...
- Android四大组件Service之AIDL详解
Android四大组件Service之AIDL详解 前言 简介 基础知识 AIDL 服务端 定义AIDL文件规则 创建 .aidl 文件 清单注册 通过 IPC 传递对象 调用 IPC 方法 Andr ...
- Visual Studio(VS) Code详解
Visual Studio(VS) Code详解 1 介绍 1.1 简介 1.2 特色 1.3 发展历程 1.4 开发人员背景 1.5 与其他IDE对比 2 资料汇总 3 安装 3.1 下载 3.2 ...
- Android模拟器Genymotion安装使用教程详解
原文地址为: Android模拟器Genymotion安装使用教程详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.注册\登录 打开Genymotion官网,https://www.ge ...
最新文章
- 深入理解PHP内存管理之谁动了我的内存
- C# delegate
- C++中cstring和int互换
- 领域驱动专家张逸文字脱口秀:简单工厂不简单
- 【安卓开发】启动另一个 Activity
- jQuery Mobile 学习资料
- SQL Server 2008及以上版本出现”SQL Server 复制需要有实际的服务器名称才能连接到服务器...“的问题解决...
- 经典问题8连:小球和盒子
- primefaces教程_PrimeFaces教程
- java cookbook中文版_Java Client快速入门指南
- Stata | 初试
- ecshop flow.php goods_number,ecshop二次开发属性库存缺货的思路
- MV88DE3010之ffmpeg与m3u8
- 六十星系之03廉贞天府坐辰戌
- 老无所依nbsp;(聊后版)
- 【老九】【Python】文件操作与异常处理
- Steinhaus-Johnson-Trotter 生成全排列算法
- Android横向滚动卡片,RecyclerView+CardView实现横向卡片式滑动效果
- 《软件方法》第8章 分析 之 分析类图(1)
- C++PrimerPlus 第六章 分支语句和逻辑运算符(复习题)
热门文章
- 信用,在中国究竟值多少钱?
- c语言windows文本框,windows编程 如何创建文本框?
- OpenCV黑魔法之隐身衣 | 附源码
- 已解决(Python运行报错)SyntaxError: expression cannot contain assignment, perhaps you meant “==“?
- 1. ARMv9-A Overview
- 房屋租赁合同主要内容是那些
- DNS劫持和DNS污染的区别
- xml中外部引用DTD文档
- Cipher Block chaining
- rank函数python_Python pandas.DataFrame.rank函数方法的使用