脚本宝典收集整理的这篇文章主要介绍了react 移动端 兼容性问题和一些小细节,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
react 移动端 兼容性问题和一些小细节
- 使用 ES6 的浏览器兼容性问题
- react 对低版本的安卓webview 兼容性
- iOS下 fixed与软键盘的问题
- onClick 阻止冒泡
- meta对于移动端的一些特殊属性
- 页面禁止复制、选中文本
1.使用 ES6 的浏览器兼容性问题
由于 Babel 默认只转换转各种 ES2015 语法,而不转换新的 API,比如 Promise,以及 Object.assign、Array.From 这些新方法,这时我们需要提供一些 ployfill 来模拟出这样一个提供原生支持功能的浏览器环境。
主要有两种方式:babel-runtime 和 babel-polyfill。
A.babel-runtime
1.babel-runtime 的作用是模拟 ES2015 环境,包含各种分散的 polyfill 模块,我们可以在自己的模块里单独引入,比如 PRomise:
![图片描述][1]
2.它们不会在全局环境添加未实现的方法,只是这样手动引用每个 polyfill 会非常低效,我们可以借助 Runtime transform 插件来自动化处理这一切。
首先使用 npm 安装
![图片描述][2]
3.然后在 webpack 配置文件的 babel-loader 增加选项:
![图片描述][3]
B.babel-polyfill
而 babel-polyfill 是针对全局环境的,引入它浏览器就好像具备了规范里定义的完整的特性,一旦引入,就会跑一个 babel-polyfill 实例。用法如下:
1.安装 babel-polyfill
![图片描述][4]
2.在入口文件中引用:
![图片描述][5]
2.react 对低版本的安卓webview 兼容性
A.andROId较低版本webview不支持Object.assign改用VAR objectAssign = require('object-assign’) 这种情况上面方案可以解决
B.import React from 'react';import ReactDOM from 'react-dom';//不可放在其他模块引入的后面,否则android5.0及以下版本webview报错
3.iOS下 fixed与软键盘的问题
猜你在找的ES2015(es6)相关文章
-
vuex 基本入门和使用(二)
2019-08-19
-
默认参数如何在JavaScript ES6中工作
2018-11-14
-
JavaScript ES6功能:好的部件
2018-11-14
-
如何使用ES6箭头函数使您的JavaScript更易于阅读
2018-11-14
-
如何使用ES6在JavaScript中有条件地构建对象
2018-11-14
-
关于如何使用Fetch API执行HTTP请求的实用ES6指南示例代码
2018-11-14
-
5个在ES6中修复的JavaScript“坏”的部分
2018-11-13
-
分享干货ECMAScript 2015(ES6)提示和技巧非常有用
2018-11-13
-
JavaScript ES6 - 写得少,做得更多 write less, do more
2018-11-13
-
什么时候(和为什么)你应该使用ES6箭头功能 - 何时不应该使用ES6箭头功能
2018-11-12