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需要等待页面内容加载完成后再处理元素的响应事件。
  }
}