因?yàn)闃I(yè)務(wù)需要一定要使用安卓4.4的webview瀏覽頁面，測(cè)試的時(shí)候發(fā)生了白屏問題，很自然想到使用babel轉(zhuǎn)換部分ES6語法.

十多年的鎮(zhèn)賚網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)營銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整鎮(zhèn)賚建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“鎮(zhèn)賚網(wǎng)站設(shè)計(jì)”,“鎮(zhèn)賚網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

Babel 轉(zhuǎn)換 Promise 和 Symbol ES6語法的配置

# 兩項(xiàng)都需要放到生產(chǎn)依賴
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構(gòu)建的vue項(xiàng)目
// vue.config.js
module.exports = {
 transpileDependencies: ['webpack-dev-server/client'],
 chainWebpack: (config) => {
 config.entry.app = ['babel-polyfill', './src/main.js'];
 }
}

但結(jié)果還是白屏，那么決定使用Babel把語法轉(zhuǎn)換成安卓4.4以上，應(yīng)該沒有問題了。

// .browserslistrc
>= 1%
last 1 major version
not dead
Android >= 4.4

不同運(yùn)行環(huán)境下的嚴(yán)格模式

結(jié)果還是白屏，查閱眾多網(wǎng)絡(luò)文章，同樣沒有很好的答案...

百思不得其解，無奈之下在 Android Studio 上下載了個(gè)4.4的模擬器，在內(nèi)置瀏覽器上打開頁面，使用 Chrome 遠(yuǎn)程調(diào)試 Android 上的瀏覽器, 在 Chrome 上地址欄輸入 chrome://inspect/#devices 選擇相應(yīng)模擬器設(shè)備的 inspect 就會(huì)彈出 console 調(diào)試。

沒想到發(fā)現(xiàn)報(bào)錯(cuò)是 Uncaught SyntaxError: Duplicate data property in object literal not allowed in strict mode ，意思是在嚴(yán)格模式下的對(duì)象里不能重復(fù)定義相同屬性，但是這在現(xiàn)代瀏覽器(Chrome)的嚴(yán)格模式上運(yùn)行是沒有問題的，其結(jié)果是后定義的屬性值會(huì)覆蓋前定義的屬性值，例如：

'use strict'
var test = {
 a: 1,
 a: 2,
}
// 結(jié)果test會(huì)定義成 => {a: 2}

但是為什么會(huì)這樣呢，在打包后的報(bào)錯(cuò)js文件里將其格式化后發(fā)現(xiàn)是組件的屬性重復(fù)定義了,

<van-nav-bar
 title="標(biāo)題"
 left-text="返回"
 right-text="按鈕"
 left-arrow
 @click-left="onClickLeft"
 @click-right="onClickRight"
 :left-arrow="true"
/>

我的項(xiàng)目里 Vant 的 left-arrow 被我重復(fù)定義了，組件會(huì)被轉(zhuǎn)義成js：

所以說不同運(yùn)行環(huán)境的嚴(yán)格模式還是會(huì)有不一樣的結(jié)果，

在網(wǎng)上查了下資料總結(jié)了嚴(yán)格模式下的幾種錯(cuò)誤：

1. 我上面遇到的對(duì)象屬性重復(fù)定義

2. 在函數(shù)聲明中相同的參數(shù)名

SyntaxError: Strict mode function may not have duplicate parameter names.

例如：

function fix(a,b,a) {   
   return a+b;   
 }

3. 用前導(dǎo)0聲明8進(jìn)制直接量

SyntaxError: Octal literals are not allowed in strict mode.

var a = 012;

4. 在eval中聲明變量、重新聲明、刪除或重寫eval和arguments這兩個(gè)標(biāo)示符

SyntaxError: Assignment to eval or arguments is not allowed in strict mode.

例如：

'use strict';
eval('var foo = 2');

5. 用delete刪除顯示聲明的標(biāo)識(shí)符、名稱和具名函數(shù)

SyntaxError: Delete of an unqualified identifier in strict mode.

例如：

function temp() { 
 'use strict'; 
 var test = 1; 
 delete test; 
}

6. 代碼中使用擴(kuò)展的保留字，例如 interface , let , yield , package , private 等

SyntaxError: Unexpected strict mode reserved word

7. 使用了 with

SyntaxError: Strict mode code may not include a with statement

8. 函數(shù)中不可訪問caller、callee以及arguments

例如：

function foo(){
 'use strict';
 foo.caller;  // TypeError
 foo.arguments; // TypeError
 arguments.callee; // TypeError
}
foo();

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享題目：詳解一次Vue低版本安卓白屏問題的解決過程
URL網(wǎng)址：http://aaarwkj.com/article34/jeesse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、全網(wǎng)營銷推廣、定制網(wǎng)站、云服務(wù)器、服務(wù)器托管、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)