本课是前端走向全端开发的关键课程聚焦跨平台开发理念与 uni-app 框架入门。跨平台开发大幅降低企业开发成本是移动端开发主流趋势。uni-app 依托 Vue 生态成为国内最易上手、生态最完善的跨平台方案真正实现“一套代码发布多端”。课程从环境搭建、项目结构、页面配置到基础语法、路由跳转用单词案例贯穿全程让你快速掌握跨平台开发逻辑。uni-app 兼容 Vue3 语法学习成本极低却能开发小程序、App、H5 等全端产品。掌握本课标志着你从传统前端开发者迈向全端、全平台开发工程师具备企业级跨平台项目开发能力。一、课程学习目的理解跨平台开发的概念、优势与主流方案建立全端开发思维。掌握 uni-app 核心定位、开发原理理解“一套代码多端发布”的核心价值。学会使用 HBuilderX 快速创建 uni-app 项目熟悉项目结构与运行流程。掌握 uni-app 基础语法基于 Vue3、页面配置、组件使用、样式规范。能够编写基础页面实现多端微信小程序、H5、App运行与预览。为后续 uni-app 接口请求、路由、组件化、上线发布打下坚实基础。二、核心知识点讲解1. 跨平台开发概述跨平台开发指一套代码可同时运行在多个平台微信小程序、支付宝小程序、抖音小程序、H5、iOS/Android App。优势降低开发成本、提高效率、统一维护、快速迭代。主流框架uni-app、Taro、Flutter、React Native 等。uni-app 是国内使用量最高、生态最完善、基于 Vue 的跨平台框架。2. uni-app 核心认知uni-app 是 DCloud 推出的跨平台开发框架使用 Vue3/Vue2 语法开发编译后发布到多端。核心优势一套代码发布到 8 平台语法兼容 Vue前端上手极快原生渲染性能接近原生 App丰富插件市场与生态配套 HBuilderX 编辑器开箱即用3. 开发环境与工具HBuilderX官方开发编辑器必须安装微信开发者工具运行、预览小程序内置终端快速运行、发行项目4. uni-app 项目结构pages所有页面存放目录每个页面独立文件夹pages.json全局配置页面路由、导航栏、tabBarApp.vue全局入口文件样式、生命周期main.jsVue 入口文件static静态资源图片、图标5. 基础语法规范基于Vue3 组合式 API语法内置常用组件view、text、image、button、input 等样式支持 px、rpx响应式单位适配多端生命周期兼容 Vue 生命周期 页面生命周期三、示例程序示例1pages.json 路由配置{ pages: [ // 首页第一项为默认首页 { path: pages/index/index, style: { navigationBarTitleText: 单词库首页 } }, { path: pages/list/list, style: { navigationBarTitleText: 单词列表 } } ], globalStyle: { navigationBarTextStyle: white, navigationBarBackgroundColor: #42b983, backgroundColor: #f5f5f5 } }示例2uni-app 页面Vue3 语法!-- pages/index/index.vue -- template view classcontainer text classtitleuni-app 单词库/text button typeprimary clickgoList进入单词列表/button /view /template script setup // 路由跳转 const goList () { uni.navigateTo({ url: /pages/list/list }) } /script style scoped .container { padding: 40rpx; text-align: center; } .title { font-size: 36rpx; margin: 40rpx 0; display: block; } /style示例3列表渲染页面!-- pages/list/list.vue -- template view classlist view classitem v-foritem in wordList :keyitem.id text{{ item.en }} - {{ item.cn }}/text /view /view /template script setup import { ref } from vue const wordList ref([ { id: 1, en: apple, cn: 苹果 }, { id: 2, en: banana, cn: 香蕉 } ]) /script示例4uni-app 路由跳转 API// 跳转到新页面 uni.navigateTo({ url: /pages/list/list }) // 返回上一页 uni.navigateBack() // 关闭当前页面跳转到指定页 uni.redirectTo({ url: /pages/index/index })四、掌握技巧与方法uni-app 语法完全基于 Vue会 Vue 即可快速上手。多端适配优先使用rpx单位自动适配不同屏幕。页面必须在 pages.json 中注册否则无法访问。不要使用浏览器专属 DOM API使用 uni 内置 API如 uni.request、uni.navigateTo。运行项目先选择运行端微信小程序、H5、浏览器自动编译。调试使用 HBuilderX 控制台 对应端开发者工具。组件必须使用 uni-app 内置组件view、text 等不能用 div/span。五、课后作业基础作业安装 HBuilderX创建 Vue3 版 uni-app 项目。配置 pages.json创建 2 个页面首页、列表页。使用内置组件编写页面结构实现基础样式。进阶作业使用 Vue3 组合式 API 定义响应式单词数据v-for 渲染列表。使用 uni.navigateTo 实现页面跳转与返回。分别运行到H5 浏览器和微信小程序查看多端效果。实战作业开发 uni-app 跨平台单词管理小程序包含首页、单词列表页实现页面跳转、列表渲染、样式美化可同时在 H5、微信小程序运行代码规范、注释清晰、符合跨平台开发标准。上一课MongoDB 数据库实战 实战作业代码代码功能说明本实战作业基于 Node.js Mongoose MongoDB 实现完整单词管理全栈接口服务。项目通过 Mongoose 连接本地 MongoDB 数据库定义单词数据 Schema 与 Model实现数据持久化存储搭建 HTTP 服务器提供获取单词列表、新增单词、删除单词三大接口配置跨域响应头支持前端直接调用。所有接口返回标准 JSON 格式数据可配合前端实现增删查功能数据永久保存在数据库中不会丢失。代码结构清晰、注释完整覆盖 MongoDB 连接、增删改查、Node 接口开发等核心知识点完成全栈开发闭环。注意事项必须提前安装并启动 MongoDB 服务否则无法连接数据库。必须安装 mongoose 依赖npm i mongoose。数据库操作是异步任务必须使用 async/await。每次修改代码后需要重启服务node server.js。接口访问前确保端口 3000 未被占用。可使用 MongoDB Compass 可视化查看数据变化。必须配置跨域头否则前端无法请求接口。关闭服务使用 CtrlC避免端口占用。完整实战代码项目结构mongodb-word-api/ ├── server.js # 主服务文件 └── model └── wordModel.js # 数据模型model/wordModel.jsconst mongoose require(mongoose) // 连接数据库 mongoose.connect(mongodb://localhost:27017/wordDB) .then(() console.log(MongoDB 连接成功)) .catch(err console.log(连接失败, err)) // 定义 Schema const wordSchema new mongoose.Schema({ en: { type: String, required: true }, cn: { type: String, required: true }, createTime: { type: Date, default: Date.now } }) // 创建 Model const Word mongoose.model(Word, wordSchema) module.exports Wordserver.jsconst http require(http) const Word require(./model/wordModel) const server http.createServer(async (req, res) { // 跨域头 res.setHeader(Access-Control-Allow-Origin, *) res.setHeader(Content-Type, application/json;charsetutf-8) res.setHeader(Access-Control-Allow-Methods, GET,POST) // 获取单词列表 if (req.url /api/word/list req.method GET) { const list await Word.find().sort({ createTime: -1 }) res.end(JSON.stringify({ code: 200, data: list })) return } // 404 res.writeHead(404) res.end(JSON.stringify({ code: 404, msg: 接口不存在 })) }) // 启动服务 server.listen(3000, () { console.log(服务运行在 http://localhost:3000) })运行命令npm install mongoose node server.js作业验收标准MongoDB 服务启动正常项目连接数据库成功。接口可正常返回数据库中的单词数据。代码结构规范Schema 与 Model 定义正确。支持跨域前端可正常调用接口。数据持久化存储重启服务数据不丢失。