说到UniApp的跨平台开发，不得不承认这真是个让开发者又爱又恨的家伙。爱它是因为确实能一套代码跑多个平台，恨它则是坑也不少，特别是不同平台的兼容性处理上。就拿我们团队最近做的一个租赁小程序来说，基于ThinkPHP+UniApp的架构，既要适配微信小程序，又要兼顾H5端，中间调试过程简直是一把辛酸泪。
UniApp跨平台的核心机制
UniApp的核心原理其实挺有意思的，它通过Vue.js作为开发框架，然后利用条件编译将代码转换成各平台的原生代码。比如在微信小程序里会编译成WXML/WXSS，而在H5端则生成标准的HTML/CSS。这种转换不是简单的1:1映射，而是做了很多适配层的工作。我们做租赁系统时就发现，uni.request在不同平台下的表现差异需要特别注意，特别是在处理支付回调时。
实战中的平台适配经验
做那个租赁商城时最头疼的就是首页装修模块的自定义。你知道吗？小程序和H5的CSS支持度差异很大，同样的flex布局在小程序里完美显示，到了H5就乱套了。最后我们不得不用uni.upx2px来统一尺寸单位，还写了一大堆条件编译代码。说真的，uni-app的条件编译语法/* #ifdef */简直就是救命稻草，虽然写起来有点丑。
还有个有趣的发现：uni-app的picker组件在iOS和Android上的表现截然不同。我们的租赁商品规格选择器在iOS上是底部弹出，在Android上却是从中间弹出。最后还是通过自定义组件解决的，这也让我意识到跨平台开发不是简单的”一次编写，处处运行”，而应该是”一次编写，适配调试”。
性能优化的那些坑
性能问题可能是最让人抓狂的部分了。我们的租赁系统有大量商品图片，在小程序端表现尚可，但到了H5端加载速度明显下降。后来通过uni-app的图片懒加载机制和CDN优化才解决。这里插句题外话，uni-app的image组件其实封装得很好，支持webp格式和懒加载，但很多开发者都不太会用这些高级特性。
数据库操作也是个性能瓶颈点。我们基于ThinkPHP开发的后台要同时处理小程序和H5的请求，结果发现分页查询在H5端特别慢。最后通过优化SQL查询和增加缓存层才搞定，这让我深刻体会到跨平台开发不只是前端的事情，后端也得跟着调整。
总之，UniApp跨平台开发就像走平衡木，要在代码复用和平台适配间找到平衡点。虽然都说”一套代码通吃所有平台”，但实际操作中，能达到80%的代码复用率就很不错了。不过话说回来，比起为每个平台单独开发一套代码，这已经省了不少事了，你说是不是？
评论(13)
UniApp确实省事，但兼容性问题真让人头疼😅
我们项目也是用了UniApp，H5端和小程序的样式问题搞了好几天
看到这个突然想起我们项目里picker组件的坑，安卓和iOS表现完全不一样
说得好，跨平台开发确实不是简单的复制粘贴，适配调试太重要了
性能优化那块深有同感，H5端加载速度慢得让人抓狂
楼主说的条件编译真是开发救星，虽然代码看起来乱但是能解决问题
新手求问：uni.request在不同平台下具体有哪些差异啊？
作为一个踩过无数坑的老司机表示，文章总结得太到位了👍
哈哈，’一次编写，适配调试’这个总结绝了，真实体验就是这样
我们项目也遇到图片加载问题，最后用了webp格式+CDN才解决
写条件编译代码的时候总觉得自己在写天书🤯
后端程序员表示看着前端同事调试不同平台的兼容性都觉得心疼
想问下楼主，ThinkPHP和UniApp配合开发体验怎么样？