ele.me在IOS浏览器端启动APP的技巧分析

ele.me在IOS浏览器端启动APP的技巧分析

1. 巧妙利用后台重定向，在schemes启动时提示用户打开，启动不了APP时能够及时跳转至下载页面。
2. 避免报错页面的出现以及用户还没来的及选择就跳转到下载页面。
3. 在没有universal link时，此种方法是一种很好的解决方案。

---

附上ele源码

<script type="text/javascript">
	"use strict";
	window.onload = function() {
		//尝试schemes码打开app
		location.href = "eleme://";  
		//判断andriod还是ios还是微信
		var e = window.navigator.userAgent,
		i = "",
		n = (new UParams).from;
		if(/iphone|iPad/i.test(e) && /micromessenger/i.test(e))
			return void(location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=me.ele");
		if(/Android/i.test(e) && /micromessenger/i.test(e))
			return void document.write('
      <div class="wechat-warning">
        <img src="//static11.elemecdn.com/eleme/activities/dist/download/tip.0ccdda.png" alt="下载应用请点击右上角按钮选择［在浏览器中打开］">
        <div>下载应用请点击右上角按钮<br/>选择［在浏览器中打开］</div>
      </div>
    ');
		if(!/iPhone|iPad/.test(navigator.userAgent))
			return void(location.href = "//uxmgnt.ele.me/download/" + (n ? n : "eleme"));
		//后台重定向处理（关键步骤）
		i = "//uxmgnt.ele.me/download/eleme"; 
		//ajax请求，怀疑是统计下载量
		var o = new XMLHttpRequest; //
		o.open("POST", location.origin.replace(/h./, "mainsite-restapi.") + "/ugc/download/channels/ios"),
		o.withCredentials = !0;
		var t = {
			source: n || "",
			is_web: !0
		};
		o.onload = o.onerror = function() {
		//触发后台重定向
			i && (location.href = i)
		},
		o.send(JSON.stringify(t))
	};
	
//  withCredentials解惑
//	如果需要读取读取cookie：
//	需要配置参数：Access-Control-Allow-Credentials:true
//	同时在xhr发起请求的时候设置参数withCredentials为true：
//	var xhr = new XMLHttpRequest(); ; 
//	xhr.open('GET', 'http: //b.com/cros/ajax.php', true);
//	xhr.withCredentials = true;
//	xhr.onload = function () {          
//	  alert(xhr.response);//reposHTML;
//	};  
//	xhr.onerror = function () {
//	 alert('error making the request.');
//	};
//	xhr.send();
//	如：Access-Control-Allow-Origin:http://a.com表示允许a.com下的域名跨域访问；
</script>

---

原文来至：http://www.cnblogs.com/chunlei36/articles/6287148.html