前端时间连着开发了俩个项目,都是在线教育类的,uni-app架构,一套代码兼容移动端h5+小程序。碰到一些兼容性问题,这里做个记录:
一、默认使用uni-app创建的css
有个默认引用的css(uni.css),里面是一些uni- 标签用到的默认css;
其中有个
view{
font-size:32upx;
line-height:1.4
}
这个line-height的默认会在某些特殊情况下影响你的样式,记得删掉或者是在我们的view里给上这个属性。
二、一套css兼容很多配置需要细心
uni-app自带的upx会自适应,但在ipad,或者更大的尺寸是就会发现,字体,行距,会越来越大,样式上会变得很丑;
我的解决方案是:
1.横向布局用百分比与flex布局,尽量不用upx;
2.全局的字体大小等用px;
3.竖向布局行距等用px,其他自动撑开;
即便是这样,在测试了很多款手机(安卓和ios)+ (自带,uc,微信,qq,谷歌)等多款浏览器,依然会发现某些个别的手机样式错乱,这个时候需要单独再调试,像我的这个发生在ipone8的微信浏览器上
三、声音Audio
uni-app官方推荐let innerAudioContext = uni.createInnerAudioContext();的这种写法,实测,在华为手机自带浏览器+安卓手机的uc浏览器会出现bug,导致无法自动播放,播放后无法播放第二次。。。,在小程序里bug相对较少,毕竟平台微信已经做了统一;
我的解决方案是:
1.做了条件编译,在小程序用之前let innerAudioContext = uni.createInnerAudioContext();这一套,在h5用下面这一套:
this.innerAudioContext = new Audio()
this.innerAudioContext.src = that.src
this.innerAudioContext.play()
通过UI设计让芜湖触摸或者点击,来达到无感知的自动播放效果,经测试完美实现所需效果;
四、swiper组件
默认的组件是这样的
<swiper class="swiper" :current="current" skip-hidden-item-layout="true" :indicator-dots="indicatorDots" @change="currentChange"
indicator-active-color="#2CC0D6">
<swiper-item v-for="(item,index) in examList" :key="index">
</swiper-item>
</swiper >
测试,在安卓手机正常,ios出现滑动错乱的问题;
我的解决方案是:
1.js判断是否为ios,若不是,采用原来的;若是,弃用swiper,放弃滑动效果,改用按钮点击实现;
最后,我想说的是,由于前端的技术更新太快,而且安卓,ios,浏览器的各种兼容性问题,在实现一套代码兼容所有平台的路上目前还没有技术能够做到成熟,都是在摸索的路上,uni-app也一样,不过它确实在一定程度上缓解的代码开发工作,比如之前同样的样式,逻辑,我需要先用wepy开发小程序,在用普通的vue开发h5,现在直接用uni-app一套代码开发,上线两端,代码量减少,效率增加,上手也快,希望未来,能有更多像这样的统一兼容框架能够出来。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)