一句话：uni‑app 是一个让你「写一次代码，跑遍所有网站」的跨端开发框架。

你写一套代码。它能帮你编译出：

• ✅ iOS App
• ✅ Android App
• ✅ 鸿蒙 App
• ✅ H5 网页
• ✅ 微信/支付宝/百度/抖音/QQ/快手/飞书/钉钉等各家小程序
• ✅ 快应用

痛点： 很多 H5 开发者误以为直接把 `

这篇文章。就是帮你把「旧知识」平滑迁移到「新世界」。

二、网络模型变了：从「服务端渲染」到「前后端分离」

传统 H5 是怎么工作的？

早期的网页开发，后端把数据直接塞进 HTML 里接下来整体返回给浏览器。使用者看到的就是一个「已经填好内容的网页」。这种模式叫做B/S 模式。

在传统 B/S 模式下后端使用 JSP、PHP、ASP.NET 等技术，把数据「渲染」到 HTML 中再返回。老实说，前端和后端代码是混在一起的。

现在 uni‑app 是怎么工作的？

痛点： 从 `window.location` 改为 `uni.request` 时经常出现“接口调用不到”的情况，因为请求地址没有加 `https://` 或者忘记在 `manifest.json` 中配置域名白名单。说起来，

• 前端： 负责画界面、处理交互。
• 后端： 只提供数据接口。
• 两者通过 HTTP 请求通信。

页面加载流程示意：

// 页面加载后
uni.request({
url这方面。'https://api.example.com/user/list',method: 'GET',success: => {
// res.data 即后端返回的 JSON 数据
this.userList = res.data;}
})，

代码层面怎么用？

// 在 uni-app 中发起网络请求
uni.request({
说到url，'https://api.example.com/user/list'。method: 'GET',success: => {
// res.data 就是后端返回的 JSON 数据
this.userList = res.data;}
})，

⚠️ 注意：

这里用的是 `uni.request`，不是以前熟悉的 `$.ajax`或 `fetch`。在 uni‑app 中，所有 API 都以 `uni.` 开头。这是为了跨网站兼容，后面会详细讲解。

三、文件类型变了：从 .html 到 .vue

你写的文件不再是 HTML了

什么是「编译器」和「运行时」？

四、文件内部结构变了：从「一栋楼」到「三个房间」

以前的 HTML 文件

页面内容

现在的 Vue 单文件组件