企业官网建设流程全解析

HBuilderX + uni-app 跨端开发入门：环境配置、三端运行与发行路径全流程

uni-app 的卖点是「一套代码三端跑」，但新手最容易死在环境上：插件没装全、小程序端连不通、编译卡住不动。这套教程资源（HBuilderX 为数字天堂闭源软件，本资源不分发本体，官方站 dcloud.io 下载正式版）配上环境自检清单，把从安装到三端运行的坑全部提前标出。

一、版本选择与必装插件

官网下载页选正式版（Alpha 是尝鲜通道，慎用），Windows 用 zip 解压版或 exe 安装版都行。首次启动后先装两个插件：uni-app(Vue3) 编译插件与scss/sass 编译——uni 项目缺这两样，编译直接报错。技术栈选 Vue3 + JavaScript（教学与课设场景没必要上 TS）。

二、三端交付路径

小程序端联调有个前置：微信开发者工具的设置里要开「服务端口」，否则 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 双端交付」的需求一天能搭完骨架。

📦 本文对应的教程与环境自检清单已整理上传：点击查看资源包