为什么需要跨平台开发
现实情况是临夏的企业客户往往不只做一个平台的小程序。微信小程序是必备的（因为微信渗透率太高了）抖音小程序也越来越重要（因为短视频和直播带货的爆发）有些客户还要求有支付宝小程序（覆盖中老年电商用户）甚至快手小程序。如果每个平台单独开发一套代码那工作量是成倍增长的——而且后续每次功能迭代都要改好几遍。跨平台开发框架的出现就是为了解决这个问题：写一套代码通过编译工具自动生成各个平台的小程序代码。理想情况下开发工作量减少40%到60%维护成本降低更多。
主流跨平台框架对比
目前市面上主流的小程序跨平台框架有三个：uni-app（DCloud出品基于Vue.js语法）是目前最流行的选择社区最活跃插件生态最丰富支持的端最多（微信支付宝抖音百度快手QQ小程序以及H5和APP）；Taro（京东出品基于React.js语法）适合有React技术基础的团队文档质量高京东系生态整合好；mpvue（基于Vue.js的小程序框架）较老但仍然可用不过已不再积极维护。对于临夏的绝大多数项目我推荐uni-app作为首选——原因如下：第一学习门槛低Vue.js语法简单易懂即使没有前端基础的人也能在一两周内掌握 basics；第二抖音适配做得好官方对抖音小程序的支持比较完善踩坑少；第三插件市场丰富大量现成的UI组件图表组件支付组件等拿来就用大大加速开发；第四社区活跃遇到问题搜一下基本都能找到答案。
uni-app开发实战流程
第一步环境安装：安装Node.js（v16以上）→ 安装HBuilderX（uni-app官方IDE也可以用VS Code）→ 创建新项目选择uni-app模板。第二步项目结构理解：pages目录存放所有页面（每个页面是一个.vue文件）static目录存放静态资源（图片字体等）App.vue是根组件main.js是入口文件pages.json配置页面路由和tabBarmanifest.json配置各平台特性。第三开发页面：每个.vue文件由三部分组成template（TTML结构类似HTML）script（JavaScript逻辑）style（TTSS样式类似CSS）。写法和Vue.js几乎一样。第四条件编译：这是跨平台开发的核心概念——用特定的注释语法让某段代码只在指定平台编译。如这段代码只在微信生效。通过条件编译可以处理各平台之间的差异（如API不同UI风格不同支付方式不同等）。第五编译运行：在HBuilderX中选择"运行到微信开发者工具"或"运行到抖音开发者工具"就会自动编译并在对应的模拟器中运行。第六打包发布：选择"发行"→ 选择目标平台→ 自动生成该平台的代码包→ 到对应平台提交审核。
各平台差异的处理策略
虽然跨平台框架屏蔽了大部分差异但各平台之间仍有一些不同之处需要特殊处理：API差异——如微信的wx.request和抖音的tt.request功能类似但参数细节不同（uni-app已经统一封装了大部分API）；UI规范差异——微信偏向简洁克制抖音偏向活泼鲜艳（可以通过条件编译加载不同的样式文件）；审核规则差异——抖音对营销内容的管控更严格（需要针对抖音调整文案和素材）；支付差异——微信支付和抖音支付的接入方式和参数不同（条件编译分别处理）；登录差异——微信授权登录和抖音授权登录的流程不同。处理这些差异的原则是：80%的通用代码写在一起20%的平台特有代码用条件编译隔离。不要为了追求100%代码复用而牺牲各平台的 native 体验——适度差异化是必要的。
一个真实的临夏项目案例
我们最近为临夏一家清真食品企业做了一个跨平台小程序项目需求包括：商品展示和搜索、分类筛选、购物车、在线支付（微信+抖音双支付）、订单管理、会员系统、优惠券功能、基础后台。技术选型：uni-app + uniCloud（serverless云开发）。开发周期：总计7周（比分别开发两个平台节省了约3周）。代码统计：总代码量约12000行其中通用代码约9500行（占79%）平台特有代码约2500行（其中微信专属800行抖音专属1700字）。上线后表现：微信小程序日活约350抖音小程序日活约120（通过直播间引流）合计日活470。两个月后的数据：微信端贡献了65%的订单（复购和老客户为主）抖音端贡献了35%的订单（新客户和冲动消费为主）。两端用户画像有明显差异印证了"双平台互补"的策略正确性。维护方面每次功能更新只需要改一次通用代码然后分别编译发布两端效率比以前高出太多。
踩坑经验分享
坑一：不要用太新的Vue 3 Composition API。虽然uni-app已经支持Vue 3但部分平台插件还不兼容建议稳妥起见用Vue 2的Options API。坑二：图片路径要用绝对路径或base64。相对路径在某些平台编译后会出现找不到图片的问题。坑三：CSS尽量不要用太复杂的选择器和过于新颖的属性。各平台的渲染引擎对CSS的支持程度不同保守写法最安全。坑四：及时更新uni-app框架版本。官方经常修复各平台的兼容性问题保持更新可以少踩很多坑。坑五：真机测试不能省。模拟器上跑通不代表真机没问题每个平台至少要在两款不同品牌的真机上测试一遍特别是中低端机型。