uni-app跨平台开发需分层验证而非线性学习:逻辑层统一复用,视图与API层依平台差异需条件编译;pages.json、manifest.json、static路径为三大首行配置关键;uni.request须按平台封装;uniCloud需关注冷启动、查询限制及权限规则;NVue与Vue页面路由不互通。

别指望“从零精通”——uni-app 的跨平台全栈开发不是线性通关游戏,而是一套需要分层验证、按需补缺的工程能力组合。真正能跑通多端(小程序/H5/App/云)的项目,核心不在“学完所有”,而在“清楚每层该信谁、不该信谁”。
先搞清 uni-app 不是“万能胶”,而是“条件编译器”
uni-app 本质是编译期框架:你写的 pages/index.vue,在构建时被分别翻译成微信小程序的 WXML+JS、H5 的 HTML+JS、App 的 WebView 或 NVue 原生控件。这意味着:
- 逻辑层(Vue 语法、
data、methods、onLoad等)高度统一,可复用 - 视图层(
<view></view>、<text></text>)只是映射标签,渲染行为由目标平台决定,比如<textarea></textarea>在 H5 和小程序中光标位置、键盘弹起逻辑完全不同 - API 层(
uni.request、uni.getSystemInfoSync)做了封装,但底层调用的是wx.request、fetch或原生模块,失败原因和错误码各不相同 - 条件编译(
// #ifdef MP-WEIXIN)不是“锦上添花”,而是上线前必须写进业务逻辑的保命开关
真正在意的三个“第一行代码”场景
新手常卡在“为什么 H5 能跑,小程序白屏?”——问题往往出在最开始的三类配置上:
-
pages.json 必须配对注册:新增页面后,不手动在
pages.json的"pages"数组里加路径,该页面在任何平台都不可访问,连编译警告都不会有 -
manifest.json 的 AppID 是平台钥匙:微信小程序要填
mp-weixin.appid,H5 要确认h5.domain是否允许当前调试域名,App 打包则依赖name和appid生成唯一包名 -
static 目录下的资源路径不走 Vue-loader:图片用
static/logo.png可以,但写成./static/logo.png(相对路径)在小程序里会 404,因为小程序只认根路径引用
接口层别迷信 uni.request,得看平台底线
uni.request 封装了基础请求,但实际项目中很快会撞墙:
- 微信小程序要求
request合法域名必须在后台配置,且只支持 HTTPS;H5 则可能因 CORS 被浏览器拦截,此时得靠代理或后端加 header - App 端(尤其 iOS)对证书校验更严,自签名证书直接失败,
uni.request不提供绕过选项,得换原生插件或改服务端 - 上传文件时,
uni.uploadFile在 H5 返回File对象,在小程序返回tempFilePath,参数字段名(如filePathvsfilePath)和回调结构都不一致 - 建议做法:封装一层
api/request.js,内部用if (process.env.UNI_PLATFORM === 'mp-weixin')做分支,而不是硬塞一个“通用函数”
云开发不是“免运维”,而是“换运维对象”
用 uniCloud 确实省掉服务器部署,但代价是把运维压力转移到云函数生命周期和数据库权限模型上:
- 云函数冷启动延迟明显,高频调用(如列表下拉刷新)必须加本地缓存或预热,不能默认“点就快”
-
uniCloud.database()的where查询在 H5 端受限(仅支持简单条件),复杂查询必须走云函数,否则直接报错 - 数据库权限规则(
permission)不是摆设:没配{"read":true,"write":"auth"},前端哪怕用uniCloud.callFunction也拿不到数据 - 注意
uniCloud分为阿里云、腾讯云、DCloud 自建三种,getProvider返回的 provider 名称(如aliyun)会影响后续 API 调用方式,不能混用
最常被忽略的一点:NVue(App 原生渲染)和 Vue 页面不能混用路由跳转——uni.navigateTo 无法从 Vue 页面跳到 .nvue 文件,反之亦然。这个限制不在文档首页,但在做高性能长列表或手势动画时,突然卡死,才想起来翻源码注释。


















