提供服务好的网站归档系统电脑版浏览器网页入口
摘要：Uniapp作为一款基于Vue.js的跨平台开发框架，支持“一次开发，多端部署”。本文将手把手教你如何将Uniapp项目运行到微信小程序、H5、APP等多个平台，并解析常见问题。
一、环境准备
在开始前，请确保已安装以下工具🔧：
代码编辑器
- HBuilderX（官方IDE，推荐使用）
创建项目教程：官方HBuilderX创建项目教程
下载地址：HbuilderX下载地址 - Vscode（博主推荐使用🌹🌹）
但是需要自己通过vue-cli创建项目，并配置运营打包命令，我们可以直接下载官方的模版使用，具体的cli创建项目教程可以按照官方的步骤来：Vue-cli创建项目教程
下载地址：Vscode下载地址
项目环境
- Node.js（需≥14版本）
其他平台模拟器
- 各平台开发工具：
- 微信开发者工具（小程序）
- Android Studio（Android App）
- Xcode（iOS App）
二、创建Uniapp项目（我们以HBuilderX 创建项目举例子）
-
新建项目
打开HBuilderX → 文件 → 新建 → 项目 → 选择uni-app模板 → 输入项目名称。
-
项目结构解析
├── pages // 页面目录 ├── static // 静态资源 ├── App.vue // 根组件 ├── main.js // 入口文件 ├── manifest.json// 应用配置（如App图标） └── pages.json // 页面路由与样式
三、运行到不同平台
3.1 微信小程序
-
配置
微信开发者工具路径
配置自己的微信开发者工具路径
-
配置
manifest.json
打开manifest.json→ 微信小程序配置 → 输入微信AppID（若无，可跳过但无法真机调试）。
-
运行项目
-
顶部菜单 → 运行 → 运行到小程序模拟器 → 微信开发者工具
-
首次运行需在微信开发者工具中设置：设置 → 安全 → 开启服务端口
然后就运行成功了
-
常见问题
- 错误提示
[error] 项目未配置appid
在manifest.json中补充微信小程序的AppID，或点击“试用”跳过。
3.2 H5网页
-
浏览器运行
直接点击HBuilderX工具栏的“运行” → 运行到浏览器 → 选择Chrome。
-
自定义配置
在manifest.json的H5配置中可修改：- 路由模式（hash/history）
- 跨域代理（解决本地开发接口跨域问题）
3.3 Android/iOS App
-
基础配置
打开manifest.json→ App SDK配置 → 选择需要的模块（如地图、支付）。 -
真机调试
- 连接手机 → 开启USB调试
- 点击“运行” → 运行到手机或模拟器
-
云打包
菜单 → 发行 → 原生App-云打包 → 选择平台并提交。
注意：iOS打包需Apple开发者账号（年费$99），测试阶段可使用免费证书。
3.4 其他平台（快应用/支付宝小程序等）
在manifest.json中配置对应平台参数，运行方式与微信小程序类似，需提前安装各平台开发者工具。
四、条件编译技巧
通过注释实现多平台差异化代码：
可以参考我之前写的文章了解这部分知识：UniApp如何判断平台的多种方法（2025最新指南）
<!-- #ifdef H5 -->
<div>仅H5平台显示的内容</div>
<!-- #endif --><!-- #ifdef MP-WEIXIN -->
<view>仅微信小程序生效的组件</view>
<!-- #endif -->
五、常见问题汇总
| 问题描述 | 解决方案 |
|---|---|
| 微信开发者工具无法自动打开 | 检查端口是否开启，或手动导入项目目录 |
| H5页面路由白屏 | 修改路由模式为history |
| App启动闪退 | 检查是否缺少必要模块权限 |
六、总结
Uniapp通过统一的技术栈大幅降低多端开发成本，但需注意：
- 各平台API存在差异，建议使用条件编译
- 复杂功能（如原生插件）需单独适配
- 调试时优先使用真机测试