angular2 移动端兼容性问题

最近做了个微信下的手机壳图片裁切项目,发现angular在移动端使用问题挺多(当然有些不是ng自身的问题),不同的手机型号会出现不同的情况。之前一直认为微信的浏览器就是手机上的ie,其实是错怪了微信 因为ios下微信其实用的是苹果自家的safari,只有android下用的是腾讯自己开发x5(虽然x5也是个奇葩东西)。

ios依然存在版本不统一,所以safari也会有不一样的情况。而angular2是一个比较超前的web开发框架(google基因使然,google推出如此多的开源项目一个很大的动力就是要掌握标准的制定权),很多功能用了并不是各家浏览器都实现的标准(如es6 chrome、ff支持最好,其他浏览器各有差别),这就需要我们应用要加入一些补丁去弥补浏览器实现的差异。

  • ** ios中部分es6语法报错的问题**

解决方法:如果是用angular-cli创建的项目找到 src/polyfills.ts文件修改下面这段:

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
/*** 如果只需要抹平es6的相关方法(如Object.assign等),只需要将上面这段注释掉的代码放出来 ***/

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.
/** 如果要使用svg元素,将上面这个classlist引入 **/

/** IE10 and IE11 requires the following to support `@angular/animation`. */
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
/** 如果有用到angular的animation模块,那需要安装web-animations并引入项目中 **/

angular官方文档 https://angular.io/guide/browser-support 中所说的在index.html中加入<script src="node_modules/core-js/client/shim.min.js"></script>这段代码应该是用在非angular-cli创建的项目中。
大家可以安装自己项目类型选择不同的补丁方式。

  • ios下click事件延迟300ms的问题

微信安卓端的表现基本与chrome差别不大,只要在index.html加入下面这句就不会出现点击延迟的情况

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

而ios就比较特殊了,加入以上代码依然无用。经过实际测试发现了两种方法:

第一种很简单只需设置html touch-action,虽然此方法网上说是针对ie的,经测试对ios safari依然有效。

html {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

第二种是使用fastclick解决。一开始想直接在index.html中加入FastClick.attach(document.body)来解决,但是发现没有作用。可能是因为ng都是异步渲染,导致该代码监听不到页面元素,于是换了一种思路,在component的afterview后调用。
首先安装fastclicknpm i fastclick --save,然后按下面的代码使用:

import * as FastClick from 'fastclick'
export class BrandListComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    FastClick['attach'](document.body);  //注意一定要放在该方法里,fastclick需要等待页面内容加载完成后再处理元素的响应事件。
  }
}

推荐阅读更多精彩内容