★ FEATURED ARTICLE 做前端这些年我越来越发现“多端”这两个字就是个巨大的成本黑洞。需求写一遍、UI调一遍、接口联调一遍好不容易小程序上线了App端又要重新适配。所以我们团队很早就在找一个能用一套代码同时输出微信小程序、App和H5的方案最后落在uni-app上一直用到现在。这篇东西不打算写成官方文档式的教学更多是我自己在用uni-app做前端项目时的真实记录哪些地方真的香哪些地方必须绕开走以及那些高频出现、一搜一大把却总讲不透的问题——包括manifest配置、生命周期、自定义分享、扫码、视频、地图、支付、打包甚至会聊到面试时别人会怎么问你。不管是刚准备用uni-app接项目的初学者还是已经被线上bug折磨了一段时间的工程师应该都能从里面找到点能直接用的东西。1. 为什么是uni-app它解决的是“多端产出”问题1.1 uni-app的跨端原理不是梦想是编译很多刚接触的人会误以为uni-app是套壳WebView页面全是H5渲染的其实不是。它的核心思路是“编译期魔法”你在工程里写一套Vue风格的代码编译到微信小程序时会把模板转成WXML、样式转成WXSS、脚本转成小程序JS编译到App端时又能通过内置的vue文件编译器和原生渲染引擎跑起来编译到H5时就是一套标准Vue应用。所以你在绝大多数场景下写的是业务逻辑而不是某个端的专属代码。这个模式最大的好处是页面的结构、样式、交互逻辑可以复用同时又保留了各端的能力入口。微信小程序里要用的wx.request在uni-app里统一成uni.requestApp端的原生模块也通过plus API或者uni API暴露给你。它不是一个运行时容器而是一套“代码转换器运行时适配层”。理解了这一点你就不会在“为什么H5端表现和小程序不一样”这种问题上钻牛角尖了——因为编译目标不同平台行为当然不同。1.2 条件编译同一套代码关键时刻“分道扬镳”跨端方案最怕的是需求出现差异比如“App端要接入原生扫码小程序端直接用微信扫一扫”。uni-app没有用复杂的插件体系来解决这种问题而是给了你一个非常朴素但极其好用的武器条件编译。// 只在微信小程序里执行的逻辑 // #ifdef MP-WEIXIN uni.scanCode({ success(res) { console.log(res.result) } }) // #endif // 只在App端执行的逻辑 // #ifdef APP-PLUS plus.barcode.scan({ success: function(result) { console.log(result) } }) // #endif这个写法在注释里生效编译时会自动剔除或保留对应代码块。我在实际项目里就用它解决了“H5端跳小程序”“App端用原生分享”“小程序端用微信支付”这类需求。条件编译不只是JS能用样式和模板节点同样支持比如某个按钮只在H5端显示套一个!-- #ifdef H5 --就能搞定。这是uni-app项目里绕不开的第一个核心知识点建议刚上手的人优先掌握。1.3 uni-app适合什么样的项目以我踩过的坑来看uni-app最适合的是业务逻辑重、页面交互中等、需要快速覆盖多端的应用典型的就是电商、内容社区、工具类App、后台管理系统的移动端。它不适合做高频实时渲染的游戏、特别复杂的自定义绘制类应用以及严重依赖某个端深层原生能力的项目。换句话说如果你的核心价值在业务建模和数据流转上uni-app能帮你省掉至少三分之一的人力如果你的核心竞争力在极致的原生体验上那还是老实走原生开发吧。2. 工程初始化与manifest配置先把地基打好2.1 用HBuilderX还是CLI取决于你的开发习惯uni-app项目有两种创建方式我两种都长期用过差别需要说清楚。HBuilderX方式安装HBuilderX之后直接新建项目内置了uni-app的编译工具链运行、打包都在IDE里点点点对新手极其友好。缺点是如果团队里有人用WebStorm、有人用VS CodeHBuilderX的项目结构会让习惯了现代前端工作流的人不太舒服而且依赖管理不如CLI项目清爽。CLI方式vue create -p dcloudio/uni-preset-vue my-project或者用npx degit dcloudio/uni-preset-vue#vite my-project初始化然后用npm run dev:mp-weixin、npm run dev:h5、npm run dev:app启动对应端。这种方式能正常使用Vite、ESLint、Prettier等工具链也能接进CI/CD。我们团队后来统一切到了CLI VS Code方案代码规范靠ESLint约束哪天要加单元测试也不别扭。还有一个容易踩的坑如果你用了Yarn的PnP模式就是“pnp启动项目”那个概念在uni-app的CLI工程里经常因为依赖链接问题启动失败。这不是uni-app本身的错而是Vite和PnP的兼容性有限。我建议这类工程老老实实退回node-modules模式别为了那点磁盘空间给自己找麻烦。2.2 manifest.json里的关键设置配错一个后患无穷manifest.json是uni-app的全局配置文件很多人的理解停留在“改个App名字和图标”其实这里有非常多的门道。应用名称和logo安卓市场审核很看重图标和名称的一致性尽量不要出现“ICON带HBuilderX默认样式”的问题。AppIDHBuilderX创建的项目会自动生成但如果你要做云打包需要登录DCloud账号并关联到真实AppId不然后续推送、统计、升级功能都受影响。权限配置App端打包后会写入安卓权限列表千万别图省事在manifest里把相机、定位、存储权限全勾上。审核被拒和用户隐私投诉很多时候就是因为“你一个计算器应用申请读取联系人干嘛”。2.3 多环境多域名配置解决“H5要指向2个域名”这类需求热词里有个“uniapp封装h5如何指向2个域名”这个问题我在项目里是真的遇到过。特点是发布阶段H5可能要同时跑在不同域名下比如客户端要访问app.example.com运营后台要访问admin.example.com而接口域名还要区分测试、预发布、生产。我的做法是用环境变量打一套配置# .env.development VITE_API_BASE_URLhttps://dev-api.example.com VITE_H5_BASE_URLhttps://dev-app.example.com # .env.production VITE_API_BASE_URLhttps://api.example.com VITE_H5_BASE_URLhttps://app.example.com然后在请求封装里读取const API_BASE_URL import.meta.env.VITE_API_BASE_URLH5端的动态域名需求本质上就是让打包出来的页面能从当前URL里解析出资源路径所以manifest.json里h5.router.base的设置就很关键。如果你的H5部署在子目录比如https://example.com/app/base就要设成/app/如果直接用独立域名就设成/。这些配置没搞对最常见的症状就是白屏、静态资源404、路由刷新后丢失。3. 生命周期与页面路由搞清楚代码什么时候跑3.1 三套生命周期对照别把顺序搞混uni-app里有三套生命周期容易让人晕头转向应用生命周期、页面生命周期、组件生命周期。我自己刚用的时候就在一个页面里同时写了onLoad和mounted结果发现执行顺序完全不是我想的那样。层级生命周期触发时机使用建议应用onLaunch应用初始化完成做全局统计、登录态恢复应用onShow应用从后台进入前台刷新token、拉取未读消息页面onLoad页面第一次加载接收页面间参数只触发一次页面onShow页面每次显示每次进入都会触发适合刷新数据页面onReady页面渲染完成开始操作canvas、节点信息页面onHide页面被切换隐藏暂停播放、保存草稿页面onUnload页面销毁清理定时器、取消订阅组件created/mountedVue组件生命周期组件内部逻辑不依赖页面栈最经典的坑很多人把接口请求写在onLoad里从A页面进入B页面再返回A页面结果发现数据不刷新。原因就是返回时页面走的是onShow而onLoad不会重新触发。正确做法是初次请求放onLoad或onReady每次展示需要更新的数据请求放onShow再配合一个firstLoaded标记位防止初次加载时重复请求。3.2 页面间通信与参数传递几种方式对比uni.navigateTo传参最直观参数直接拼在URL后面。但参数里如果有对象千万别直接JSON.stringify塞进去URL长度限制会让你在线上遇到莫名其妙的跳转失败。我一般用uni.setStorageSync配合uni.$emit/uni.$on这类全局事件来做复杂参数传递简单可靠。// 发送方 uni.navigateTo({ url: /pages/detail/detail?id123name encodeURIComponent(测试) }) // 接收方 onLoad(options) { const id options.id const name decodeURIComponent(options.name || ) }组件之间的父子通信uni-app和Vue保持一致父传子用props子传父用$emit跨层级的用provide/inject。如果项目复杂度到了需要全局状态管理Vue3版本直接配Pinia就行Vue2版本上Vuex没有什么特殊之处。3.3 tabBar切换闪烁一个被低估的体验问题热词里有一个“切换页面时底部导航闪烁”看着小众实际上很影响体验。我用过的项目中出现过两种闪烁一种是切换tab瞬间白屏或闪一下另一种是tabBar图标先消失再显示。前者的根因通常是页面在onShow里做了太多同步渲染或者页面根节点有大量图片且没有给宽高导致页面渲染时间过长。优化方向是把非首屏内容拆成异步渲染或者给图片预留指定宽高。后者的根因多数是tabBar页面被重新创建了检查一下你写页面时是不是在onLoad里做了一大堆同步操作把onLoad的活儿往前挪到onShow之后判断或者用uni.reLaunch/uni.switchTab代替冗余的页面跳转逻辑能看到明显改善。4. 高频功能场景实录从样式穿透到支付回调4.1 组件样式穿透与轮播图“同时显示多个图片”父子组件的样式隔离是Vue的特性但在uni-app里使用第三方UI库或者封装自己的组件时经常会遇到“我要改组件内部一个元素的样式”而改不动的情况。这时候需要样式穿透。Vue3版本推荐用:deep().parent-class :deep(.child-class) { background: red; }Vue2版本可以用/deep/或者::v-deep。有一点别忽略小程序端的样式穿透有些场景还要配合page选择器或者把它写到App.vue的全局样式里特别是只改一行颜色、想省点打包体积的时候直接全局处理可能更快。轮播图“同时显示多个小图标”的需求主要是这套配置swiper classbanner circular autoplay interval3000 previous-margin20rpx next-margin20rpx swiper-item v-foritem in list :keyitem.id image :srcitem.img modeaspectFill classbanner-item / /swiper-item /swiper.banner { width: 100%; height: 300rpx; } .banner-item { width: 80%; height: 280rpx; border-radius: 16rpx; }它的核心不是某个神奇的API而是previous-margin和next-margin让出两侧空间同时把swiper-item内的图片宽度设为80%这样两侧的图就会露出来形成“中间大、两边小”的卡片式轮播效果。新手最爱踩的坑是直接把盒子背景色改了以为是图片在显示实际上两侧露出来的区域是透明或背景色图片并没有真正显示出来。4.2 自定义分享好友小程序端的分享不是只写个按钮“uniapp自定义分享好友”这个需求我在微信小程序端做过很多次。分享有两种入口一个是右上角菜单一个是页面里的自定义按钮。右上角菜单的分享页面只要onShareAppMessage里返回对象即可onShareAppMessage() { return { title: 邀请你一起参与, path: /pages/index/index?fromshare, imageUrl: https://example.com/share-cover.png } }自定义按钮要配合button组件button open-typeshare分享给好友/button然后同样返回onShareAppMessage最好通过res.from button判断来源从而决定标题和路径是否要区分。这里分享路径有个细节路径必须带完整的小程序页面路径不能只给一个不带后缀的字符串否则对方点开就是首页。另外分享图imageUrl建议用5:4的图过大会被微信裁切。App端的自定义分享就没这么简单了微信小程序和App的分享能力完全是两套实现。App端要么用uni.share搭配系统分享面板要么在Android/iOS端集成SDK。热词里搜“自定义分享好友”的人大概率是卡在小程序分享或App端分享SDK上看到这里你应该有个大致方向了。4.3 扫码不清晰与扫不出来三个方向排查扫码不清晰是特别真实的痛点尤其是安卓机的摄像头调用。搜“uniapp扫码不清晰”的人多半用的是uni.scanCode。uni.scanCode在部分安卓机型上会唤起系统相机画面清晰度其实由系统相机决定但有几个不稳定的因素一是摄像头聚焦慢二是识别区域没有对准条码三是相机预览分辨率太低。我的经验是做三种处理优先用uni.scanCode的scanType参数限定只扫二维码或条码别让相机做无谓的识别。对于要求高的场景考虑使用插件市场里的自定义扫码页面插件它们很多时候会用原生相机SDK清晰度确实比默认扫一扫高。提示用户“光线充足、对准条码、保持稳定”并且把识别错误和超时错误分开提示别一键弹窗“失败”用户根本不知道该怎么调整。如果你在微信小程序里扫的是那种印刷质量不好、很小的码还有一个新思路用camera组件实现扫码把frame-size调大、选择后置摄像头并且设置device-positionback效果会比默认扫一扫好。4.4 视频自动播放、预加载与商品展示电商类项目里商品展示视频几乎成了标配。uni-app的video组件用法和HTML5视频很像但有几个平台限制必须提前知道。video classgoods-video :srcvideoUrl :autoplayautoplay posterhttps://example.com/poster.jpg :controlstrue playsinline /videoiOS H5端自动播放Safari默认不允许带声音的视频自动播放必须静音播放或者等用户交互之后才能开启声音。如果你想让商品视频进入页面就自动播放要么默认muted要么通过uni.setInnerAudioOption之类的方式拿到用户交互后再播。小程序端自动播放微信小程序的video组件支持autoplay但部分低端机进入页面立刻自动播放会造成卡顿建议在onReady里延迟100~300ms再设置autoplay或者用v-if延迟挂载。预加载H5端可以给video设置preloadauto但移动端网络环境下会占用大量带宽。小程序端不直接支持preload替代方案是用一个隐藏组件只加载poster等用户点击时再切换真实视频源体验上接近预加载效果。4.5 语音输入、富文本与表格横向展示语音输入在工具类App里很常见但要免费方案最省事的是用插件市场的免费语音转文字插件。原理并不神秘先录音再把录音文件交给识别API最后把识别结果回填到输入框。常见的坑是录音格式iOS和安卓不一致识别服务对音频格式有要求解决方案是在录音完成时统一转成M4A或WAV格式。富文本解析是另一个高频问题。接口返回的HTML富文本包含图片、字体、表格时小程序端不能直接用v-html渲染这时候就需要mp-html这类组件。mp-html能解析大部分HTML图片点击预览、表格横向滚动、链接跳转都给你包装好了。你在使用的时候直接把富文本内容传给组件图像懒加载、视频适配基本上开箱即用省了一大堆正则清洗代码。表格横向展示的需求本质是让表格在大屏适配之外还能在手机上左右滑动。实现方式是给表格容器用scroll-view设置横向滚动表格内部给一个min-widthscroll-view scroll-x classtable-wrap view classtable :style{ minWidth: tableMinWidth px } !-- 表格内容 -- /view /scroll-view这里最容易出现的坑是min-width设置过大后表格被撑开但滚动区域还是容器宽度解决的办法是给scroll-view内部再加一层display: inline-block或flex包裹层确保滚动宽度由内容决定。4.6 地图接入与H5跳转小程序两个典型的端能力魔法地图是uni-app里跨端差异最明显的功能之一。内置map组件在App端、小程序端和H5端都能显示基本地图但如果你要的是叠加自定义覆盖物、实时轨迹、行政区划边界这类高级能力就必须引入各家地图SDK。热词里的“百度地图”“天地图”都属于这个范畴。我实际用下来的建议是如果目标端同时包含微信小程序和H5优先选用各端都支持的第三方方案。例如App端用原生地图SDK插件H5端用百度地图JS API或天地图JS API小程序端用微信小程序JSAPI。三种端的地图初始化方式不一样但统一封装一层“地图服务”接口对外只暴露initMap、addMarker、drawPolyline这几个方法内部再用条件编译区分实现这样可以有效避免业务层被各端SDK绑架。H5跳转小程序则是一个用户场景很明确的需求用户正在浏览公众号文章或H5页面你希望通过一个按钮让他直接跳转到你的微信小程序。这个能力靠的是微信开放标签wx-open-launch-weapp并且只能在微信内置浏览器里使用普通浏览器里打开H5是不会显示这个标签的。你需要在页面里引入微信JS-SDK配置好公众号的appid和签名然后像下面这样声明wx-open-launch-weapp usernamegh_xxxxxxxx path/pages/index/index script typetext/wxtag-template style.btn { display: block; margin: 0 auto; padding: 12px 24px; background: #07c160; color: #fff; border-radius: 8px; }/style div classbtn打开小程序/div /script /wx-open-launch-weapp这里最容易出问题的是签名配置。签名不对标签直接不显示还有就是要确认你的公众号已经绑定了目标小程序否则即便标签渲染出来点击也会提示“无法打开”。这个功能在uni-app的H5端没有内置封装需要自己操作DOM和SDK但整体难度可控。4.7 数据存储与防录屏给业务加一层底uni.setStorageSync做本地缓存大家都熟但如果你在App端有大量结构化的离线数据需要查询统计plus.sqlite可以提供真正的SQLite能力。uni-app在App端保留了对5 API的访问能力SQLite的建表、插入、查询都有对应方法。不过我必须提醒一句能不用本地数据库就别用。移动端本地数据一多清理、版本升级、备份迁移都是麻烦事很多项目最后反而是倒腾数据把自己坑了。防录屏需求通常来自付费内容、商业机密预览这类场景。uni-app层面能做的事有限我实际采用过的组合是页面增加动态水印层把用户ID或手机号的一部分做成半透明水印叠在内容上。监听App前后台切换切到后台时主动遮挡敏感内容。Android端的截屏检测需要原生插件支持iOS端也有对应的原生能力这类需求一般交给原生插件市场里的成熟方案。水印方案虽然不能完全阻止录屏但一旦发生泄漏至少能通过水印溯源对很多业务来说已经足够。5. 调试、构建与打包把项目真正推向用户5.1 调试工具链微信开发者工具、VS Code与HBuilderX怎么配合调试uni-app项目核心是理解“编译产物和源码的关系”。当你用CLI方式开发时npm run dev:mp-weixin会持续监听源码变化并把编译结果输出到dist/dev/mp-weixin目录。这时候你用微信开发者工具“导入项目”选择这个目录就能像调试原生小程序一样看控制台、看Network、样式的实时修改。不要直接拿源码目录去微信开发者工具里打开那样什么都跑不起来。这是“uniapp项目怎样在微信开发工具打开”这个话题的完整答案。用VS Code开发时我会把HBuilderX只当作备用工具不让它在后台抢端口。因为HBuilderX和CLI同时运行同一个项目时可能两个进程会争抢编译产物导致页面热更新异常。选定一个工具链就一路走到底换着用只会给自己添乱。5.2 H5端疑难杂症network unavailable、canvas白图、ECharts导出启动uni-app的H5开发服务器后如果浏览器Network面板显示network: unavailable多半不是代码问题而是开发服务器没就绪或端口被占用了。CLI项目里先看终端输出如果显示已经监听localhost:5173那直接用浏览器访问这个地址如果端口被占用改一下vite.config.js里的server.port就好。还有一种情况是你用了代理转发接口但代理配置没生效请求全部打到了当前页面地址上Network才会显示那种异常状态。Canvas白图问题比较高级。热词里“ios safari 使用 uniapp canvas 队列时导出白图”描述的就是一个经典场景你在iOS Safari里用canvas画了一堆内容然后立刻调用uni.canvasToTempFilePath或canvas.toDataURL导出图片结果导出来是空白。原因是Canvas绘制是异步队列执行的你在绘制指令刚入队就去读取导出自然拿不到像素数据。解决思路是等所有绘制指令执行完再导出常见做法是把导出操作放到draw回调里或者用setTimeout强制延后更稳妥的是用canvas的requestAnimationFrame调度导出。我在实际项目里还发现iOS Safari对Canvas的大小非常敏感宽高超出一定范围直接白图需要按设备DPR缩放后再导出。ECharts图片导出也常被问核心思路其实和原生Canvas一致等图表渲染完成后调用getDataURL再转给uni.downloadFile或保存相册。如果你用的是lime-echart这类uni-app专用组件它内部已经把echarts实例暴露出来你只需要调用实例方法即可。5.3 打包APK与上架安卓市场从“能跑”到“能发”把uni-app项目打包成APK最省力的方式是用HBuilderX的云打包。流程是先在manifest里配置好App名称、图标、启动图、权限然后菜单栏找到“发行” - “原生App云打包”选择Android包名和证书。云打包会请求DCloud的云端服务器把uni-app代码和原生壳工程合并生成APK或AAB。免费版打包经常排队着急发布可以直接用付费通道或者自己配离线打包环境。离线打包是用Android Studio集成uni-app离线SDK适用于那些需要自己写原生插件、深度定制App壳的团队。首次配置离线SDK有一定门槛但好在官方有比较完整的文档。需要注意包名、应用签名、版本号这些信息在云打包和离线打包里要保持一致否则后面上架各大安卓市场的时候签名校验会把你折磨死。上架安卓应用市场前有几个必须处理的项隐私政策弹窗、用户协议、应用备案、加固。尤其是2023年后国内安卓应用市场普遍要求App备案不做备案连上架入口都找不到。各市场的审核规则大同小异但小米、华为、OPPO、vivo、应用宝对敏感权限和隐私政策的核查都在变严与其被驳回再改不如打包前就把权限最小化把隐私政策链接放到应用内的“设置-关于”页面里。6. 面试与自查常见考点和避坑速查6.1 uni-app面试常问的几个问题在简历里写“精通uni-app”之前先问问自己这几个问题能不能不打草稿地讲清楚。uni-app跨端的实现原理是什么很多候选人只会说“一套代码多端运行”面试官更想听的是编译目标和运行时适配条件编译以及各端底层的差异。页面间传参有哪几种方式优缺点是什么URL传参、全局事件、Storage、Vuex/Pinia至少能各举一个真实场景。onLoad和onShow的区别是什么高频考点也是初学者最容易翻车的点。小程序端如何实现自定义分享需要讲到onShareAppMessage、open-typeshare、分享图尺寸和路径规范。uni-app里如何集成第三方地图SDK至少说清楚App端、小程序端、H5端三套方案的差异以及为什么要做统一封装。为什么打包后H5端请求报404这个问题背后是h5.router.base和服务器路由配置的配合问题。如何解决iOS Safari下Canvas导出白图原理是绘制异步队列解决方式可以讲draw回调、延迟导出、DPR缩放。这些问题不背答案而是要能结合自己做过的项目讲出踩坑过程。面试官要的不是你会背API而是你有没有真的在线上环境里被坑过、能不能讲清楚原因。6.2 常见问题速查直接抄作业问题大概率原因处理建议自定组件样式改不动Vue样式隔离使用:deep()穿透或全局样式覆盖tabBar切换页面闪烁onShow中同步渲染过重异步渲染首屏图片给定宽高分享出去的页面打开是首页分享path路径不完整写全小程序页面路径带上参数扫码模糊相机聚焦/预览分辨率低用自定义扫码页或限定scanType视频在iOS H5不能自动播放浏览器自动播放策略静音播放或等用户交互后播放H5端Network显示unavailable端口占用或代理未生效检查终端监听端口和vite proxycanvas导出白图绘制队列未完成就导出draw回调后再导出或延迟打包APK后地图不显示缺少对应App模块权限manifest勾选Maps模块并重新云打包这份表格是我在实际项目中沉淀的一部分遇到类似问题直接对照着排查能省不少搜答案的时间。最后再分享一个我自己的小习惯。我现在用uni-app开发项目不管需求多急都会先把manifest.json、pages.json、条件编译这几样“地基”检查一遍。很多线上问题表面上是某个页面报错扒到底其实是全局配置埋了雷。把它当成盖房子时的钢筋水泥而不是装修材料后面所有页面都能站得稳。做前端没有银弹uni-app也不是万能的。但它确实适合那些业务复杂、多端并行、需要快速迭代的团队。理解了它编译和适配的底层逻辑踩坑时能顺着原理往上找原因而不是靠“百度”和“重启”硬扛这才是这个工具真正给你的成长。
阅读完成 · 觉得有帮助？
