HBuilderX uni-app 跨端开发入门环境配置、三端运行与发行路径全流程uni-app 的卖点是「一套代码三端跑」但新手最容易死在环境上插件没装全、小程序端连不通、编译卡住不动。这套教程资源HBuilderX 为数字天堂闭源软件本资源不分发本体官方站 dcloud.io 下载正式版配上环境自检清单把从安装到三端运行的坑全部提前标出。一、版本选择与必装插件官网下载页选正式版Alpha 是尝鲜通道慎用Windows 用 zip 解压版或 exe 安装版都行。首次启动后先装两个插件uni-app(Vue3) 编译插件与scss/sass 编译——uni 项目缺这两样编译直接报错。技术栈选 Vue3 JavaScript教学与课设场景没必要上 TS。二、三端交付路径端运行方式要点H5运行到浏览器 Chrome同码直跑条件编译分端微信小程序运行到微信开发者工具首次要指定工具安装路径App需本地 Android 环境新手建议先用前两端交付小程序端联调有个前置微信开发者工具的设置里要开「服务端口」否则 HBuilderX 唤不起它manifest.json → 微信小程序配置里填 AppID测试号可空。页面路由在 pages.json 里声明{pages:[{path:pages/index/index,style:{navigationBarTitleText:首页}}],tabBar:{list:[{pagePath:pages/index/index,text:首页}]}}新增页面 pages 数组加一项再补页面文件tabBar 底栏也在同一文件配——这份声明式路由与微信原生 app.json 同构两套教程可以对照着看。三、自检清单与高频报错环境卡住按清单查编译卡在某个百分比 → 删unpackage缓存重编十有八九好scss 报错 → 插件没装小程序白屏 → pages.json 首页路径写错。发行路径记两个H5走「发行 → 网站-PC Web 或手机 H5」产物在 unpackage/dist/build/web小程序走「发行 → 小程序-微信」产物用微信开发者工具打开上传。App 端要本地 Android 环境课设和作业用 H5/小程序两端交付完全够。四、和微信原生开发的关系uni-app 项目里 pages 四件套的职责与微信原生一一对应wxml/wxss/js/json 换成 vue 单文件写过原生 HelloWorld 再上 uni-app 几乎零成本反过来先学 uni-app 的遇到原生问题再回看 app.json 那套也顺。两套教程配套食用课设里「小程序 H5 双端交付」的需求一天能搭完骨架。 本文对应的教程与环境自检清单已整理上传点击查看资源包
