uniapp 多端兼容开发遇到的问题总结

时间：2024-03-14 19:03:42

前言

基于业务需求，需要开发小程序并同时在多个平台发布，那无疑选择uniapp框架开发最适合。即可以节省开发成本，又可以减少开发时间，简直太爽了！但一套这么强大的框架固然也有许多坑等着我们去踩，只有踩坑才能让我们慢慢熟悉了解，那么下面就是记录我在开发过程中遇到了的问题：

技术栈选用：uniapp + VantUI

  1. van-dropdown-menu 下拉菜单切换
    初次从tab1->tab2 效果没问题；再从tab2->tab1 事件没进
    排查问题：遮罩层级问题，导致点击没效果
    解决：改变源码遮罩样式层级，将 @vant/weapp/dropdown-item/index.wxml 里面的 van-popup 的事件改成驼峰写法 afterEnter 和 afterLeave 就可以了

  2. input框 focus事件没生效
    解决：利用js去添加伪元素

  3. van-datetime-picker change事件 e.getValue() 会报错
    解决：通过ref实例去拿：getPicker().getValue() 可以拿到
    uniapp 多端兼容开发遇到的问题总结
    uniapp 多端兼容开发遇到的问题总结

  4. 在微信小程序平台，uniapp的v-html会编译成小程序富文本解析标签rich-text；但有标签限制，故不能使用vantUI相关组件
    解决：更换组件，使用原生标签
    例如: v-html里想插入van-field 输入框，发现没效果，故只能用 <input />

  5. vantUI的下拉菜单：van-dropdown-item 和 时间选择器：van-datetime-picker 在小程序平台没问题，但在h5发现报错了
    uniapp 多端兼容开发遇到的问题总结

问题：排除了自己代码书写问题（因为直接打开它本身的也报错了）可能是VantUI版本问题

解决： 可能鉴于兼容问题，会选择用uniapp自带UI库 —— uni-ui

后面会持续更新记录问题…

欢迎关注我的博客： https://blog.csdn.net/weixin_42323607

github地址： https://github.com/qdheyongjie

多多支持！本人会持续更新哒 ❤️

相关文章