uni-app开发问题总结（小程序与h5）2：兼容性

旧城等待， 2021-10-19 05:44 1238阅读 0赞

前端时间连着开发了俩个项目，都是在线教育类的，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一套代码开发，上线两端，代码量减少，效率增加，上手也快，希望未来，能有更多像这样的统一兼容框架能够出来。**