2023年6月21日发(作者：)

uni-app开发问题总结（⼩程序与h5）2：兼容性前端时间连着开发了俩个项⽬，都是在线教育类的，uni-app架构，⼀套代码兼容移动端h5+⼩程序。碰到⼀些兼容性问题，这⾥做个记录：⼀、默认使⽤uni-app创建的css有个默认引⽤的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的微信浏览器上三、声⾳Audiouni-app官⽅推荐let innerAudioContext = InnerAudioContext();的这种写法，实测，在华为⼿机⾃带浏览器+安卓⼿机的uc浏览器会出现bug，导致⽆法⾃动播放，播放后⽆法播放第⼆次。。。，在⼩程序⾥bug相对较少，毕竟平台微信已经做了统⼀；我的解决⽅案是：1.做了条件编译，在⼩程序⽤之前let innerAudioContext = InnerAudioContext();这⼀套，在h5⽤下⾯这⼀套：udioContext = new Audio() = ()通过UI设计让芜湖触摸或者点击，来达到⽆感知的⾃动播放效果，经测试完美实现所需效果；四、swiper组件默认的组件是这样的 测试，在安卓⼿机正常，ios出现滑动错乱的问题；我的解决⽅案是：判断是否为ios，若不是，采⽤原来的；若是，弃⽤swiper，放弃滑动效果，改⽤按钮点击实现；最后，我想说的是，由于前端的技术更新太快，⽽且安卓，ios，浏览器的各种兼容性问题，在实现⼀套代码兼容所有平台的路上⽬前还没有技术能够做到成熟，都是在摸索的路上，uni-app也⼀样，不过它确实在⼀定程度上缓解的代码开发⼯作，⽐如之前同样的样式，逻辑，我需要先⽤wepy开发⼩程序，在⽤普通的vue开发h5，现在直接⽤uni-app⼀套代码开发，上线两端，代码量减少，效率增加，上⼿也快，希望未来，能有更多像这样的统⼀兼容框架能够出来。

2023年6月21日发(作者：)

uni-app开发问题总结（⼩程序与h5）2：兼容性前端时间连着开发了俩个项⽬，都是在线教育类的，uni-app架构，⼀套代码兼容移动端h5+⼩程序。碰到⼀些兼容性问题，这⾥做个记录：⼀、默认使⽤uni-app创建的css有个默认引⽤的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的微信浏览器上三、声⾳Audiouni-app官⽅推荐let innerAudioContext = InnerAudioContext();的这种写法，实测，在华为⼿机⾃带浏览器+安卓⼿机的uc浏览器会出现bug，导致⽆法⾃动播放，播放后⽆法播放第⼆次。。。，在⼩程序⾥bug相对较少，毕竟平台微信已经做了统⼀；我的解决⽅案是：1.做了条件编译，在⼩程序⽤之前let innerAudioContext = InnerAudioContext();这⼀套，在h5⽤下⾯这⼀套：udioContext = new Audio() = ()通过UI设计让芜湖触摸或者点击，来达到⽆感知的⾃动播放效果，经测试完美实现所需效果；四、swiper组件默认的组件是这样的 测试，在安卓⼿机正常，ios出现滑动错乱的问题；我的解决⽅案是：判断是否为ios，若不是，采⽤原来的；若是，弃⽤swiper，放弃滑动效果，改⽤按钮点击实现；最后，我想说的是，由于前端的技术更新太快，⽽且安卓，ios，浏览器的各种兼容性问题，在实现⼀套代码兼容所有平台的路上⽬前还没有技术能够做到成熟，都是在摸索的路上，uni-app也⼀样，不过它确实在⼀定程度上缓解的代码开发⼯作，⽐如之前同样的样式，逻辑，我需要先⽤wepy开发⼩程序，在⽤普通的vue开发h5，现在直接⽤uni-app⼀套代码开发，上线两端，代码量减少，效率增加，上⼿也快，希望未来，能有更多像这样的统⼀兼容框架能够出来。