JavaScript基础课程二十七、跨平台开发概述与 uni-app 入门

本课是前端走向全端开发的关键课程，聚焦跨平台开发理念与 uni-app 框架入门。跨平台开发大幅降低企业开发成本，是移动端开发主流趋势。uni-app 依托 Vue 生态，成为国内最易上手、生态最完善的跨平台方案，真正实现"一套代码发布多端"。课程从环境搭建、项目结构、页面配置到基础语法、路由跳转，用单词案例贯穿全程，让你快速掌握跨平台开发逻辑。uni-app 兼容 Vue3 语法，学习成本极低，却能开发小程序、App、H5 等全端产品。掌握本课，标志着你从传统前端开发者，迈向全端、全平台开发工程师，具备企业级跨平台项目开发能力。

一、课程学习目的

1. 理解跨平台开发的概念、优势与主流方案，建立全端开发思维。

2. 掌握 uni-app 核心定位、开发原理，理解"一套代码，多端发布"的核心价值。

3. 学会使用 HBuilderX 快速创建 uni-app 项目，熟悉项目结构与运行流程。

4. 掌握 uni-app 基础语法（基于 Vue3）、页面配置、组件使用、样式规范。

5. 能够编写基础页面，实现多端（微信小程序、H5、App）运行与预览。

6. 为后续 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：全局配置（页面路由、导航栏、tabBar）

• App.vue：全局入口文件（样式、生命周期）

• main.js：Vue 入口文件

• static：静态资源（图片、图标）

5. 基础语法规范

• 基于 Vue3 组合式 API 语法

• 内置常用组件：view、text、image、button、input 等

• 样式支持 px、rpx（响应式单位，适配多端）

• 生命周期兼容 Vue 生命周期 + 页面生命周期

三、示例程序

示例1：pages.json 路由配置

{
  "pages": [
    // 首页（第一项为默认首页）
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "单词库首页"
      }
    },
    {
      "path": "pages/list/list",
      "style": {
        "navigationBarTitleText": "单词列表"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#42b983",
    "backgroundColor": "#f5f5f5"
  }
}

示例2：uni-app 页面（Vue3 语法）

<!-- pages/index/index.vue -->
<template>
  <view class="container">
    <text class="title">uni-app 单词库</text>
    <button type="primary" @click="goList">进入单词列表</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 class="list">
    <view class="item" v-for="item in wordList" :key="item.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>

示例4：uni-app 路由跳转 API

// 跳转到新页面
uni.navigateTo({ url: '/pages/list/list' })

// 返回上一页
uni.navigateBack()

// 关闭当前页面，跳转到指定页
uni.redirectTo({ url: '/pages/index/index' })

四、掌握技巧与方法

1. uni-app 语法完全基于 Vue，会 Vue 即可快速上手。

2. 多端适配优先使用 rpx 单位，自动适配不同屏幕。

3. 页面必须在 pages.json 中注册，否则无法访问。

4. 不要使用浏览器专属 DOM API，使用 uni 内置 API（如 uni.request、uni.navigateTo）。

5. 运行项目先选择运行端（微信小程序、H5、浏览器），自动编译。

6. 调试使用 HBuilderX 控制台 + 对应端开发者工具。

7. 组件必须使用 uni-app 内置组件（view、text 等），不能用 div/span。

五、课后作业

基础作业

1. 安装 HBuilderX，创建 Vue3 版 uni-app 项目。

2. 配置 pages.json，创建 2 个页面（首页、列表页）。

3. 使用内置组件编写页面结构，实现基础样式。

进阶作业

1. 使用 Vue3 组合式 API 定义响应式单词数据，v-for 渲染列表。

2. 使用 uni.navigateTo 实现页面跳转与返回。

3. 分别运行到 H5 浏览器 和 微信小程序，查看多端效果。

实战作业

1. 开发 uni-app 跨平台单词管理小程序，包含首页、单词列表页，实现页面跳转、列表渲染、样式美化，可同时在 H5、微信小程序运行，代码规范、注释清晰、符合跨平台开发标准。

---

上一课：MongoDB 数据库实战 实战作业代码

代码功能说明

本实战作业基于 Node.js + Mongoose + MongoDB 实现完整单词管理全栈接口服务。项目通过 Mongoose 连接本地 MongoDB 数据库，定义单词数据 Schema 与 Model，实现数据持久化存储；搭建 HTTP 服务器，提供获取单词列表、新增单词、删除单词三大接口；配置跨域响应头，支持前端直接调用。所有接口返回标准 JSON 格式数据，可配合前端实现增删查功能，数据永久保存在数据库中，不会丢失。代码结构清晰、注释完整，覆盖 MongoDB 连接、增删改查、Node 接口开发等核心知识点，完成全栈开发闭环。

注意事项

1. 必须提前安装并启动 MongoDB 服务，否则无法连接数据库。

2. 必须安装 mongoose 依赖：npm i mongoose。

3. 数据库操作是异步任务，必须使用 async/await。

4. 每次修改代码后需要重启服务：node server.js。

5. 接口访问前确保端口 3000 未被占用。

6. 可使用 MongoDB Compass 可视化查看数据变化。

7. 必须配置跨域头，否则前端无法请求接口。

8. 关闭服务使用 Ctrl+C，避免端口占用。

完整实战代码

项目结构

mongodb-word-api/
├── server.js       # 主服务文件
└── model
    └── wordModel.js # 数据模型

model/wordModel.js

const 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 = Word

server.js

const 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;charset=utf-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

作业验收标准

1. MongoDB 服务启动正常，项目连接数据库成功。

2. 接口可正常返回数据库中的单词数据。

3. 代码结构规范，Schema 与 Model 定义正确。

4. 支持跨域，前端可正常调用接口。

5. 数据持久化存储，重启服务数据不丢失。

---