uni-app 跨端开发实战：一套代码搞定小程序、H5 和平板-轻识

在实际项目中用 uni-app 交付过微信小程序、H5 移动端、Android 平板多个终端，踩过不少坑，整理一些关键实战经验。

一、跨端差异的统一处理

最大的痛点是不同终端的 API 和交互差异——登录、支付、分享、路由返回等，在小程序 / H5 / App 上表现各不相同。我们封装了一个适配层：

// utils/platform-adaptor.ts

// 判断运行环境

export const isH5 = process.env.UNI_PLATFORM === 'h5'

export const isMpWeixin = process.env.UNI_PLATFORM === 'mp-weixin'

export const isApp = process.env.UNI_PLATFORM === 'app'



// 统一登录适配

export async function unifiedLogin() {

  if (isMpWeixin) {

    const { code } = await uni.login({ provider: 'weixin' })

    return await api.wxLogin(code)

  }

  if (isH5) {

    return await api.wechatOAuth()  // 微信网页授权

  }

  if (isApp) {

    return await api.phoneLogin()

  }

}

业务代码里只调用 unifiedLogin()，不用关心底层是哪种登录方式。

二、小程序性能优化：分包 + 虚拟列表

主包超过 2MB 就无法上传，必须拆分：

// pages.json

{

  "subPackages": [

    { "root": "pages/inventory", "pages": ["list", "detail", "check"] },

    { "root": "pages/report",   "pages": ["dashboard", "trend"]   },

    { "root": "pages/member",   "pages": ["center", "points"]     }

  ],

  "preloadRule": {

    "pages/index/index": { "network": "all", "packages": ["pages/member"] }

  }

}

对于长列表页面（商品列表、用户列表等），用虚拟滚动避免一次性渲染过多节点：

// composables/useVirtualList.ts

import { ref, computed } from 'vue'



export function useVirtualList(itemHeight = 60, visibleCount = 10) {

  const scrollTop = ref(0)

  const startIndex = computed(() => Math.floor(scrollTop.value / itemHeight))

  const visibleData = computed(() => {

    return allData.value.slice(startIndex.value, startIndex.value + visibleCount)

  })

  const totalHeight = computed(() => allData.value.length * itemHeight)

  return { scrollTop, visibleData, totalHeight }

}

三、离线缓存方案（平板端）

平板端经常在没有网络的场景使用（比如销售人员外出拜访），需要离线方案。我们用 uni-app 的 Storage API 做了本地数据缓存：

首次进入时从接口拉全量数据，存入本地 Storage
再次进入时先展示本地缓存，后台静默拉更新数据
操作记录暂存本地，联网后批量同步

// utils/offline-cache.ts

const CACHE_KEY = 'product_data'

const CACHE_VERSION_KEY = 'product_version'



export async function getProductData() {

  const cached = uni.getStorageSync(CACHE_KEY)

  if (cached) return cached  // 先返回缓存，保证秒开

  const res = await api.fetchProducts()

  uni.setStorageSync(CACHE_KEY, res.data)

  uni.setStorageSync(CACHE_VERSION_KEY, Date.now())

  return res.data

}

四、跨端复用率

我们项目里小程序、H5、平板三端业务代码复用率约 85%，差异主要集中在：登录鉴权、支付、地图组件、文件上传（选择图片/拍照的逻辑不同）、路由返回按钮（小程序有左上角原生返回，H5 没有）。建议在项目初期就规划好适配层，后期改动成本会小很多。

小结

封装统一适配层，隔离平台差异
小程序走分包 + 预加载 + 虚拟滚动
平板端走离线缓存方案
三端复用率做到 85% 以上，比分别开发节省约一半工作量

如果你也在用 uni-app 做多端项目，欢迎交流踩坑经验。