实在应当更多的是相互的磨合与进修,愿望身旁的人能够有自身的履历分享,与明白,相互提高才是人人须要的,作为一个 “年迈” (我也是90后) 的开辟者,我以为一代胜一代,将来才有胜算。额,好了,我不充任先生的角色了,去正题。
1. 安卓中 a 标签的坑
在和客户端交互的历程当中,每每都有跳转的,而在我们 Web 开辟中,默许的 href
属性通常是 #
,然后经由历程猎取标签绑定行动触发事宜,这里有个坑,在与安卓交互历程当中会发明。
<a href="#">click me</a>
// include zepto or jquery or other.
$(function () {
$('a').on('tap, click', function () {
alert('test');
return false;
});
});
上述代码中,会引起安卓交互中的一个坑,就是没点击一次,安卓都会在计数器上+1, 也就是,点击第一次,弹一次窗,点击第二次,会弹两次窗,云云类推。
解决方法:
<a href="javascript:void(0);">click me</a>
Fxied!!
2. 安卓中交互的坑
我丢,安卓这个坑爹,在 js
交互中,没法通报对象,匿名函数等等的范例。也就是说,假如你的参数是接收一个对象的,你必需将她转成 String
,而且安卓中的返回值也是只能返回 String
,在我们接收以后须要将字符串转换成对象。
简朴 推断客户端范例的:
isiOS: function () {
if (this.ua.match(/android/i) == "android") {
return false;
}
return true;
},
isAndroid: function () {
if (this.ua.match(/android/i) == "android") {
return true;
}
return false;
}
解决方法:
encode: function (data) {
if ("" == data) {
return {};
}
return JSON.stringify(data).replace(/"/g, '\'');
},
decode: function (data) {
if ("" == data) {
return "{}";
}
return JSON.parse(data.replace(/\'/ig,'\"'));
}
在挪用 iOS 或许 android 的时刻,先将参数通报到 encode 处举行过滤。
3. 推断页面是不是在运用内翻开
实在这个很简朴,常常做 web 开辟的都应当晓得,我们天天都与 Http 协定打交道,而在 Http 中,有一个很重的的标识,就是 User-Agent,简称 UA,实在这个东西就像我们的门票一样,有着种种的信息在上面,实在就包含了许多的浏览器内核信息,版本信息,厂商等等……我们就是从这个处所入手,在客户端中定义自身的版本信息,与微信一样。今后离别什么 url 上加什么破参数啊什么的。
以我的履历来设想的话,平常依据这个花样:
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5 {company} {appname} [{type}]/{version}
如: 腾讯,微信 [外洋版本] 6.0.0
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5 Tencent MicroMessager oversase/6.0.0
由于此处我还没太多打仗客户端开辟,临时没有客户端代码演示.
us: window.navigator.userAgent.toLowerCase(),
is: function (name) {
return tools.ua.match(eval("/" + name + "/i")) == name ? true : false;
}
Examples:
if (/* Is app inside */) {
/* Operation */
} else {
/* Is app outside */
/* Operation */
}
Combine: In wechat
if (/* In wechat app */) {
/* open share guide */
} else {
if (/* In app */) {
if (/* Is iOS */) {
/* share iOS sdk */
} else {
/* share android sdk */
}
} else {
/* share operation */
}
}
4. 请善用你的 Http Status Code
曾几何时,我也是一个懵懂蒙昧的骚年,连接口是干吗用的都不晓得,也许也在 2014/8 月份摆布,我对接口都是一种很畏敬的眼力去对待,直到现在,2016年,我越发视接口是统统数据库的泉源,其代价是最高高在上的。然则由我打仗接口(Application Programing Interface)开辟以后,我发明现在的接口有很多题目,一个很明显的就是,为啥每一个接口都是 200,不应当啊,那非 200 相应的应当怎么办?有做处置惩罚吗?
直到厥后,我推翻了这一征象,也说服了各方的人。我举一个 Ajax
的例子:
起首我先问一个题目,为什么 jquery 和 zepto 的 ajax 中,都有一个 error
回调?
$.ajax({
// some code
success: function () {},
error: function () {}
});
请不要疑心设想者的智商与学问,我猜他应当会比你智慧以及牛叉。这么做,一定有缘由的。实在这里的 error
就是为了让非 2xx 状况的时刻进入的操纵的。
如示例:
{
status: 1
content: {}
}
以上例子自身没有毛病,仅以自身意见对上述举行批评
实在我们应当要善用自身已有的东西,不须要再重新造多一个,吃力不讨好,那你们就最先好好补一补 Http Status code 相干的学问吧。
示例:
Request Method:GET
Status Code:200 OK
200
平常都是胜利相应,3xx
4xx
5xx
依据差别的状况码举行差别的处置惩罚机制,无需反复再做这一步骤了,实在设想者也很清楚设想出状况码的意义,应当善用。
5. 推断运用是不是装置,假如装置,则翻开,不然则跳去下载
实在这个有点无理取闹,然则又不得不去做,起首这个实在道理也是挺绕的
应用iframe尝试翻开自定义scheme
跳转到下载地点
只是谁人推断……
实在我是发起这些操纵一致由一个处所去做,比方定义一个域名叫: down.xxx.com/运用id,背景读取运用id 置信信息,一致由一处转发。
function open () {
var ifr = document.createElement('iframe');
ifr.src = url;
ifr.style.display = 'none';
document.body.appendChild(ifr);
window.setTimeout(function(){
document.body.removeChild(ifr);
}, 3000);
}
注重 iOS9 对这个有点不兼容,所以,郑重,iOS7,iOS8,安卓均能够完成
猎取版本信息:
var getVersion = function () {
if (tools.client.isAndroid()) {
return parseFloat(tools.ua.match(/Android\s(.*?);/i)[1]);
}
return parseFloat(tools.ua.match(/OS\s(.*?)\slike/i)[1].split('_').join('.'));
};
这里须要推断体系范例及版本:
if (/* iOS */) {
if (/* iOS version less than 9.0 */) {
/* try open scheme */
/* redirect download link */
} else {
/* other operate */
}
} else {
/* try open url */
/* redirect download link */
}
所以,因而可知实在这里的推断会许多,许多,许多。所以我墙裂发起都一致到一个处所做分发。
这里实在还须要推断是不是微信,是不是运用内翻开,是不是是分享出去的。
连系第 3 点的例子想一想,这里的 if
…… 实在照样很恐惧的,我已无路可退了……