uni-app开发问题总结(小程序与h5)2:兼容性

前端时间连着开发了俩个项目,都是在线教育类的,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组件

默认的组件是这样的


					    

测试,在安卓手机正常,ios出现滑动错乱的问题;

我的解决方案是:

1.js判断是否为ios,若不是,采用原来的;若是,弃用swiper,放弃滑动效果,改用按钮点击实现;

最后,我想说的是,由于前端的技术更新太快,而且安卓,ios,浏览器的各种兼容性问题,在实现一套代码兼容所有平台的路上目前还没有技术能够做到成熟,都是在摸索的路上,uni-app也一样,不过它确实在一定程度上缓解的代码开发工作,比如之前同样的样式,逻辑,我需要先用wepy开发小程序,在用普通的vue开发h5,现在直接用uni-app一套代码开发,上线两端,代码量减少,效率增加,上手也快,希望未来,能有更多像这样的统一兼容框架能够出来。

你可能感兴趣的:(前端框架之uni-app)