uniapp小程序踩坑指南

最新推荐文章于 2025-07-30 11:39:27 发布
最新推荐文章于 2025-07-30 11:39:27 发布
阅读量234 收藏 5
点赞数 7
CC 4.0 BY-SA版权
文章标签： uni-app 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/pureSnow_code/article/details/149644741

1、u-popup 里的日期组件在苹果手机中会被截断

        弹窗组件是使用picker-view的自定义组件，解决方法是将日期组件放在最外层，不要包在其他dom里，然后z-index的值调大一些

2、表单切换tab，在小程序中隐藏掉的字段仍会被一些校验规则校验拦截

3、表单重新设置规则后，已填字段的校验问题

        重新设置规则需要在this.$nextTick里面去设置

4、UI 设计图 img 变形问题（使用image标签）

        使用image组件，uni-app 的 image 组件在小程序和 H5 中表现一致，比原生 img 标签兼容性更好

        mode="aspectFit"：这个模式确保图片在指定尺寸内等比缩放，完全显示且不变形。

        需要注意的是元素需要设置宽高

5、苹果手机小程序字体比设计图上小半个像素，安卓没有问题

        原因是：ios默认会调整字体渲染或者优化渲染，导致字体较小 
        如果需要适配的话可以采用transform sacle 去进行缩放1.05左右，风险较大

6、u-popup 最上方如果有内容的话不留安全区域，在小程序上会覆盖右上角退出程序的按钮

        这种单独适配一下小程序，给个margin或者padding即可

7、页面如果有背景色但是数据有多有少的情况，小程序/APP背景色不全问题

        原因是高度不够，需要设置一下 min-height：100vh

pureSnow_code
关注
Vite+Vue3+UniApp 微信分享踩坑指南 (一)
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
03-21 313
如果你用，官方文档里的配置方式是无效的，正确的做法是直接用和进行注册，避免踩坑。
UniApp小程序按钮分享到朋友圈和微信好友
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
03-21 674
不要用，小程序不支持，直接会报错。用，让微信小程序自己触发分享面板。记得配置和，自定义分享的标题、图片、链接。我踩了坑，你们就不用踩了，赶紧改代码试试吧！🚀。
vue3+uniapp开发小程序踩坑指南（持续更新）
沉淀，积累、进步
06-05 1919
uniapp +vue3 开发小程序遇到问题
uni-app开发微信小程序踩坑指南
Growing up Or Growing old
04-13 1208
uniapp踩坑指南
uniapp踩坑指南之坑多到写不完
qq_39756331的博客
11-26 3763
1、sticky:到达指定位置时，就停留在那里不动了。当发现可以走时，立马就走了。 如果走不了就不会动了，就会一直在那里。 https://www.cnblogs.com/byeyear/p/11999334.html 设置了sticky定位的元素相对于第一个定位不为static的父级元素的位置，sticky的作用区域也是在该父级元素的内。也就是说粘性布局的效果只在该父元素内表现出来。 使用条件： 1、父元素不能overflow:hidden或者overflow:auto属性。 2、必须指定top、bott
UniApp小程序开发到上线流程指南
牛奶夹心巧克力
05-05 877
UniApp小程序开发到上线流程指南
微信小程序项目转uniapp踩坑日记
Binge的Blog，一起加油鸭！
12-30 2171
由于想要把之前完成的微信小程序项目转换成uniapp项目，这样的话之后可以编译成其他平台的小程序、网页、安卓、IOS,所以开始了我的踩坑之旅。PS：安卓和IOS还是算了，主要弄其他小程序可以省很多功夫，但是各个平台不一样有的还是要自己来做，但是会省不少力气。
uniapp使用及踩坑项目记录
qq_45832807的博客
01-28 7072
在src下创建components文件夹，把创建的组件存放在components中，然后就可以全局使用了，不用导入，也不用注册，直接通过自定义组件文件名称来使用，vit会自动识别components中的文件为组件。由于vue3中不支持require，所以我就用自定义组件的方式， 通过利用image的error方法来实现了图片加载失败的占位效果。imgUrl : {也可以通过下面这种方式写，我是用自定义组件是因为调用接口的方法不支持内容的修改。
微信医保小程序支付踩坑指南二
qq_29239231的博客
02-29 1711
4. 微信医保支付权限申请 这里需要发送相应格式的文件给微信医保。该微信商户号需要为通过微信平台申请的商户号，不能为银行等渠道提供的商户号。），点击【单位服务】版块下的申报功能或点击右上角【单位登录】按钮，进入单位网厅登录页 这里分为 微信(公众号/小程序) 支付宝 app 每个申请渠道申请的数据都不相同，这里谨慎一点。此文件由医保官方人员提供。5.申请反馈单的同时可以和微信医保人员加微信群，进行医院微信医保立项操作。由于微信医保签名demo是java版本的，我修改了一份php版本的方法，提供给大家使用。
Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接，uniapp第一个项目指南
qq_37980878的博客
02-26 8230
Android uniapp项目接入实例、uniapp混合开发踩坑手册、uniapp Android与H5对接，uniapp小白指南
uniapp微信小程序云开发订阅消息推送踩坑指南
kung的博客
07-07 966
开发思路 思路大纲 搭建uniapp环境 下载HbuilderX 选择文件-新建项目，选择uniapp项目，随便命名一个名字 安装npm依赖 $ npm i hydrogen-js-sdk --save //因为数据添加用到了bmob云数据库，需要安装`hydrogen-js-sdk`npm包 编写业务代码 添加数据(bmob)，后期替换为腾讯云开发数据库 获取第三方小程序推...
uniapp使用企业微信SDK踩坑指南
小陈的博客
06-16 4343
正常的话，从这一步开始，成功引入以后在相关的页面根据企业微信的文档来构建相关的接口 调用 config和angetConfig，调用成功后就可以使用企业微信提供的相关API了。在windows电脑上和安卓手机端也确实很快就成功了。 通过ready接口处理成功验证 通过error接口处理失败验证 继续注册wx.agentConfig 以上是根据企业微信提供的文档整理的一些代码片段，在开发过程中，还需要对这些注册进行二次封装，便于不同页面使用。就在我在windows电脑上实现了相应的功能觉得万
UniappDay03
The_era_achievs_的博客
07-26 413
类型的复用/** 热门推荐 *//** id信息 */id: string/** 活动图片 *//** 活动标题 *//** 子类选项 *//** 热门推荐-子类选项 *//** 子类id */id: string/** 子类标题 *//** 子类对应的商品集合 */url,data,})
uniapp input 聚焦时键盘弹起滚动到对应的部分
FUFCY的博客
07-27 257
uniapp input 聚焦时键盘弹起滚动到对应的部分
uniApp实战六：Echart图表集成
最新发布
博主逸尘
07-30 17
本文介绍了在Uni-app中集成Echarts图表并实现数据动态刷新的方法。主要内容包括： 1) 页面布局设计，顶部时间选择器、中间Echarts图表和底部监测项切换按钮； 2) 通过renderjs-echarts-demo插件集成Echarts图表； 3) 实现网络请求获取动态数据； 4) 底部按钮切换和顶部时间选择的事件处理； 5) Echarts图表的数据绑定和样式配置。 文章提供了完整的代码示例，展示了如何构建一个数据可视化的监测页面，实现图表数据的动态更新和交互功能。
uni-app x开发避坑指南：拯救被卡顿的UI线程！
归梦工作室
07-29 572
uni-appx开发中UI线程优化指南，针对动画卡顿问题提出解决方案。分析三大主因：onLoad生命周期耗时操作、DOM元素过载、同步阻塞操作。提供优化方案：1)将耗时操作移至onReady；2)使用虚拟滚动和懒加载优化DOM；3)采用WebWorker异步处理。推荐使用性能分析工具监控，并运用uni-appx的异步编程工具（请求、下载、Worker线程）。通过合理分配任务，确保UI线程高效运行，实现流畅用户体验。
uniapp+高德地图实现打卡签到、打卡日历
FinelyYang的专栏
07-26 374
（1）获取打卡规则：上下班打卡时间、当前位置标记、考勤打卡范围，加载打卡记录，打卡距离计算是否外勤打卡，上班打卡还是下班打卡，上班是正常打卡或迟到打卡，下班是正常打卡或早退打卡等计算。打卡提交和更新打卡。是否需要上班接口需要获取考勤规则中的打卡星期，如果在打卡星期范围内，则默认为上班日，不在范围内则为休息。如果配置法定节假日自动排休，则法定节假日休息日对应需要将打卡日期改为休息，法定节假日补班日（上班日）对应需要将打卡日期改为上班。选择日期后统计打卡次数，获取打卡时间和位置，外勤打卡标记。
uniapp使用谷歌地图获取位置
weixin_45561965的博客
07-30 94
最近在使用uniapp开发的时候，由于客户是国外的，要求使用谷歌地图获取位置，所以找了一下实现的方法。首先在需要在需要使用地图的页面引入。看到这如果对你有帮助的话。
使用uni-app开发一个点餐收银台系统前端静态项目练习
Json的知识梦工厂
07-27 514
本文介绍了一个基于uni-app开发的点餐收银系统前端项目。该项目采用uni-ui组件库，实现了跨平台适配，包含收银主页、订单管理、会员管理、卡券核销和登录页等核心功能模块。文章展示了系统界面效果图，并指出该项目适合前端初学者练习uni-app框架使用。作者表示这是一个非开源项目，提供了项目详情链接。该项目重点在于静态页面实践，有助于开发者快速掌握uni-app开发技术。
推荐几个不错的uni-app专栏，并给出链接
04-04
1. Uni-app实战教程 链接：https://zhuanlan.zhihu.com/uniapp 2. Uni-app开发进阶 链接：https://zhuanlan.zhihu.com/uniapp-advance 3. Uni-app深度剖析 链接：https://zhuanlan.zhihu.com/uniapp-analysis 4. Uni-app源码分析与实践 链接：https://zhuanlan.zhihu.com/uniapp-sourcecode 5. Uni-app踩坑记录 链接：https://zhuanlan.zhihu.com/uniapp-pitfalls 6. Uni-app组件库开发 链接：https://zhuanlan.zhihu.com/uniapp-components 7. Uni-app小程序开发实战 链接：https://zhuanlan.zhihu.com/uniapp-miniapp 8. Uni-app插件开发 链接：https://zhuanlan.zhihu.com/uniapp-plugin 9. Uni-app全面指南 链接：https://zhuanlan.zhihu.com/uniapp-guide 10. Uni-app性能优化 链接：https://zhuanlan.zhihu.com/uniapp-performance
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值