09 - uniapp 多端开发教程

全栈开发入门 管理员 2026年06月23日 241 次阅读 1304 字 约 5 分钟

视频教程：BV1W7QZYMEus

视频链接：BV1W7QZYMEus
发布日期：2025-03-19
视频时长：29:07
播放量：77.1万
所属合集：零基础AI全栈开发系列

视频概要

演示使用uniapp框架 + Cursor AI + Devbox，实现一套代码同时发布到微信小程序、APP、H5网页三个平台。覆盖uniapp项目创建、页面路由、组件开发、条件编译、微信小程序发布、APP打包等完整流程。

知识点清单

A. uniapp 框架

知识点说明重要程度
uniappDCloud出品的跨平台开发框架★★★★★
一套代码多端运行编写一次，发布到小程序/APP/H5★★★★★
Vue语法基于Vue.js，前端开发者无缝上手★★★★★
条件编译#ifdef / #endif 按平台写差异化代码★★★★
uni-uiuniapp官方UI组件库★★★
rpx单位响应式像素，自动适配不同屏幕★★★

B. 跨端发布目标

平台说明打包方式
<strong>微信小程序</strong>微信内的轻量级应用微信开发者工具上传
<strong>H5网页</strong>普通网页应用生成静态文件部署
<strong>APP (Android)</strong>安卓手机应用HBuilderX云打包
<strong>APP (iOS)</strong>苹果手机应用HBuilderX云打包（需Apple开发者账号）

C. 开发环境准备

# 前置条件
# 1. 安装Node.js（双数版本18/20，推荐用nvm管理）
# 2. 安装Cursor（AI编程辅助）
# 3. 微信公众平台注册小程序账号（不要选小游戏）
# 4. 安装微信开发者工具（预览和调试小程序）
# 5. 安装HBuilderX（打包APP用）

# 创建uni-app项目（Vue3/Vite版）
npx degit dcloudio/uni-preset-vue#vite my-uni-app
cd my-uni-app
npm install

D. 项目目录结构

my-uni-app/
├── src/
│   ├── pages/           # 页面目录
│   │   ├── index/       # 首页
│   │   │   └── index.vue
│   │   └── login/       # 登录页
│   │       └── login.vue
│   ├── components/      # 公共组件目录
│   ├── static/          # 静态资源（图片等）
│   ├── App.vue          # 应用入口组件
│   ├── main.js          # 主入口JS文件
│   ├── pages.json       # 页面路由配置（核心）
│   ├── manifest.json    # 应用配置（appid、版本号等）
│   └── uni.scss         # 全局样式变量
├── package.json
└── vite.config.js

E. 页面路由配置（pages.json）

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页"
            }
        },
        {
            "path": "pages/login/login",
            "style": {
                "navigationBarTitleText": "登录"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "我的应用",
        "navigationBarBackgroundColor": "#7141a8"
    },
    "tabBar": {
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页"
            }
        ]
    }
}

F. 条件编译

<template>
    <view>
        <!-- 所有平台都显示 -->
        <text>通用内容</text>

        <!-- #ifdef MP-WEIXIN -->
        <button open-type="getUserInfo">微信登录</button>
        <!-- #endif -->

        <!-- #ifdef APP-PLUS -->
        <button @click="appLogin">APP端登录</button>
        <!-- #endif -->

        <!-- #ifdef H5 -->
        <div>H5网页端内容</div>
        <!-- #endif -->
    </view>
</template>

平台标识说明
MP-WEIXIN微信小程序
MP-ALIPAY支付宝小程序
H5H5网页
APP-PLUSAPP
MP所有小程序

G. 多端发布流程

开发阶段
├── npm run dev:h5           → 浏览器预览
├── npm run dev:mp-weixin    → 微信开发者工具预览
└── HBuilderX真机调试         → 手机预览

发布阶段
├── npm run build:h5         → 生成网页文件 → 部署到服务器
├── npm run build:mp-weixin  → 生成小程序代码 → 微信开发者工具上传审核
└── HBuilderX发行 → 原生APP-云打包 → 下载安装包

H. uniapp 常用API

API作用示例
uni.request()发起网络请求uni.request({url, method, data, success})
uni.navigateTo()跳转页面（可返回）uni.navigateTo({url: '/pages/detail/detail'})
uni.redirectTo()跳转页面（关闭当前页）uni.redirectTo({url: '/pages/home/home'})
uni.switchTab()切换TabBar页面uni.switchTab({url: '/pages/index/index'})
uni.navigateBack()返回上一页uni.navigateBack({delta: 1})
uni.showToast()显示提示消息uni.showToast({title: '成功', icon: 'success'})
uni.showLoading()显示加载提示uni.showLoading({title: '加载中'})
uni.setStorage()本地存储数据uni.setStorage({key: 'token', data: 'xxx'})
uni.getStorage()读取本地存储uni.getStorage({key: 'token', success})
uni.chooseImage()选择图片uni.chooseImage({count: 1, success})

常见问题

问题解答
Windows系统npm创建失败？用管理员运行CMD/PowerShell；检查Node.js版本是否为双数
vite报错could not find commit hash？删除node_modules后重新npm install
打包成APP需要什么？需要HBuilder/HBuilderX，使用云打包功能
iOS开发需要Mac吗？开发不需要，上架App Store需要Apple开发者账号（99美元/年）
注销了不能重新注册？联系微信公众平台客服处理
Mac怎么打开HBuilder？终端输入 open /Applications/HBuilderX.app
小程序审核要注意什么？不要包含违规内容，首次审核约1-7天
rpx和px什么区别？rpx是响应式像素，自动适配不同屏幕宽度（750rpx = 屏幕宽度）

前置知识检查

  • [x] 了解Vue3基础语法
  • [x] 会使用npm安装依赖
  • [x] 了解Cursor基本操作
  • [x] 已注册微信小程序账号

学习建议

  • uniapp的学习曲线不高，会Vue就能快速上手
  • 建议先做H5版本，调试方便，确认逻辑无误后再适配小程序
  • 小程序审核有要求，注意不要包含违规内容
  • 打包APP需要等待云编译，首次可能需要10-20分钟
返回首页