开发过程中,在ios平台遇到的坑竟比安卓多,解决方今天全给你!

由于并不是专职移动端app开发,但是看着丰富多彩的app,真是手痒痒,想自己亲手动手创造一个自己的app,来满足一下自己的成就感。

温馨提示:本文篇幅较长,建议讲究阅读策略,抓住每段的重点语句。

由于并不是专职移动端app开发,但是看着丰富多彩的app, 真是手痒痒,想自己亲手动手创造一个自己的app,来满足一下自己的成就感,那么有想法很好,二话不说自己就开始动手开干了,经过一系列调查,最终采用的技术选型是 h5+cordova技术来实现这个问题,用这种选型的好处就是开发效率高,能够实现一份代码多个平台,非常省心,当然,不好的地方是可能并没有原生开发的app那么流畅,不过相信随着h5技术的提升,这一差距也会逐渐的减小(根据实际做出的效果,个人感觉流畅度还是不错的,很难分辨出是原生的还是非原生的)。

开发过程中,在ios平台遇到的坑竟比安卓多,解决方今天全给你!

技术选型ok之后,就开始动手开干了,开始的第一步,开始写逻辑代码,利用2周的业余时间总共写了2600多行js代码,这2600行js代码算是全部功能的实现了,然后将这些代码部署了在我的一个几百块钱的安卓手机上之后,发现一些都还顺利,一切效果都是按照自己的意愿去执行的,既然安卓这么顺利了,我就想部署在苹果里也差不到哪里去,可是大错特错了,放在了我的iphone7中的运行体验真是太糟糕了,竟然还不如几百块钱的安卓里体验好,不过经过一些列的处理与代码兼容的调整,最后在我的iphone7里达到了理想的效果,那么接下来我就说说我所遇见的问题以及我是怎么去解决它的。

开发过程中,在ios平台遇到的坑竟比安卓多,解决方今天全给你!

全屏显示问题

作为一个娱乐游戏性的app, 个人感觉只有全屏展示才显得比较高端大气不是么?因此,没得说必须要全屏,在安卓下实现全屏很简单,按照cordova的官方说明在配置文件里加一句<preference name=”Fullscreen” value=”true” /> 这样的代码就可以轻松搞定这个问题了,可是到了ios下,发现这么做并没有什么卵用,那个可恶的电池条非常坚强的在那存在着,一丝不动,我尝试了n多种办法他依然淡定的在那里存在着,像是故意气我似的,最后找到了解决方法,在一个project.plist文件里加了两行配置,终于将它拿下,也总算是松了一口气了,嘿,小样,终于战胜你了吧,具体配置如下图所示(当然这只是其中一个解决方案,也肯定有其他的办法了)

开发过程中,在ios平台遇到的坑竟比安卓多,解决方今天全给你!

事件点击问题

之前曾经听说过,ios下点击事件延迟300ms的问题,但是对于普通的点击,这么短的延迟大多数人也是感知不到的,但是对于一些场景这个差别就大了去了,我的应用场景是玩家点击下落的物体,物体是在不停的向下运动,如果点击之后,延迟300ms,300ms后物体已经移动到另外一个位置了,特别是速度越来越快这个偏差将越来越大,这种情况300ms的延迟当然是无法接受的了,根据网上说的解决方案是通过引入fastclisk这个库文件进行解决,然后加入一句代码就可以轻松搞定,代码是这样写的:FastClick.attach(document.body);

不过在实际解决问题的过程中发现直接将这句代码copy过去并没有效果,注意细节的地方应该是那个地方不要写成document.body, 可能你的实际画布与document.body并不在同一层,而应该是将这个元素直接定位到你的画布上。

开发过程中,在ios平台遇到的坑竟比安卓多,解决方今天全给你!

现在终于知道ios的滑动效果为啥那么流畅了,因为它是做出了牺牲的,当手触摸屏幕的时候最先触发的是touch事件,而click优先级并没有这么高,安卓并没有做出这个牺牲,因此安卓的滑动效果上就不如苹果喽。

开发过程中,在ios平台遇到的坑竟比安卓多,解决方今天全给你!

后台唤醒问题

在ios下还会出现一个问题,那就是在后台停留的时间长了,整个应用再唤醒就像死了一样,点击屏幕上任何一点也没有什么反应,解决这个问题的办法,网上有人给出了解决方案如下,在页面加载完成后加入这样一段代码:

window.onpageshow = function(event) {

if (event.persisted) {

window.location.reload()

}

};

可是到实际应用中,并没有什么效果,大概率是没有应用好的缘故,我也懒得想这其中的具体原因了,最后我自己另辟蹊径用了这样一套方案。

在应用退出后台时触发这段代码(当然,下面这个代码里也包含了部分其他逻辑,不过不影响观看)

var timestamp1 = new Date().getTime();

var data = {data:”no”,outtime:timestamp1};

setJSONValue(‘shebeiStartflag’,data);

在应用重新从后台唤醒的时候执行下面这段代码:

if(‘ios’ == getMObileType() ){

var data = getJSONValue(‘shebeiStartflag’);

var timestamp2 = new Date().getTime();

if(data && data.outtime && (timestamp2 – data.outtime > 1000 * 300 ) ){

window.location.reload()

}

}

就这样,通过这两处代码,完美的解决了这样的问题

开发过程中,在ios平台遇到的坑竟比安卓多,解决方今天全给你!

屏幕不固定的问题

然后在ios下还会出现这样一个比较怪的现象,就是用手往上扒动或者往下扒动会出现这样的现象,会出现白边,为了更形象的说明,我就录制一段视频给大家看。

开发过程中,在ios平台遇到的坑竟比安卓多,解决方今天全给你!

视频 | 1111

时长:00:00:16

当然,很明显看出这是滑动触发的事件,在本应用中并不需要滑动,因此我就加了一段下面这个代码得意完美搞定这一问题。

var touchable = ‘createTouch’ in document;

if(touchable){

document.getElementById(“canvas”).addEventListener(‘touchmove’, function(e) {

e.preventDefault && e.preventDefault();

e.returnValue=false;

e.stopPropagation && e.stopPropagation();

}, false);

}

经过一系列的不屑努力,终于在iphone上也出现了一个体验完美的app了,另外不得不吐糟一下ios的证书问题也是很不友好的一个体验, 它并不像安卓下那个签名那么简单好用,关于证书的一些列配置,大家可以在网上找到,这里就不过多去说了,写下这篇文章的目的除了分享给大家之外,我也留着以后可以看,就相当于做了一个记录,希望我说的这些东西,对你有用!

大家好,我是“上世是朵花”。如果你有什么好的看法或者观点可以在评论区展现你的才华,互动交流,如果想进一步了解我,那就关注我吧!

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/10067.html

(0)
上一篇 2023年 4月 22日 下午11:55
下一篇 2023年 4月 22日 下午11:55

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信